<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/ Xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>jquery pull-down Menu </title>
<body>
Brief introduction
I met some websites and a drop down list dedicated to making just RSS feeds down. They do that because they have different categories of RSS feeds. I think it's very useful because all of its RSS feeds are grouped together to show it only when users need it. Space-saving and a simpler user interface.
So here we are, we will create a simple menu for it to descend. People are easy on the skin, and it's easy to understand how it works well
HTML code
<ul id= "dropdown"
<li><a href= "#" class= "parent" >rss
<ul class= "Children"
<li><a href= "#" >all categories</a ></li>
<li><a href= "#" >AJAX</A></LI>
<li><a href= "#" >css html</a></li>
<li><a href= " # ">design</a></li>
<li><a href=" # ">typography</a></li
<li><a href= "#" > Web page Special effects </a></li>
<li> <a href= "#" >php tutorials MySQL tutorials </a></li>
<li><a href= "#" > Wallpaper</a></li>
<li><a href= "#" >wordpress</a></li>
</ul>
</li>
</ul>
Css
There are two things we need to style the main UL list (parent), after that, the style second UL list (children). The parent list should have a relative position. List of children must have absolute position, Z-index set to highest, hidden by default
<style>
Body {
font-family:arial;
}
A
Text-decoration:none;
Color: #666;
}
a:hover {
Color: #e11;
}
#dropdown {
* Cancel the default list style * *
List-style:none;
margin:0;
padding:0;
width:180px;
position:relative;
}
#dropdown Li {
}
#dropdown Li A.parent {
Display:block;
width:180px; height:40px;
font-weight:700;
padding:0 0 0 10px;
line-height:35px;
Background:url (parent.gif) 0px 0px no-repeat;
}
#dropdown Li A.hover {
Background:url (parent.gif) 0px-40px no-repeat;
}
#dropdown ul {
* Cancel the default list style * *
margin:0;
padding:0;
List-style:none;
Display:none;
/* Make sure it has the highest z-index * *
Position:absolute;
left:0;
z-index:500;
Background: #fff;
width:180px;
Background:url (child.gif) left bottom no-repeat;
}
#dropdown ul Li {
font-size:11px;
}
#dropdown ul Li a {
Display:block;
font-weight:700;
padding:0 0 0 10px;
height:30px;
Color: #fff;
}
#dropdown ul Li A:hover {
Color: #e11
}
</style>
Javascript
JavaScript is fairly simple, just a normal hover event. I'm going to show () and hide () to display submenus (I think we can make a drop-down menu based on CSS without using JavaScript drop), but if you want to spice it up, you can use other similar fade/fade or effect basic shows
<script type= "Text/javascript" src= "Js/jquery.js" ></script>
<script language= "JavaScript" >
$ (document). Ready (function () {
$ (' #dropdown '). Hover (
function () {
Change the background of parent menu
$ (' #dropdown Li A.parent '). addclass (' hover ');
Display the submenu
$ (' #dropdown Ul.children '). Show ();
},
function () {
Change the background of parent menu
$ (' #dropdown Li A.parent '). Removeclass (' hover ');
Display the submenu
$ (' #dropdown ul.children '). Hide ();
}
);
});
</script>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
