Anti-refresh Two-level highlight menu effect without cookies

menu highlighting is a common design approach for each Web page, which effectively lets users know where they are currently in the column

This is the way I often use, the general Web page has at least two level menu, the first is the top of the total navigation bar menu, the other is the left-hand side of the category navigation menu. General requirements in the first level menu highlighted level Two menu can also record the current state.
For a header area that contains the top menu, if it is invariant, that is, it does not have to reload every time, this situation with a pure CSS or JS way can be easily achieved, but today I want to talk about is not this, today is said that the level menu and level two menu in each page are dynamically loaded, That is, they are loaded as a user control. In this case, it is difficult to record the highlight state of the menu.
Of course, you might say that you can use cookies to record the highlight state of the last record of each page load, yes, it can be recorded, but in some complex applications that contain many subpages, it will cause a lot of trouble to the user. For example, during the cookie lifetime, when you reopen the project, the cookie's lifetime is not fully finished, it also records the last saved state, and when the page address has changed, the currently highlighted menu does not point to the page that the user wants to see. Practice has proved that the life cycle of this cookie, no matter how long you set is not perfect to solve the user malicious refreshing page situation. It's a really bad thing!
So is there a better way to solve this situation?
The answer is yes. We know that the best way to solve this problem is to explicitly set the highlight style of the current menu based on the URL address of the page when each page is loaded. This solves this problem perfectly, and the highlight status remains the same regardless of how the user clicks the Refresh button maliciously.
Know the principle, to realize it is much easier.
"Structure Layer"
First level menu structure layer:
<ul id= "Menu" >
<li><a href= "default.html" > Home </a></li>
<li><a href= "clothing.html" > Apparel products </a></li>
<li><a href= "house.html" > Household Items </a></li>
<li><a href= "cosmetic.html" > Cosmetic Products </a></li>
</ul>
You can see that in this level of menu, the link address is generally without parameter values.
The structure layer of the second level menu:
<ul id= "Othermenu" >
<li><a href= "house.html?pid=2&sid=1" > Daily necessities </a></li>
<li><a href= "house.html?pid=2&sid=2" > Small furniture </a></li>
<li><a href= "house.html?pid=2&sid=3" > Electrical accessories </a></li>
<li><a href= "house.html?pid=2&sid=4" > Bed Product Kit </a></li>
<li><a href= "house.html?pid=2&sid=5" > Wedding Bed Products </a></li>
<li><a href= "house.html?pid=2&sid=6" > Children's Bed </a></li>
<li><a href= "house.html?pid=2&sid=7" > Technology equipment </a></li>
<li><a href= "house.html?pid=2&sid=8" > Cleaning Tools </a></li>
<li><a href= "house.html?pid=2&sid=9" > Home cleaning </a></li>
</ul>
Unlike the first level menu, we add the link address in the level two menu to two parameter values, the PID parameter points to the ordinal of the top level menu, and the SID is the order number of the menu itself.
We will both the total container of the two menus UL set up two different IDs, they need to be called in JS, so never less.
"Style layer"
About style, in fact, there is no special place, you can set your mind to the style you want, just need to pay attention to is that we need to set the menu highlighted three state style, for JS dynamic call.
/* First-level menu three style settings * *
#menu Li A.normal{background: #fff;} Normal style
#menu Li A.over{background: #00ff00;}//Tumbling style
#menu Li a.cur{background: #ff0000; color: #fff;}//Highlight style
/* Level Two menu three style settings * *
#othermenu Li A.normal{background: #fff;}/Normal style
#othermenu Li a.over{background: #AA7F00; color: #fff;}//Tumbling style
#othermenu Li a.cur{background: #7F0000; color: #fff;}//Highlight style
"Behavior Layer"
Because to control the three states of the menu in the behavior layer, so for a link tag, we do not use the hover pseudo class to achieve the three dynamic behavior of the menu, we can use onmouseover, onmouseout and onclick to imitate pseudo class of three kinds of behavior, This is good for JS dynamic adjustment. and in order to achieve the three-layer separation of behavior, style and structure, we do not have to add the dynamic Behavior control code in the HTML of a label, this is not a good production habit. So we need to do some article on the load function of the page, this need to use the OnLoad function, when the page after loading on the dynamic binding a label three behavior states.
After the page is loaded, we first get the current page URL string and then compare it against the href address of the a tag in the level one or two menu, highlighting the style of the menu item if there is one.
Detailed comments that I have in the following function one by one labeled out, here is not a detailed description. The key function code is as follows:

The following is a highlight of the current menu for program code//based on the URL address parameter or string.
function Hightlightmenu (firstmenuid,twomenuid) {
var Strurl,strhref,subnavs,strlast,strparentid,strselfid,parentid,selfid,strid;
var Navs=document.getelementbyid (firstmenuid). getElementsByTagName ("a");
If the link has no parameters, or if there is no parameter in the URL link that we want to get, the ordinal number in the array is returned
if (Location.href.indexOf ("?") ==-1) {
Strurl=location.href.substring (Location.href.lastIndexOf ("/") +1);//Get URL page name
First level menu highlighting
for (var i = 0; i < navs.length; i++) {
In Ie6,ie7, Strhref gets the full path, and the page name is obtained in IE8 and FF, and in order to be compatible, it needs to split its string
Strhref=navs[i].getattribute ("href"). Substring (Navs[i].getattribute ("href"). LastIndexOf ('/') +1);
if (strurl==strhref) {
Highlight current menu item
AddClass (Navs[i], "cur");
}
else{//if it is a different item, bind the mouse to a two-state event
(function (i) {
var obj=navs[i];
addEventHandler (obj, "mouseover", function () {overme (obj)});
addEventHandler (obj, "mouseout", function () {outme (obj)});
}) (i)
}
}
Second-level menu highlighting
if (document.getElementById (TWOMENUID)!= null) {//To determine whether there is a level two menu
It is possible that level two menu does not exist, such as the first page only a level menu, so when the menu ID exists, then ...
Subnavs = document.getElementById ("Othermenu"). getElementsByTagName (' a ');
for (var n = 0; n < subnavs.length; n++) {
Hightlight (subnavs,n,0);//Default Highlight first menu item
}
}
}
else{
If the page with parameters in the URL, then ...
Strlast = location.href.substring (Location.href.indexOf ("?") +1);
Strparentid=strlast.substring (0,strlast.indexof ("&"));
Strselfid=strlast.substring (Strlast.indexof ("&") +1);
Parentid=strparentid.substring (strparentid.indexof ("=") +1);//Get the first argument, this is the ID of the level menu
Selfid=strselfid.substring (strselfid.indexof ("=") +1);//Get the second argument, this is the ID of level two menu

First level menu highlighting
for (var i = 0; i < navs.length; i++) {
Hightlight (Navs,i,parentid);
}
Second-level menu highlighting
if (document.getElementById (TWOMENUID)!= null) {//To determine whether there is a level two menu
Subnavs = document.getElementById (twomenuid). getElementsByTagName (' a ');
for (var n = 0; n < subnavs.length; n++) {
Strid=selfid-1;
Hightlight (Subnavs,n,strid);
}
}
}
}
Highlight function
function Hightlight (elementarray,inumber,curmenuindex) {
if (Inumber = = Curmenuindex) {
AddClass (Elementarray[inumber], "cur");//Highlight current menu style
}
else {
(function (inumber) {
var obj = Elementarray[inumber];
addEventHandler (obj, "mouseover", function () {overme (obj)});//Increase the event when the mouse moves up
addEventHandler (obj, "mouseout", function () {outme (obj)});//Increase the event when the mouse is moved
}) (Inumber)
}
}

A generic, compatible highlight function was created as a result of the previous setup.

The highlighted function of this case is tested in the following browser: Ie5.5,ie6,ie7,ie8,ff3,tt,maxthon,chrome,safari4.0,opera