Collection of three jquery implementation collapse menu code

Last Update:2017-01-13 Source: Internet

Author: User

Tags prev

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

<title> scalable menus, using jquery rewrite </title>
<style>
<!--
body{
Background-color: #ffdee0;
}
#navigation {
width:200px;
font-family:arial;
}
#navigation > UL {
List-style-type:none; /* Do not display bullets * *
margin:0px;
padding:0px;
}
#navigation > Ul > li {
border-bottom:1px solid #ed9f9f; /* Add underline/*
}
#navigation > Ul > li > a{
Display:block; /* Block Display * *
padding:5px 5px 5px 0.5em;
Text-decoration:none;
border-left:12px solid #711515; * * The thick red edge on the left/*
border-right:1px solid #711515; /* Right Shadow * *
}
#navigation > Ul > li > A:link #navigation > Ul > li > a:visited{
Background-color: #c11136;
Color: #ffffff;
}
#navigation > Ul > li > a:hover{/* Mouse passing time * *
Background-color: #990020; /* Change background color * *
Color: #ffff00; /* Change text color * *
}

/* submenu CSS Tutorial Style * *
#navigation ul Li ul{
List-style-type:none;
margin:0px;
padding:0px 0px 0px 0px;
}
#navigation UL Li ul li{
border-top:1px solid #ed9f9f;
}
#navigation ul Li ul Li a{
Display:block;
padding:3px 3px 3px 0.5em;
Text-decoration:none;
border-left:28px solid #a71f1f;
border-right:1px solid #711515;
}
#navigation ul Li ul Li A:link, #navigation ul Li ul Li a:visited{
Background-color: #e85070;
Color: #ffffff;
}
#navigation ul Li ul Li a:hover{
Background-color: #c2425d;
Color: #ffff00;
}
#navigation ul li ul.myhide{/* Hide submenu * *
Display:none;
}
/*
No longer need myshow style
#navigation ul Li ul.myshow{
Display:block;
}
*/
-->
</style>
<script language= "Web Effects" src= "Jquery.min.js" ></script>
<script language= "JavaScript" >
$ (function () {
Find the UL mark contained in all Li tags
It then finds the previous tag (that is, <a>) and adds the Click () event
$ ("Li"). Find ("ul"). Prev (). Click (function () {
Click <a> let the brother behind it (ie <ul>) switch CSS styles
$ (this). Next (). Toggleclass ("Myhide");
});
});
/*
Replace the original example
function Change () {
$ (this). Parent (). FIND ("ul"). Toggleclass ("Myhide");
Through the parent element Li, find the brother element ul
var oseconddiv = this.parentnode.getelementsbytagname ("ul") [0];
CSS alternate to achieve explicit, implicit
if (Oseconddiv.classname = = "Myhide")
Oseconddiv.classname = "Myshow";
Else
Oseconddiv.classname = "Myhide";
}
Window.onload = function () {
$ ("Li"). Find ("ul"). Prev (). Click (change);
/*var Oul = document.getElementById ("Listul");
var Ali = Oul.childnodes; Child elements
var OA;
for (Var i=0;i<ali.length;i++) {
If the child element is Li, and this Li has a submenu of UL
if (Ali[i].tagname = = "Li" && ali[i].getelementsbytagname ("ul"). Length) {
OA = Ali[i].firstchild; Find a hyperlink
Oa.onclick = change; Dynamic Add Click function
}
}
}*/
</script>
<body>
<div id= "Navigation" >
<ul id= "Listul" >
<li><a href= "#" >home</a></li>
<li><a href= "#" >news</a>
<ul class= "Myhide" >
<li><a href= "#" >lastest news</a></li>
<li><a href= "#" >all news</a></li>
</ul>
</li>
<li><a href= "#" >sports</a>
<ul class= "Myhide" >
<li><a href= "#" >basketball</a></li>
<li><a href= "#" >football</a></li>
<li><a href= "#" >volleyball</a></li>
</ul>
</li>
<li><a href= "#" >weather</a>
<ul class= "Myhide" >
<li><a href= "#" >today ' s weather</a></li>
<li><a href= "#" >forecast</a></li>
</ul>
</li>
<li><a href= "#" >contact me</a></li>
</ul>
</div>
</body>

Instance Collapse Menu Two

