jQuery結合ul和li實現的下拉選單例項程式碼

admin發表於2017-02-28
jQuery單例

下拉選單一般都會結合ul和li實現的，本章節分享的就是一段這樣的程式碼，希望能給需要的朋友帶來幫助。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<style type="text/css">
ul, ol, li{
  list-style:none;
  padding:0px;
  margin:0px;
}
#menu *{line-height:30px;}
#menu a{
  text-decoration:none;
  display:block;
}
#menu ul{
  text-align:left;
  background:#333;
}
#menu .arrow{
  float:right;
  padding-right:5px;
}
#menu>ul{height:30px;} 
#menu>ul>li{
  text-align:center;
  display:inline-block;
  width:80px;
}
#menu>ul>li>a{color:#fff;}
#menu>ul>li:hover{background:#666;}
#menu>ul>li ul{
  display:none;
  width:150px;
  position:absolute;
  background:#c1cd94;
  box-shadow:2px 2px 2px #000;
  -webkit-box-shadow:2px 2px 2px #000;
  -moz-box-shadow:2px 2px 2px #123;
}
#menu>ul>li>ul li{
  padding-left:5px;
  position:relative;
}
#menu>ul>li>ul li>a{color:#000;}
#menu>ul>li>ul li:hover{background:#d3dbb3;}
#menu>ul>li>ul>li ul{
  left:150px;
  top:0px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>  
<script type="text/javascript">
$(document).ready(function(){ 
  $('#menu>ul>li>ul').find('li:has(ul:not(:empty))>a').append("<span class='arrow'>></span>");
  $("#menu>ul>li").bind('mouseover',function(){ 
    $(this).children('ul').slideDown('fast'); 
  }).bind('mouseleave',function(){ 
    $(this).children('ul').slideUp('fast'); 
  }); 
  $('#menu>ul>li>ul li').bind('mouseover',function(){ 
    $(this).children('ul').slideDown('fast'); 
  }).bind('mouseleave',function(){ 
    $(this).children('ul').slideUp('fast'); 
  }) 
}); 
</script>
</head>
<body>
<div id="menu">
  <ul>
    <li><a href="">選單一</a>
      <ul>
        <li><a href="">子選單1</a></li>
        <li><a href="">子選單2</a>
          <ul>
            <li><a href="">子選單7</a></li>
          </ul>
        </li>
        <li><a href="">子選單3</a></li>
      </ul>
    </li>
    <li><a href="">選單二</a>
      <ul>
        <li><a href="">子選單4</a></li>
        <li><a href="">子選單5</a></li>
        <li><a href="">子選單6</a></li>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>

相關文章