tabbed menu on masterpage with css RRS feed

  • Question

  • User1196708524 posted

    I've been trying to figure out how to produce a tabbed menu for my site. I was unable to produce the tabs using the menu control. I looked at the ASP.NET 2.0 CSS Friendly Adapters, but I'm concerned with using the menu adapter there because it appears new development on that package has moved to Google, but nothing has been released on Google's site, plus I couldn't figure out how to get all of the appropriate CSS onto the menu items using the adapter.

    I found exactly what I wanted from Dynamic Drive's style library. It's a menu system called ubercolortabs and uses only HTML and CSS. I was able to choose my own colors and lay everything out exactly as desired.

    The code in my master page that produces the menu is:

    <div class="ubercolortabs">
        <ul id="menuList">
            <li class="selected"><a href="Default.aspx" style="margin-left: 12px"><span>Home</span></a></li>
            <li><a href="Products.aspx"><span>Products</span></a></li>
            <li><a href="Support.aspx"><span>Support</span></a></li>
            <li><a href="Contact.aspx"><span>Contact</span></a></li>	
            <li><a href="About.aspx"><span>About Us</span></a></li>
            <li><a href="https://app.myeio.com/app/" style="margin-left: 20px"><span>Client Login</span></a></li>

    The CSS generates rounded corner tabs with the <li> text automatically centered within each tab. It also causes the background color of a tab that is hovered over to change to the same color that is used for the "selected" list item (in the code above, the first item is "selected" simply by setting the class to "selected" - the css uses that class to change the background color on that tab).

    When a user clicks on one of the tabs, the appropriate page will load. At that point, I want the selected menu tab to change from the default "Home" tab to the selected tab, but because I placed the menu code within a master page, the menu doesn't change. Is there a way to set the class of the selected menu <li> item on the masterpage from a content page?

    In other words, when a user clicks on "Products", the products page will be displayed but the menu should be changed so that "class=selected" in on the Products tab instead of the Home tab. The code above is obviously hard-coded to always show the "Home" tab as selected.

    Alternatively, is there another way to produce a rounded-corner tabbed menu using the menu control? I'd really prefer to use ASP.NET code to produce this site, but the site owner insisted on tabbed menus (with rounded-corner tabs).

    Wednesday, February 25, 2009 6:26 PM


All replies

  • User1747761241 posted

    Are you open to considering other menu rendering techniques.  Very simila to my menu.  I just went out of the box and created a jquery jqdock menu in a couple lines of code.  http://www.gosylvester.com/blog.aspx?id=28  also you want to read how I gave it a more friendly load.  http://www.gosylvester.com/blog.aspx?id=30  You can easily see the source by selecting view source on most of the pages in my website.  www.gosylvester.com



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, February 28, 2009 2:23 PM
  • User1196708524 posted

    I gave up on the tabs.

    I had always wanted to use the built-in asp.net menu controls, but since they generate tables instead of unordered lists (which is what most all of the CSS-based menus use, at least the ones I've found) I had to give up on tabs.

    What I came up with just using CSS and the asp.net menu control really ended up looking nice. I'm pretty happy with it.

    Your menu was a little too "lively" for what I needed, though I liked some of the things I saw on your site. I'll check it out in more detail later.

    Sunday, March 15, 2009 7:01 AM