Results 1 to 3 of 3
  1. #1
    New Lounger
    Join Date
    Jan 2004
    Sanford, Maine, USA
    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 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
    Silicon Valley, USA
    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
    A Magic Forest in Deepest, Darkest Kent
    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

Posting Permissions

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