例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; width: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>
