javascript實現的三級下拉導航菜單
本章節介紹一下分享一段使用原生javascript實現的三級下拉導航菜單效果。
在實際應用中更為常見的是二級導航菜單,但是三級導航的菜單的出現頻率也并不少,當然實現更為復雜一些。
下面就是代碼實例,需要的朋友可以進行一下參考。
代碼實例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="/" />
<title>實例</title>
<style type="text/css">
*{
margin:0;
padding:0;
border:0;
}
li{list-style: none;}
.clearfix:after{
content:" ";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{display: inline-block;}
a:link{
color:#000;
text-decoration:none;
}
a:visited{
color:#000;
text-decoration:none;
}
a:hover{
color:#000;
text-decoration:none;
}
.menu{
width:778px;
height:26px;
background:#fff;
margin:0 auto;
}
.menusel{
float:left;
width:100px;
position:relative;
height:25px;
background:#ddd;
line-height:25px;
margin-left:1px;
*margin-left:0px;
_margin-left:-1px;
}
.menusel h2{font-size:12px;}
.menusel a{
display:block;
text-align:center;
width:100px;
border:1px solid #a4a4a4;
height:25px;
border-bottom:1px solid #a4a4a4;
position:relative;
z-index:2;
}
.menusel a:hover{
border:1px solid #a4a4a4;
border-bottom:1px dashed #eeeeee;
position:relative;
z-index:2;
height:25px;
}
.ahover a{
border-bottom:1px dashed #eeeeee;
background:#eeeeee;
}
.position{
position:absolute;
z-index:1;
}
.menusel ul{
width:125px;
background:#eee;
border:1px solid #a4a4a4;
margin-top:-1px;
position:relative;
z-index:1;
display:none;
}
.menusel .block{
display:block;
}
.typeul li{
border-bottom:1px dashed #a4a4a4;
width:125px;
position:relative;
float:left;
}
.typeul li a{
border:none;
width:125px;
}
.typeul li a:hover{
border:none;
background:#ddd;
}
.typeul{
margin-left:0;
}
.typeul ul{
left:125px;
top:0;
position:absolute;
}
.fli{
margin-left:-1px;
border-left:#eeeeee solid 1px;
}
.menusel .lli{
border:none;
}
</style>
</head>
<body>
<div class="menu">
<div id="menu1" class="menusel">
<h2><a href="/">菜單1</a></h2>
<div class="position">
<ul class="clearfix typeul">
<li><a href="">菜單選項1-2</a></li>
<li> <a href="#">菜單選項1-2</a>
<ul>
<li class="fli"><a href="#">菜單選項1-2-1</a></li>
<li class="lli"><a href="#">菜單選項1-2-2</a></li>
</ul>
</li>
<li><a href="">菜單選項1-2</a></li>
<li class="lli"><a href="#">菜單選項1-2</a></li>
</ul>
</div>
<!-- position -->
</div>
<!-- menusel -->
<div id="menu2" class="menusel">
<h2><a href="#">菜單2</a></h2>
<div class="position">
<ul class="clearfix typeul">
<li><a href="#">菜單選項2-2</a></li>
<li><a href="#">菜單選項2-2</a>
<ul>
<li class="fli"><a href="#">菜單選項2-2-1</a></li>
<li class="lli"><a href="#">菜單選項2-2-2</a>
<ul>
<li class="fli"><a href="#">菜單選項2-2-1</a></li>
<li class="lli"><a href="#">菜單選項2-2-2</a> </li>
</ul>
</li>
</ul>
</li>
<li><a href="#">菜單選項2-2</a></li>
<li class="lli"><a href="#">菜單選項2-2</a></li>
</ul>
</div>
<!-- position -->
</div>
<!-- menusel -->
<div id="menu3" class="menusel">
<h2><a href="#">菜單3</a></h2>
<div class="position">
<ul class="clearfix typeul">
<li><a href="#">菜單選項3-2</a></li>
<li><a href="#">菜單選項3-2</a>
<ul>
<li class="fli"><a href="#">菜單選項3-2-1</a></li>
<li class="lli"><a href="#">菜單選項3-2-2</a>
<ul>
<li class="fli"><a href="#">菜單選項3-2-1</a></li>
<li class="lli"><a href="#">菜單選項3-2-2</a>
<ul>
<li class="fli"><a href="#">菜單選項3-2-1</a></li>
<li class="lli"><a href="#">菜單選項3-2-2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">菜單選項3-2</a></li>
<li class="lli"><a href="#">菜單選項3-2</a></li>
</ul>
</div>
<!-- position -->
</div>
<!-- menusel -->
</div>
<!-- menu -->
<script type="text/javascript">
for(var x = 1; x < 4; x++) {
var menuid = document.getElementById("menu"+x);
menuid.num = x;
type();
}
function type(){
var menuh2 = menuid.getElementsByTagName("h2");
var menuul = menuid.getElementsByTagName("ul");
var menuli = menuul[0].getElementsByTagName("li");
menuh2[0].onmouseover = show;
menuh2[0].onmouseout = unshow;
menuul[0].onmouseover = show;
menuul[0].onmouseout = unshow;
function show(){
menuul[0].className = "clearfix typeul block"
}
function unshow(){
menuul[0].className = "typeul"
}
for(var i = 0; i < menuli.length; i++){
menuli[i].num = i;
var liul = menuli[i].getElementsByTagName("ul")[0];
if(liul){
typeshow()
}
}
function typeshow(){
menuli[i].onmouseover = showul;
menuli[i].onmouseout = unshowul;
}
function showul(){
menuli[this.num].getElementsByTagName("ul")[0].className = "block";
}
function unshowul(){
menuli[this.num].getElementsByTagName("ul")[0].className = "";
}
}
</script>
</body>
</html>
聲明:本文內容由互聯網用戶自發貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容, 請發送郵件至201542412@QQ.com舉報,一經查實,本站將立刻刪除。
相關推薦
-
angularJS結合canvas實現的畫圖代碼實例
本章節介紹分享一段代碼實例,它實現ngulrJS結合cnvs實現作圖效果。代碼實例:
-
angularJS的$attrs方法使用代碼實例
下面就是相關此方法應用的代碼實例,需要的朋友可以做一下參考。代碼如下: ut
-
angularJS進行表單提交代碼實例
本章節分享一段代碼實例,它實現了使用ngulrJS進行表單提交的功能。有需要的朋友可以做一下參考,代碼實例如下: chrs
-
阻止點擊回車提交表單效果代碼實例
本章節介紹一下如何阻止點擊回車提交表單效果。在默認情況下,如果表單或者表單元素獲取焦點的話,點擊回車就會提交表單。但是在實際應用中,往往需要只點擊提交按鈕才能夠提交表單。代碼實例如下:
-
js模擬實現StringBuffer類功能代碼實例
JvScrit并沒有內置的StringBuffr()方法,下面就通過代碼實例來模擬實現它的功能。代碼實例如下:function StringBuffr() { this.__strings















