Simple menu currently selected Solution

Navigation or menus are indispensable for any website. To help users clearly know where they are, the "breadcrumb" path is often used. However, the selected style of the current menu is also frequently used.

For example, we often use this style of Google Music :.

For a menu like this, basically every page will appear. We will certainly make a control to reference it or put it in the master page, so that the selected problem will occur. Haha, of course, there are also a variety of implementation methods. Now let's talk about two simple solutions that are implemented through Js.

1. Let the page itself be selected

This method allows each menu item to be called by JS on the page. The basic method is as follows:Add an ID for each item of the menu, write a js method, get the menu item in the selected status, and dynamically Add the style.It is very simple, but every page needs to call this JS and input the corresponding parameters. Of course, you can also implement it in the control referenced by all pages under a menu item, however, if there are many menus, there will be maintenance issues.

2. Set the menu item to be selected.

This method is simpler and more convenient than the one above.

HTML code:

<Ul id = "ul_leftmenu"> <li colhref = "page1.aspx, page1_update.aspx "> <a href =" page1.aspx "> menu 1 </a> </LI> <li colhref =" page2.aspx, page2_update.aspx "> <a href =" page2.aspx "> menu 2 </a> </LI> <li colhref =" page3.aspx, page3_update.aspx, page3_show2.aspx "> <a href =" page3.aspx "> menu 3 </a> </LI> </ul>

This is the page code. Here, colhref is a custom attribute. you can name it as needed. The basic Dom and jquery can easily get the value of this attribute. Of course, its value means: when you open the page containing this value, this item is selected. That is to say, you need to add the page path under this menu item to this custom attribute.

With this attribute, implementation is quite simple,

JS Code:

Function selectcurrentmenu (ulmenuid) {var currentpage = location. pathname; // obtain the current page path var currentpagename = currentpage. substring (currentpage. lastindexof ("/") + 1); // obtain the current file name var limenus = $ ("#" + ulmenuid ). children (); // obtain all menu items // traverse, match, and select if (limenus! = NULL & limenus. length> 0) {for (VAR I = 0; I <limenus. length; I ++) {if ($ (limenus [I]). ATTR ("colhref "). indexof (currentpagename)> = 0) {$ (limenus [I]). ATTR ("class", "li_current"); break ;}}}}

Then, call this js method during page load and input the menu ID.

OK. You only need to perform operations on the menu control to select all menus. This is much simpler than the first one, and is especially suitable for later maintenance. You can only achieve the selected results when there are a lot of pages. This method is no better choice. However, if there are too many pages under a selected menu, the custom attribute will have a long value, which looks a bit ugly, but the implementation function is absolutely no problem. Haha...

Conclusion: if there are few menu items, we recommend the first option. You can place the selected control items in the public area. If you want to add this effect to your website later, or you have more menu items, there are not too many pages under each menu item, and the second is perfect.