當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

3.27课·········悬浮动态分层导航与隐藏导航

發布時間：2023/11/27 生活经验 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 3.27课·········悬浮动态分层导航与隐藏导航小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

例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>

轉載于:https://www.cnblogs.com/xinghun/p/5331252.html

總結

以上是生活随笔為你收集整理的3.27课·········悬浮动态分层导航与隐藏导航的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

动态

上一篇：港珠澳大桥配额申请条件，港珠澳大桥怎么收
下一篇：我听孩子说《论语》是今年北京高考新加进来