Tech Off Thread

3 posts

Forum Read Only

This forum has been made read only by the site admins. No new threads or comments can be added.

ul li based menu - setting css class dynamically

Back to Forum: Tech Off
  • User profile image
    mrichman

    I have the following nav menu:

    <div id="nav">

    <ul id="navlist">

    <li><a href="/" class="">Home</a></li>

    <li><a href="/foo/orders/" class="">Orders</a></li>

    <li><a href="/bar/catalogs/" class="">Catalogs</a></li>

    <li><a href="/baz/suppliers/" class="">Suppliers</a></li>

    <li><a href="/bam/storefronts/" class="current">Storefronts</a></li>

    <li><a href="/help" class="">Help</a></li>

    </ul>

    </div>

    How do I set the class of the anchor based on the current location?  Also, this should apply when browsing any subordinate pages, i.e. /foo/bar/default.aspx and /foo/bar/something.aspx should both set the current location in the nav menu.

    Thanks,

    Mark

  • User profile image
    stevo_

    You can do it a few ways, the easiest would be to write a loop that writes the html in, it will run through an array or something and if the url of that item matches the current url, itll put something like:

    <li class="Active">...

    Instead, then in your css you have

    ul.MyMenu li a:hover, ul.MyMenu li.Active a
    {
    Styles
    }

    (Thats if you want the hover style and the 'active' style to look the same...

    The alternative is to write a control that does this for you easier, using ListItem as the menu items or something (so that you don't totally recreate the wheel).

  • User profile image
    mrichman

    stevo_ wrote:
    You can do it a few ways, the easiest would be to write a loop that writes the html in, it will run through an array or something and if the url of that item matches the current url, itll put something like...


    This is such a common way to do menus these days, you'd think Microsoft would make it easy.

    Thanks,
    Mark

Conversation locked

This conversation has been locked by the site admins. No new comments can be made.