Looking for a simple collapsible/expandable menu

Discussion in 'HTML' started by ste, May 13, 2006.

  1. ste

    ste Guest

    Hi there,

    I'm wondering if anyone can point me in the direction of a simple vertical
    menu that has collapsible/expandable menu options?

    I don't want any fancy graphics or anything, and the simpler this is the
    better (i.e. so that I can use and maintain it!). If at all possible, I'd
    rather use something which doesn't require JavaScript, so this would leave
    me with CSS menus?

    Here's the format of menu I'm after, just some very simple text hyperlinks:

    Home
    About
    Gallery
    Contact

    If you click Gallery, for example, I want the following hyperlinks to
    appear:

    Home
    About
    Gallery
    - Landscapes
    - Portraits
    - Macro
    Contact

    If you click Gallery again, then I'd like those options to disappear.
    Likewise for the other main menus.

    At the moment, I'm using a normal HTML list menu which has all links
    visible. Of course, this looks quite cluttered and scruffy, which is why
    I'm looking for this alternative solution.

    I appreciate any advice.

    Thanks,

    Ste
    ste, May 13, 2006
    #1
    1. Advertising

  2. ste wrote:
    > Hi there,
    >
    > I'm wondering if anyone can point me in the direction of a simple vertical
    > menu that has collapsible/expandable menu options?
    >
    > I don't want any fancy graphics or anything, and the simpler this is the
    > better (i.e. so that I can use and maintain it!). If at all possible, I'd
    > rather use something which doesn't require JavaScript, so this would leave
    > me with CSS menus?
    >
    > Here's the format of menu I'm after, just some very simple text hyperlinks:
    >
    > Home
    > About
    > Gallery
    > Contact
    >
    > If you click Gallery, for example, I want the following hyperlinks to
    > appear:
    >
    > Home
    > About
    > Gallery
    > - Landscapes
    > - Portraits
    > - Macro
    > Contact
    >
    > If you click Gallery again, then I'd like those options to disappear.
    > Likewise for the other main menus.
    >
    > At the moment, I'm using a normal HTML list menu which has all links
    > visible. Of course, this looks quite cluttered and scruffy, which is why
    > I'm looking for this alternative solution.
    >
    > I appreciate any advice.

    You mean like this
    http://www.alistapart.com/d/horizdropdowns/horizontal.htm
    --
    Edwin van der Vaart
    http://www.semi-conductor.nl/ Links to Semiconductors sites
    http://www.evandervaart.nl/ Edwin's persoonlijke web site
    Explicitly no permission given to Forum4Designers, onlinemarketingtoday,
    24help.info, issociate.de and software-help1.org to duplicate this post.
    Edwin van der Vaart, May 13, 2006
    #2
    1. Advertising

  3. ste

    Toby Inkster Guest

    Toby Inkster, May 13, 2006
    #3
  4. ste

    ste Guest

    "Edwin van der Vaart" <> wrote in message
    news:cEr9g.203$YI3.46@amstwist00...
    > ste wrote:
    >> Hi there,
    >>
    >> I'm wondering if anyone can point me in the direction of a simple
    >> vertical menu that has collapsible/expandable menu options?
    >>
    >> I don't want any fancy graphics or anything, and the simpler this is the
    >> better (i.e. so that I can use and maintain it!). If at all possible,
    >> I'd rather use something which doesn't require JavaScript, so this would
    >> leave me with CSS menus?
    >>
    >> Here's the format of menu I'm after, just some very simple text
    >> hyperlinks:
    >>
    >> Home
    >> About
    >> Gallery
    >> Contact
    >>
    >> If you click Gallery, for example, I want the following hyperlinks to
    >> appear:
    >>
    >> Home
    >> About
    >> Gallery
    >> - Landscapes
    >> - Portraits
    >> - Macro
    >> Contact
    >>
    >> If you click Gallery again, then I'd like those options to disappear.
    >> Likewise for the other main menus.
    >>
    >> At the moment, I'm using a normal HTML list menu which has all links
    >> visible. Of course, this looks quite cluttered and scruffy, which is why
    >> I'm looking for this alternative solution.
    >>
    >> I appreciate any advice.

    > You mean like this
    > http://www.alistapart.com/d/horizdropdowns/horizontal.htm
    > --
    > Edwin van der Vaart
    > http://www.semi-conductor.nl/ Links to Semiconductors sites
    > http://www.evandervaart.nl/ Edwin's persoonlijke web site
    > Explicitly no permission given to Forum4Designers, onlinemarketingtoday,
    > 24help.info, issociate.de and software-help1.org to duplicate this post.


    Hi there,

    I was actually after something even simpler than that, i.e. without the
    'popouts' and without the border around the links, but thanks anyway.

    Ste
    ste, May 14, 2006
    #4
  5. ste

    ste Guest

    "Toby Inkster" <> wrote in message
    news:5n.co.uk...
    > ste wrote:
    >
    >> I'm wondering if anyone can point me in the direction of a simple
    >> vertical
    >> menu that has collapsible/expandable menu options?

    >
    > http://examples.tobyinkster.co.uk/menu/menu2
    >
    > --
    > Toby A Inkster BSc (Hons) ARCS
    > Contact Me ~ http://tobyinkster.co.uk/contact



    Hi there,

    That's how I want it to work, but wonder if you have an even simpler example
    that was just text on it's own, i.e. without the border around the link or
    the plus/minus signs?

    The code does look very nice and clean though.

    Thanks,

    Ste
    ste, May 14, 2006
    #5
  6. ste

    dorayme Guest

    In article <44667237$0$8340$>,
    "ste" <> wrote:

    > "Toby Inkster" <> wrote in message
    > news:5n.co.uk...
    > > ste wrote:
    > >
    > >> I'm wondering if anyone can point me in the direction of a simple
    > >> vertical
    > >> menu that has collapsible/expandable menu options?

    > >
    > > http://examples.tobyinkster.co.uk/menu/menu2
    > >
    > > --
    > > Toby A Inkster BSc (Hons) ARCS
    > > Contact Me ~ http://tobyinkster.co.uk/contact

    >
    >
    > Hi there,
    >
    > That's how I want it to work, but wonder if you have an even simpler example
    > that was just text on it's own, i.e. without the border around the link or
    > the plus/minus signs?


    What is stopping you? You can dispense with the img signs and
    choose white or transparent for colours.

    Yes, TI's nicely conserves space and it is easier to allow for
    vertical in a menu nav bar.

    But let me add a word on this stuff:

    Think if it is really all that useful to have so much of the
    navigation right there and then. Quite often, if it is so much
    more than what is reasonable to simply display (certainly OP's
    first example of about 4 links and one expansion of about 4 more
    was not a case for drop downing), consider just not having the
    expansion at all. If some one wants to know what that link is
    about, it is simple enough. It is a link and goes somewhere. That
    is where the "expansion" is evident.

    Yes, I know it may seem as if one is so much neater and useful
    than the other. But mostly it is more show than useful:

    When the links are displayed in a page that is nothing really to
    do with the meaning of the set displayed, they are less useful. A
    home page simply can't have everything on it and it is a mistake
    to try. When do you stop? The same set is instantly meaningful
    displayed up front on the page that is especially relevant to the
    set - a local set of links.

    Everything depends on everything else. If you make your pages
    load fast as you should, going to it rather than fiddling (and
    yes, I mean fiddling... one has to put energy into holding the
    mouse still when in a hurry) with hover is as quick.

    This way of thinking might then free you from even needing js or
    possibly cross browser challenged hover dropdown css

    --
    dorayme
    dorayme, May 14, 2006
    #6
  7. ste

    Greg N. Guest

    dorayme wrote:

    > Think if it is really all that useful to have so much of the
    > navigation right there and then.


    You're right for the majority of sites.

    Yet I find "complete" menus (either simple or with drop down expansion)
    convenient on sites that I visit frequently. On these sites, I prefer
    not to plough through a series of pages to get where I need to go.

    --
    Gregor mit dem Motorrad auf Reisen:
    http://hothaus.de/greg-tour/
    Greg N., May 14, 2006
    #7
  8. ste

    Toby Inkster Guest

    ste wrote:

    > The code does look very nice and clean though.


    I've actually got a much cleaner version knocking around somewhere. I'll
    have a look for it and post it soon.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, May 14, 2006
    #8
  9. ste

    KiwiBrian Guest

    Yes please. I loved the first one and would love to see the next one too.
    Thanks
    Brian Tozer

    "Toby Inkster" <> wrote in message
    news:5n.co.uk...
    > ste wrote:
    >
    >> The code does look very nice and clean though.

    >
    > I've actually got a much cleaner version knocking around somewhere. I'll
    > have a look for it and post it soon.
    >
    > --
    > Toby A Inkster BSc (Hons) ARCS
    > Contact Me ~ http://tobyinkster.co.uk/contact
    >
    KiwiBrian, May 15, 2006
    #9
  10. ste

    dorayme Guest

    In article <e471vd$orr$>,
    "Greg N." <> wrote:

    > dorayme wrote:
    >
    > > Think if it is really all that useful to have so much of the
    > > navigation right there and then.

    >
    > You're right for the majority of sites.
    >
    > Yet I find "complete" menus (either simple or with drop down expansion)
    > convenient on sites that I visit frequently. On these sites, I prefer
    > not to plough through a series of pages to get where I need to go.
    >
    > --
    > Gregor mit dem Motorrad auf Reisen:
    > http://hothaus.de/greg-tour/


    And yes, it is understandable that you find such convenient.
    There is some tension between designing for newcomers and
    designing for frequent visitors. We all wrestle with this one!

    There is no general answer to this. What is very convenient for
    the one, can confuse and delay others. Newcomers can simply get
    caught up in these menus and be puzzled or confused. They can try
    to satisfy cursory curiosities, go direct to something 3 or 4
    deep and then get lost no matter the breadcrumb trail
    (breadcrumbs are not magic keys to appreciation when you don't
    know your way about; but better than not having them). They would
    better appreciate what is what by the slower more logical route.
    The big problem for newcomers boils down to the links not having
    a lot of meaning unless the context is understood.

    So, first thing to do especially with dropdowns is give as much
    meaning as possible to what the link is about. Choice of words is
    important. But then again, the tension surfaces: the idea of the
    dropdown is for neatness and space conservation. If the link text
    is meaningful at the cost of being less than very brief, it
    tramples on the raison d'tre for the dropdown.

    --
    dorayme
    dorayme, May 15, 2006
    #10
  11. ste

    Toby Inkster Guest

    KiwiBrian wrote:

    > Yes please. I loved the first one and would love to see the next one too.
    > Thanks


    All the code in one file:

    http://examples.tobyinkster.co.uk/menu/menu3.strict

    This has several advantages over the previous menu:

    1. It allows the user to expand several submenus at once.

    2. It uses cookies to remember which menus are expanded; so
    if the user surfs off to another page and comes back, the menu
    is still open where they left it; or if the menu appears on
    multiple pages, navigation remains consistant throughout the site.

    3. It removes all the horrible class and onclick attributes
    scattered throughout the code.

    Of course, in real life you don't want to have all that CSS and Javascript
    embedded into your HTML file like that -- you want to save them into
    external CSS and JS files, like this:

    http://examples.tobyinkster.co.uk/menu/menu4

    There is still possible room for improvement -- the Javascript could do
    with being cleaned up a little for instance; and there is no provision for
    an extra level of nested lists.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, May 15, 2006
    #11
  12. ste

    nobbiesp

    Joined:
    Jul 5, 2010
    Messages:
    1
    Additional Level

    This URL /menu/menu4 is exactly the code I've been looking for. Thank you so much for sharing it.

    For the page I'm working on I am trying to apply an additional level of navigation. Could you tell me how I would go about doing that?

    Home
    About
    Gallery
    - Landscapes
    - Portraits
    - - 2000
    - - 2001
    - Macro
    Contact

    Also, how would I go about setting the font to Arial. Sorry for the stupid question.

    Thank you.


    nobbiesp, Jul 5, 2010
    #12
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Nico Schuyt

    Expandable menu

    Nico Schuyt, Jan 9, 2004, in forum: HTML
    Replies:
    2
    Views:
    2,375
    Nico Schuyt
    Jan 10, 2004
  2. Jonathan
    Replies:
    5
    Views:
    653
    BootNic
    Jan 6, 2007
  3. Nospam
    Replies:
    1
    Views:
    494
    Neredbojias
    Mar 26, 2007
  4. madhur
    Replies:
    0
    Views:
    382
    madhur
    May 20, 2007
  5. Mark B
    Replies:
    0
    Views:
    299
    Mark B
    Feb 2, 2009
Loading...

Share This Page