<%@ page language= "C #" autoeventwireup= "true" codefile= "thirdmenu.asp tutorial X.cs" inherits= "Thirdmenu"%>
<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/ Xhtml1-transitional.dtd ">
<title>jquery Vertical downward Pull menu </title>
<link type= "text/css tutorial" href= "Css/menu.css" rel= "stylesheet"/>
<script type= "text/web Effects" src= "Jquery/jquery-1.3.min.js" ></script>
<script type= "Text/javascript" src= "Javascript/menu.js" ></script>
<body>
<form id= "Form1" runat= "Server" >
<div>
<ul>
<li class= "main" ><a href= "#" > menu item 1</a>
<ul>
<li><a href= "#" > Submenu Items 1</a></li>
<li><a href= "#" > Submenu Items 2</a></li>
<li><a href= "#" > Submenu Items 3</a></li>
<li><a href= "#" > Submenu Items 4</a></li>
</ul></li>
<li class= "main" ><a href= "#" > menu item 2</a>
<ul>
<li><a href= "#" > Submenu Items 1</a></li>
<li><a href= "#" > Submenu Items 2</a></li>
<li><a href= "#" > Submenu Items 3</a></li>
<li><a href= "#" > Submenu Items 4</a></li>
</ul></li>
<li class= "main" ><a href= "#" > menu item 3</a>
<ul>
<li><a href= "#" > Submenu Items 1</a></li>
<li><a href= "#" > Submenu Items 2</a></li>
<li><a href= "#" > Submenu Items 3</a></li>
<li><a href= "#" > Submenu Items 4</a></li>
</ul></li>
</ul>
<br/>
<br/>
<br/>
<ul>
<li class= "Hmain" ><a href= "#" style= "Background-image:url (' images/3.jpg ')" > menu item 1</a>
<ul class= "Sec_nav" >
<li><a href= "#" > Submenu Items 1</a></li>
<li><a href= "#" > Submenu Items 2</a></li>
<li><a href= "#" > Submenu Items 3</a></li>
<li><a href= "#" > Submenu Items 4</a></li>
</ul></li>
<li class= "Hmain" ><a href= "#" > menu item 2</a>
<ul class= "Sec_nav" >
<li><a href= "#" > Submenu Items 1</a></li>
<li><a href= "#" > Submenu Items 2</a></li>
<li><a href= "#" > Submenu Items 3</a></li>
<li><a href= "#" > Submenu Items 4</a></li>
</ul></li>
<li class= "Hmain" ><a href= "#" > menu item 3</a>
<ul class= "Sec_nav" >
<li><a href= "#" > Submenu Items 1</a></li>
<li><a href= "#" > Submenu Items 2</a></li>
<li><a href= "#" > Submenu Items 3</a></li>
<li><a href= "#" > Submenu Items 4</a></li>
</ul></li>
</ul>
</div>
</form>
</body>
css:==============================================================================
Body {
}
Ul,li
{
* * Remove DOT/
List-style:none;
}
Ul
{
Padding:0px;/*ie6,ie7 can not eliminate indentation * *
MARGIN:0PX;/*IE6,IE7 will be able to indent the * *
}
. main,.hmain
{
Background-image:url ('.. /images/1.jpg ');
Background-repeat:repeat-x;
width:120px;
}
Li
{
Background-color: #eee033;
width:120px;
}
. Main A,.hmain A
{
Color:white;
Background-image:url ('.. /images/3.jpg '); * Must remember images before add/, this problem, distressed for a long time *
Background-repeat:no-repeat;
}
. Main ul Li A,.hmain ul li a
{
color:red;
Background-image:none;
}
A
{
padding-left:20px;
Text-decoration:none;
display:block;/* filled the area.
display:inline-block;/* for ie6*/
width:100px;
}
. Main Ul,.hmain UL
{
Display:none;
}
/* Horizontal Menu * *
. hmain
{
Float:left;
margin-right:1px;
}
. sec_nav{border:0px Solid #ccc; Background: #3cf;d isplay:none;}javascript:=================================================================
$ (document). Ready (function () {
$ (". Main > a"). Click (function () {
var allul=$ (". Main");
var ulnode=$ (this). Next ("UL");
/* First method
if (Ulnode.css ("display") = = "None")
{
ULNODE.CSS ("Display", "block");
}
Else
{
ULNODE.CSS ("Display", "none");
}*/
/* The second method
if (Ulnode.css ("display") = = "None")
{
Ulnode.show ("slow");//parameter with text: "Slow"-slow, normal-general, fast-Quick
}
Else
{
Ulnode.hide (500);
}*/
The third method
Ulnode.toggle (500);/I just need this word.
Roll Curtain Effect
/* Fourth method
if (Ulnode.css ("display") = = "None")
{
Ulnode.slidedown (500);//parameter with text: "Slow"-slow, normal-general, fast-fast
}
Else
{
Ulnode.slideup (500);//parameter with text: "Slow"-slow, normal-general, fast-fast
}*/
Fifth method
Ulnode.slidetoggle (500);//parameter with text: "Slow"-slow, normal-general, fast-fast
Changeicon (Ulnode);});
* * This is another way of writing
$ (". Hmain>a"). Hover (function () {
$ (this). Next ("UL"). Slidedown ();
},function () {
var ulnode=$ (this). Next ("UL");
var timeoutid=settimeout (function () {
Ulnode.slideup ();
},300);
//
Ulnode.hover (function () {
Cleartimeout (Timeoutid);
},function () {
$ (this). Slideup ();
// });
// });*/
$ (". Hmain"). Hover (function () {
var ulobj=$ (this). Children ("ul");
$ (". Sec_nav"). Stop (false,true); To resolve when the mouse quickly across the menu when the dropdown box will continue to shrink up and down
Ulobj.slidedown ("slow");
Changeicon ($ (this). Children ("a"));
},function () {
$ (this). Children ("ul"). Slideup ("slow");
Changeicon ($ (this). Children ("a"));
});
});Function Changeicon (mainnode)
{
if (mainnode)
{
& nbsp; if (mainnode.css ("Background-image"). indexof ("3.jpg") >=0)
{
mainnode.css (" Background-image "," url (' images/2.jpg ') ");
}
Else
{
mainnode.css ("Background-image", "url" (' Images/3. JPG ') ");
}
}
}
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
