The menu highlighting effect is a design method often used in every web page. It can effectively let users know the column they are currently in. This is also the method I often use. Generally, web pages have at least two levels of menus. The first is the general navigation bar menu at the top, and the other is the category navigation menu on the left. It is generally required that the current status can also be recorded in the second-level menu when the first-level menu is highlighted.
If the header area containing the top menu is fixed, that is, it does not need to be reloaded every time, in this case it can be easily implemented using pure CSS or JS, but today I am not going to talk about this. , What we are talking about today is that the first-level menu and the second-level menu are dynamically loaded in each page , that is, they are loaded as user controls. In this case, it is difficult to record the highlighted status of the menu.
Of course, you may say that you can use cookies to record the last highlighted state recorded when each page is loaded. Yes, it can indeed be recorded, but this method will cause problems in some complex applications containing many sub-pages. It causes a lot of confusion and trouble to users. For example, during the cookie life cycle, when the project is reopened, the cookie life cycle has not completely ended. It also records the last saved state, and the page address has changed at this time, so the currently highlighted menu The page pointed to is not what the user wants to see. Practice has proven that no matter how long you set the life cycle of this cookie, it cannot perfectly solve the problem of users maliciously refreshing the page. This is indeed a bad thing!
So is there a better way to solve this situation?
The answer is yes. We know that the most ideal way to solve this problem is to explicitly set the highlight style of the current menu according to the URL address of the page when each page is loaded . This perfectly solves this type of problem, and in this way, no matter how maliciously the user clicks the refresh button, the highlighted state remains unchanged. Once you know the principle, it will be much easier to implement.
structural layer
First-level menu structure layer:
<ul id="menu">
<li><a href="default.html">Home</a></li>
<li><a href="clothing.html">Clothing supplies</a></li>
<li><a href="house.html">Home Furnishings</a></li>
<li><a href="cosmetic.html">Cosmetics</a></li>
</ul>
It can be seen that in this first-level menu, the link address generally has no parameter value. The structural layer of the secondary 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">Bedding Set</a></li>
<li><a href="house.html?pId=2&sId=5">Wedding bedding</a></li>
<li><a href="house.html?pId=2&sId=6">Children’s bedding</a></li>
<li><a href="house.html?pId=2&sId=7">Craft decorations</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>
Different from the first-level menu, we add two parameter values to the link address in the second-level menu. The pId parameter points to the serial number of the top first-level menu, and sId is the sequence number of the menu itself. We set two different IDs for the total container ul of these two menus. They need to be called in JS, so they must not be missing.
style layer
Regarding the style, there is actually nothing special about it. You can set it to the style you want. The only thing that needs to be noted is that we need to set the three status styles of the menu highlight separately for dynamic call by JS.
/*Three style settings for the first-level menu*/
#menu li a.normal{background:#fff;}//Normal style
#menu li a.over{background:#00ff00;} //Rolling style
#menu li a.cur{background:#ff0000;color:#fff;} //Highlight style
/*Three style settings for the secondary menu*/
#othermenu li a.normal{background:#fff;} //Normal style
#othermenu li a.over{background:#AA7F00;color:#fff;} //Rolling style
#othermenu li a.cur{background:#7F0000;color:#fff;} //Highlight style