Results 1 to 3 of 3
  1. #1
    New Lounger
    Join Date
    Jan 2004
    Location
    Sanford, Maine, USA
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Conditional sub-menu visibility?

    I'm wondering if it is possible to create a navigation bar whose sub-menu items would appear based on the page that's being viewed. For example, there are 4 main rollover buttons which lead to 4 different pages. So if I clicked the 'About Us' button, the 'About Us' page would open. Easy enough. BUT, I'd like for the 2 sub-menu links to then appear below the 'About Us' button once that page is up. Two of the other menus have 3 sub-links as well, but those shouldn't appear until they're on the main page (or one of the sub-pages) for that link. I'll attach a graphic of the full navigation bar with all menu items showing so it's a bit clearer.

    So, basically, what I'd like to happen...if it's possible to do so...is for just the four main buttons to appear UNLESS we're viewing one of the pages or sub-pages. Then that section shows the main button and the sub-menu buttons beneath it while the other buttons only show the main buttons, no sub-menu items.

    Am I asking for the impossible? If so, I can re-route my thinking in how to do this, but I just thought it'd be kind of cool to do it that way. I'm working in GoLive CS2 and have set up the navigation bar as a component. I'm using the CSS Nav layout (equally-sized rows with single-box/div areas for each button and sub-menu button). That looks/works fine, I just don't know how to conditionally handle the visibility based on page view as opposed to mouse-over actions.

    Any help/suggestions would be appreciated - even if it's only to tell me to rethink my plan. Thanks.
    Attached Images Attached Images

  2. #2
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: Conditional sub-menu visibility?

    <P ID="edit" class=small>(Edited by jscher2000 on 07-Oct-06 10:22. Whoops!!)</P>I need to assume that your nav bar is part of the <code><body></code> of the document, and not external (e.g., not in an <code><iframe></code>). In that case, consider this. I've read about it, but not tried it myself.

    In the <code><body></code> tag, add an id attribute that indicates the section of the site. (Or if you can't add it there, you could try a class name on a containing <code><div></code> tag, with the associated syntax adjustments.)

    For example: <code><body id="aboutpage"></code>

    In your nav, put the individual sub-items in a container with an id attribute associated with their section of the site.

    For example: <code><div id="aboutnav"></code> or <code><ul id="aboutnav"></code>

    In your CSS, you add rules similar to the following. As noted, I haven't tested these:

    <code>#aboutpage #aboutnav {display:none}</code>

    Added: Sorry, got that backwards, didn't I?

    The CSS rules should have <code>display:none</code> as the default for detail submenus and <code>display:block</code> for the specially applicable submenu to be displayed.

  3. #3
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: Conditional sub-menu visibility?

    Hi again

    Jeff's idea is the simplest and most effective way of doing this without javascript. This is on of the "extra" lessons I teach at college and is a useful tool. Sadly you can't have my notes but will be happy to assist if you have the code available and I will adapt part of it so that you can develop the rest
    Jerry

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •