This menu effect is controlled by scripts and styles and is a great learning element for beginners:
This night while watching the dance miracle, while finishing the small code of this menu, a look at it, will be able to restudying, can not learn from the idea, in fact, is to improve the idea of this front-end, so that it no longer unfamiliar:
This is the menu part of a asp.net master page
HTML section:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<link type= "Text/css" rel= "Stylesheet" href= "Styles/master.css"/>
<script src= "Scripts/jquery-1.4.1.min.js" type= "Text/javascript" ></script>
<script src= "Scripts/nav.js" type= "Text/javascript" ></script>
<body>
<div class= "nav" id= "NAV" >
<input type= "hidden" value= "<%=request.querystring[" "Menutemp"%> "id=" "MasterID"/>
<a href= "default.aspx?menutemp=0" class= "Check" > Home </a>
<a href= "Surveylist.aspx?menutemp=1" > Hospital Overview </a>
<a href= "culturelist.aspx?menutemp=2" > Hospital culture </a>
<a href= "tumor dynamic list.aspx?menutemp=3" > Hospital Dynamics </a>
<a href= "Services list. aspx?menutemp=4" > Hospital service </a>
<a href= "Medical guidelines.aspx?menutemp=5" > Doctor's Guide </a>
<a href= "introduce department.aspx?menutemp=6" > Department Introduction </a>
</div>
</body>
#master. Head nav a.check{background:url (. /images/navbg.png) 1px 1px no-repeat; Color: #fff;}
Here is the JS part that gives life to HTML, and he lets the page move:
var current = $ ("#masterid"). Val ()//To get the value of the Id=masterid page element in jquery, in order to get the selected menu
var alist = new Array ();//define Array
if (current = = "") {//If you don't get the selected menu, we ignore this
current =-1;
}
$ ("#nav >a"). each (function (i, items) {//This part is when you click on the menu item, there is no refresh page when the style changes, haha, each is a traversal function, will traverse the #nav>a collection.
Alist[i] = $ (items);//i is from 0 to the end of the traversal set, since the 1
$ (Alist[i]). Click to register the Click event (function () {//to Alist[i], and clicking will execute the corresponding method.
if (I!= current) {//If a different menu item is selected, the selected menu will be given the appropriate style, and the previous will remove the style
$ (this). addclass ("check");
$ (alist[current]). Removeclass ("check");
Current = i;//Returns the newly selected menu item ID
}
});
});
$ ("#nav >a"). each (function (i, items) {//This is the processing of the page style after the page jumps to the new page, so that the menu style is properly called.
Alist[i] = $ (items);
if (I!= current) {
$ (Alist[i]). Removeclass ("check");
}
});
$ (alist[current]). addclass ("check");
});
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