<!doctype HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title>insert title here</title>
<script type= "Text/javascript" src= "Js/jquery.min.js" ></script>
<script type= "Text/javascript" >
$ (function () {

$ ("#menu_1"). Click (function () {
$ (this). CSS ("Background", "url" (...). /img/menu-fouce_03.jpg) no-repeat ");
$ (". Main_2>a"). CSS ("Background", "none");
$ (". Main_2>ul"). Slideup ("slow");

});

$ (". Main_2 ul"). Children (1). Find ("a"). Hover (function () {
$ (this). CSS ("Background", "url (img/sub-menu-fouce-bg_03.jpg) no-repeat");
},function () {
$ (this). CSS ("Background", "none");
});
$ (". Main_2>a"). Click (function () {
$ ("#menu_1"). CSS ("Background", "none")
var ulnode=$ (this). Next ("UL");
$ (". Main_2>ul"). Slideup ("slow");
Ulnode.slidetoggle ("slow");
});
$ (". Main_2>a"). Hover (function () {
$ (this). CSS ("Background", "url (img/menu-fouce-down_03.jpg) no-repeat");
},function () {
$ (this). CSS ("Background", "url (img/menu_bg_03.gif) no-repeat");
});

});
</script>
<body>
<ul>
<li class= "Main_1" >
<a href= "" "Id=" menu_1 ">
</li>
<li class= "Main_2" >
<a href= "" "> Personnel Management </a>
<ul>
<li><a href= "#" > Sale Point Management </a></li>
<li><a href= "#" > Application Data Management </a></li>
<li><a href= "#" > Sales point Access Frequency settings </a></li>
<li><a href= "#" > area salesman set </a></li>
<li><a href= "#" > Import point of Sale information </a></li>
</ul>
</li>
<li class= "Main_2" >
<a href= "" ">
<ul>
<li><a href= "#" > Sale Point Management </a></li>
<li><a href= "#" > Application Data Management </a></li>
<li><a href= "#" > Sales point Access Frequency settings </a></li>
</ul>
</li>

jquery Collapse Menu Instance three

<!doctype HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<title> Untitled Document </title>
<script type= "Text/javascript" language= "JavaScript" src= "Jquery-1.3.2.min.js" ></script>
<style type= "Text/css" >
. menu_list {
width:150px;
}

. menu_head {
PADDING:8PX 10px;
Cursor:pointer;
position:relative;
margin:1px;
Font-weight:bold;
Background: #93cdff;
}

. menu_body {
Display:none;
}

. menu_body a {
PADDING:8PX 0px;
Display:block;
Color: #006699;
Background-color: #efefef;
padding-left:10px;
Font-weight:bold;
Text-decoration:none;
}

. menu_body A:hover {
Color: #7fb2f4;
Background-color: #dfdfdf;
Text-decoration:underline;
}
</style>
<script type= "Text/javascript" >
$ (function () {
$ ("#firstpane p.menu_head"). Click (Function ()
{
$ (this). Next ("Div.menu_body"). Slidetoggle. Siblings ("Div.menu_body"). Slideup ("slow");
});
$ ("#firstpane p.menu_head"). Mouseo Tutorial ver (function ()
{
$ (this). CSS ({background: "#2286c6"});
});
$ ("#firstpane p.menu_head"). Mouseout (function ()
{
$ (this). CSS ({background: "#93cdff"});
});
}); s
</script>

<body>
<div id= "Firstpane" class= "Menu_list" >
<p class= "Menu_head" >
Menu 1
</p>
<div class= "Menu_body" >
<a href= "#" > submenu 1</a>
<a href= "#" > submenu 2</a>
<a href= "#" > submenu 3</a>
</div>
<p class= "Menu_head" >
Menu 2
</p>
<div class= "Menu_body" >
<a href= "#" > submenu 1</a>
<a href= "#" > submenu 2</a>
<a href= "#" > submenu 3</a>
</div>
<p class= "Menu_head" >
Menu 3
</p>
<div class= "Menu_body" >
<a href= "#" > submenu 1</a>
<a href= "#" > submenu 2</a>
<a href= "#" > submenu 3</a>
</div>
<p class= "Menu_head" >
Menu 4
</p>
<div class= "Menu_body" >
<a href= "#" > submenu 1</a>
<a href= "#" > submenu 2</a>
<a href= "#" > submenu 3</a>
</div>
</div>
</body>

Http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More