Simple secondary menu effect code implemented by jquery

Simple secondary menu effect code implemented by jquery_jquery

WBOY

Release： 2016-05-16 15:38:19

Original

1673 people have browsed it

The example in this article describes the simple secondary menu effect code implemented by jquery. Share it with everyone for your reference. The details are as follows:

This is a secondary menu based on jquery. After studying it for so many days, I learned to write a menu with jquery. It can be regarded as an encouragement to myself. I feel that this menu is very good. Friends are welcome to give me advice.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/jquery-simple-2l-menu-style-demo-codes/

The specific code is as follows:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery二级菜单</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
$(function(){
 $("#container .menu1 ul li").click(function(){
 var index=$("#container .menu1 ul li").index(this);
  $(this).addClass("bg").siblings().removeClass();
  $("#container .menu2 ul li ul").eq(index).show().parent().siblings("li").children("ul").hide();
 })
})
</script>
<style type="text/css">
 body{ margin:0; padding:0; font-family:"宋体"; font-size:9pt; color:#FFFFFF; font-weight:bold}
#container{ width:800px; height:auto; margin:0 auto; border:1px #1025c0 solid}
 #container .menu1{ width:800px; height:40px; border:none; background:url(images/menu1.gif) no-repeat}
 #container .menu1 ul{ margin:0; padding:0; position:relative; padding-top:5px;}
 #container .menu1 ul li{ float:left; padding-left:10px; height:35px; width:80px; line-height:35px; list-style:none; text-align:center; cursor:pointer}
 #container .menu2{ width:800px; height:35px; border:none; background-color:#333333;}
 #container .menu2 ul{ margin:0; padding:0}
 #container .menu2 ul li{ height:35px; line-height:35px; list-style:none; float:left; cursor:pointer}
 #container .menu2 ul li ul li{ float:left; padding-left:20px; height:35px; line-height:35px; list-style:none}
 .bg{ background-color:#333333}
 .hide{ display:none}
</style>
</head>
<body>
<div id="container">
<div class="menu1">
<ul>
<li class="bg">第一栏</li>
<li>第二栏</li>
<li>第三栏</li>
<li>第四栏</li>
<li>第五栏</li>
</ul>
</div>
<div class="menu2">
<ul>
<li>
<ul>
<li>第一栏</li><li>第一栏</li><li>第一栏</li>
</ul>
</li>
<li>
<ul class="hide">
<li>第二栏</li><li>第二栏</li><li>第二栏</li>
</ul>
</li>
<li>
<ul class="hide">
<li>第三栏</li><li>第三栏</li><li>第三栏</li>
</ul>
</li>
<li>
<ul class="hide">
<li>第四栏</li><li>第四栏</li><li>第四栏</li>
</ul>
</li>
<li>
<ul class="hide">
<li>第五栏</li><li>第五栏</li><li>第五栏</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>

Copy after login

I hope this article will be helpful to everyone’s jquery programming design.