例1:分层导航
<title>分层导航</title> <script src="../JavaScript/jquery-1.4.2.min.js">//引用外部JS代码 </script> <style> #apDiv1 { position: fixed; left: auto; top: auto; bottom: auto; width: 237px; height: auto; z-index: 2; margin-top: -8px; margin-left: 40px; text-align: center; font-size: 16px; color: #965D28; } #menu { display: none; } .daohang div { height: 30px; z-index: 2; margin: 0 auto; text-align: center; padding-top: 5px; overflow: hidden; color: #965D28; } .daohang div:hover { height: 30px; z-index: 2; margin: 0 auto; text-align: center; overflow: visible; color: #0F3; } .daohang li { margin-left: 237px; list-style-type: none; background-color: #D3A23A; width: 160px; line-height: 30px; color: #422B1D; position: relative; top: -40px; border: solid thin; border-color: #965D28; z-index: 1; } .daohang li:hover { margin-left: 237px; list-style-type: none; background-color: #D3A23A; width: 160px; line-height: 50px; color: #0F3; position: relative; top: -40px; border: solid thin; border-color: #965D28; z-index: 1; } .daohang a:link, a:visited { text-decoration: none; color: #965D28; } .daohang a:hover { text-decoration: none; color: #0F3; } </style> </head> <a name="top"></a> <body> <div id="apDiv1"> <nav id="menu"> <div class="daohang" > <a href="index.html"> <div >首页</div> </a> <a href="about us.html" target="_blank"> <div>关于我们</div> </a> <a href="services.html" target="_blank"> <div>咖啡文化</div> </a> <a href="price list.html" target="_blank"> <div>价格清单</div> </a> <a href="contact.html" target="_blank"> <div>联系我们</div> </a> </div> </nav> <div style="background-color:#6FF; line-height:35px; border:solid medium #965D28; margin-top:3px;" onclick="menuvisible()"> <input style=" border:none; 100%; font-family:'黑体'; font-size:24px; height:100%; line-height:35px;" type="button" value="<--MENU-->" /> </div> <a href="#top" style="text-decoration:none; color:#965D28; line-height:30px">top</a></div>//锚点链接在搜狗浏览器中不行,在IE中可以 <script> function menuvisible() { $("nav").toggle(); //开关,因为引用了外部jQuery代码,所以可以用$ } </script> </body> </html>
例2:隐藏导航:三层导航,先做一个div,里面包含三个小的div,每个小div里又包含一个表格,然后这个表格用一个div去定位.
<title>隐藏导航练习</title> <style> * { margin: 0px; padding: 0px; } .a { height: 40px; width: 80px; top: 100px; left: 300px; position: absolute; overflow: hidden; line-height: 40px; text-align: center; background-color: #0FF; } .aa { height: 40px; width: 80px; top: 100px; left: 300px; position: absolute; overflow: visible; line-height: 40px; text-align: center; background-color: #F00; } table { height: 40px; width: 240px; border: 0px; text-align: center; vertical-align: middle; } .b { width: 80px; top: 40px; position: absolute; overflow: hidden; line-height: 40px; text-align: center; background-color: #0F0; } .bb { width: 80px; top: 40px; position: absolute; overflow: visible; line-height: 40px; text-align: center; background-color: #0000FF; } #b { height: 40px; width: 240px; top: 0; left: 80px; position: absolute; } .c { width: 80px; top: 80px; position: absolute; overflow: hidden; text-align: center; line-height: 40px; background-color: #FF0; } .cc { width: 80px; top: 80px; position: absolute; overflow: visible; text-align: center; line-height: 40px; background-color: #90C; } #c { height: 40px; width: 240px; top: 0; right: 80px; position: absolute; } .d { width: 80px; top: 120px; position: absolute; overflow: hidden; text-align: center; line-height: 40px; background-color: #F0F; } .dd { width: 80px; top: 120px; position: absolute; overflow: visible; text-align: center; line-height: 40px; background-color: #990; } #d { height: 40px; width: 240px; top: 0; left: 80px; position: absolute; } </style> </head> <body> <div class="a" onmouseover="this.className='aa'" onmouseout="this.className='a'">小说 <div class="b" onmouseover="this.className='bb'" onmouseout="this.className='b'">玄幻 <div id="b"> <table cellpadding="0" cellspacing="0" bgcolor="#CC9933" > <tr> <td>修真</td> <td>武侠</td> <td>科幻</td> </tr> </table> </div> </div> <div class="c" onmouseover="this.className='cc'" onmouseout="this.className='c'"> 都市 <div id="c"> <table cellpadding="0" cellspacing="0" bgcolor="#669933"> <tr> <td>言情</td> <td>灵异</td> <td>异能</td> </tr> </table> </div> </div> <div class="d" onmouseover="this.className='dd'" onmouseout="this.className='d'" > 穿越 <div id="d"> <table cellpadding="0" cellspacing="0" bgcolor="#0099FF"> <tr> <td>异界</td> <td>重生</td> <td>网游</td> </tr> </table> </div> </div> </div> </body> </html>
