jquery 竖向二级下拉导航菜单

JQuery

1个成员

jquery 竖向二级下拉导航菜单

发表于 2016-12-26 • 2596 次查看

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery 竖向二级下拉导航菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/css教程">
body {
font-family: helvetica, arial, sans-serif;
font-size: 0.9em;
}

p {
line-height: 1.5em;
}

ul#menu, ul#menu ul {
list-style-type:none;
margin: 0;
padding: 0;
width: 15em;
}

ul#menu a {
display: block;
text-decoration: none;
}

ul#menu li {
margin-top: 1px;
}

ul#menu li a {
background: #333;
color: #fff;
padding: 0.5em;
}

ul#menu li a:hover {
background: #000;
}

ul#menu li ul li a {
background: #ccc;
color: #000;
padding-left: 20px;
}

ul#menu li ul li a:hover {
background: #aaa;
border-left: 5px #000 solid;
padding-left: 15px;
}
.code {
border: 1px solid #ccc;
list-style-type: decimal-leading-zero;
padding: 5px;
margin: 0;
}
.code code {
display: block;
padding: 3px;
margin-bottom: 0;
}
.code li {
background: #ddd;
border: 1px solid #ccc;
margin: 0 0 2px 2.2em;
}
.indent1 {
padding-left: 1em;
}
.indent2 {
padding-left: 2em;
}
</style>

<script src="/jquery-1.2.1.min.js" type="text/网页特效"></script> 文件县官方下载
<script type="text/javascript">
function initmenu() {
$('#menu ul').hide();
$('#menu ul:first').show();
$('#menu li a').click(
    function() {
      var checkelement = $(this).next();
      if((checkelement.is('ul')) && (checkelement.is(':visible'))) {
        return false;
        }
      if((checkelement.is('ul')) && (!checkelement.is(':visible'))) {
        $('#menu ul:visible').slideup('normal');
        checkelement.slidedown('normal');
        return false;
        }
      }
    );
}
$(document).ready(function() {initmenu();});
</script>
</head>
<body>
预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。<br>

<ul id="menu">
<li>
  <a href="#">weblog tools</a>
  <ul>
   <li><a href="#">pivotx</a></li>
   <li><a href="#">wordpress</a></li>
  </ul>
</li>
<li>
  <a href="#">programming languages</a>
  <ul>
   <li><a href="#">php教程</a></li>
   <li><a href="#">ruby</a></li>
   <li><a href="#">python</a></li>
   <li><a href="#">perl</a></li>
   <li><a href="#">java</a></li>
   <li><a href="#">c#</a></li>
  </ul>
</li>
<li><a href="http://www.zzsky.cn" target="_blank">zzsky(no submenu)</a></li>
<li>
  <a href="#">cool stuff</a>
  <ul>
   <li><a href="#">apple</a></li>
   <li><a href="#">maitianquan</a></li>
   <li><a href="#">xbox360</a></li>
   <li><a href="#">nifengla</a></li>
   <li><a href="#">nintendo</a></li>
  </ul>
</li>
<li>
  <a href="#">search engines</a>
  <ul>
   <li><a href="#">yahoo!</a></li>
   <li><a href="#">google</a></li>
   <li><a href="#">ask.com</a></li>
   <li><a href="#">live search</a></li>
  </ul>
</li>
</ul>
</body>
</html>