3.27课·········悬浮动态分层导航与隐藏导航
生活随笔
收集整理的這篇文章主要介紹了
3.27课·········悬浮动态分层导航与隐藏导航
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
例1:分層導(dǎo)航
<title>分層導(dǎo)航</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 >首頁(yè)</div></a> <a href="about us.html" target="_blank"><div>關(guān)于我們</div></a> <a href="services.html" target="_blank"><div>咖啡文化</div></a> <a href="price list.html" target="_blank"><div>價(jià)格清單</div></a> <a href="contact.html" target="_blank"><div>聯(lián)系我們</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>//錨點(diǎn)鏈接在搜狗瀏覽器中不行,在IE中可以 <script> function menuvisible() {$("nav").toggle(); //開關(guān),因?yàn)橐昧送獠縥Query代碼,所以可以用$ } </script> </body> </html>
例2:隱藏導(dǎo)航:三層導(dǎo)航,先做一個(gè)div,里面包含三個(gè)小的div,每個(gè)小div里又包含一個(gè)表格,然后這個(gè)表格用一個(gè)div去定位.
<title>隱藏導(dǎo)航練習(xí)</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>網(wǎng)游</td></tr></table></div></div> </div> </body> </html>
??
?
轉(zhuǎn)載于:https://www.cnblogs.com/xinghun/p/5331252.html
總結(jié)
以上是生活随笔為你收集整理的3.27课·········悬浮动态分层导航与隐藏导航的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 港珠澳大桥配额申请条件，港珠澳大桥怎么收
- 下一篇： 如何释放电脑被限制的20%网速？