CSS Menu in a .Net Master Page

Andrew Fenster

The text of this article is not in this database — only its details are. The old site it was published on is gone, but the Internet Archive kept a copy: CSS Menu in a .Net Master Page

.NET CSSCSS MenuCSS Menu in a .Net Master Page.Net Master Page

11 Comments

Join the conversation! Your thoughts help the community grow.

Andrew Moskal14y ago
I have got this to work perfectly without using the jquery. My question now is I have to add a nested Master and I cannot get it work with the nested (or the pages within the nested). Any clues?
ketan shaha14y ago
c
ketan shaha14y ago
c
sathesh R15y ago
the above code is not working in fire fox
vaibhav fegade15y ago
when I click on CssMenu.zip it gives following error XML Parsing Error: no element found Location: http://www.c-sharpcorner.com/uploadfile/afenster/3737/Default.aspx Line Number 1, Column 1: Please help me....
Allison Szasz15y agoedited
I am also not getting this to work. I ended up downloading the sample file and commented out the j-query so I could see how the javascript was working, only it didn't work at all with the sample file. The tabs didn't show a current state. I think there must be a discrepancy somewhere...
- Andrew Fenster15y ago
  I just downloaded the sample project and ran it again. I ran it using the jQuery code. I ran it using the regular JavaScript code. The code looks fine. It worked perfectly. All I can suggest is that you try again. Download the project and run it without modifying anything. I'm sorry you're having problems.
Andrew Fenster15y agoedited
I'm sorry you're having trouble. One thing I notice in your comment is that the div ID is "menu." The CSS in the sample project is looking for a div ID of "ddcolortabs." So you need to either modify the CSS or change the ID of the div. You should download and look at the sample project, which contains a working example. The JavaScript gets linked in on the master page like this: <head id="Head1" runat="server"> <title>CSS Menu Example</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script src="<%# Page.ResolveUrl("~/Scripts/menu.js")%>" type="text/javascript"></script> </head> You also need to make sure your content pages are set up right. So your Contact.aspx page should have this: <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder_Menu" runat="server"> <span id="tabid" style="display: none">Contact</span> </asp:Content> This is used to specify which tab (which list item) gets set active. In this case, it's the Contact tab.
- Andrew Fenster15y ago
  One other thing. The CSS is looking for a tab with a class called "current" not "active." So you need to either modify the CSS or your JavaScript. In short, the code displayed in the article and the CSS in the sample project are not exactly the same. The article uses a div called "menu" and an active tab class called "active." The CSS in the sample project requires a div called "ddcolortabs" and an active tab class called "current." So I'm sorry for the confusion. You should try out the sample project, which works just fine.
- Ben Johnson15y ago
  Yes I noticed these things, I think I may just need to make a few more ammendments. I keep you updated, thank you
Ben Johnson15y agoedited
I have followed each of your steps but have no luck getting it no work. Nothing seems to happen. My list is as follows <div id="menu"> <ul> <li id="Home"><a href="index.aspx"><span>Home</span></a></li> <li id="Quotes"><a href="Quotes.aspx"><span>Quotes</span></a></li> <li id="Contact"><a href="<%= Page.ResolveUrl("~/Contact.aspx")%>"><span>Contact</span></a></li> </ul> </div> And Javascript <script type="text/javascript" language="javascript"> function setActiveMenu() { var control = document.getElementById('tabid'); var menuid = control.innerText; var menu = document.getElementById(menuid); menu.classname = 'active'; } window.onlaod = setActiveMenu; </script> Where do you place your java script in the masterpage? Hope you can help, thanks