Results 1 to 2 of 2
  1. #1
    5 Star Lounger jujuraf's Avatar
    Join Date
    Jun 2001
    Location
    San Jose, California, USA
    Posts
    1,061
    Thanks
    0
    Thanked 0 Times in 0 Posts

    menu design options

    I volunteered to re-design the web site of a local non-profit agency. <img src=/S/crazy.gif border=0 alt=crazy width=15 height=15> I was asked to have a menu system such that a set of major categories are shown across the top going left to right. When one of these categories is clicked, a secondary menu appears on the left side of the page. These sub-categories are listed vertically. What's the best way to do this? I don't personally like this layout but I'm keeping quiet for the moment. <img src=/S/angel.gif border=0 alt=angel width=15 height=21>

    As an example, here I show four major categories (that are always visible) across the top. If the user clicks categoryB, a set of sub-menus for this category magically appear vertically on the left side of the page. It is this left side navigation that contains the links to other pages on the site.
    <pre> CategoryA CategoryB CategoryC CategoryD

    B1
    B1a
    B2b
    B2
    B3
    B3a
    B3b</pre>

    I don't want to use frames, I hate them. What choices do I have to implement this? I know HTML just fine, but no whiz at the other things, CSS, DHTML, etc.

    Thnx, Deb

  2. #2
    Silver Lounger
    Join Date
    Jan 2001
    Location
    Northern, California, USA
    Posts
    1,886
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: menu design options

    I think i'd use dhtml layers to handle this. I have a sample on a site I did a while back, here. Note that the menu up top is a little skewed because the layer positions are absolute, and the banner up top is throwing the whole thing off.

    The idea is to change the content of your layers based on certain events. It uses a series of javascript functions to change the 'view' of the layers to display whatever you want. (in reality, the menu is calling two different layers that contain individual menu items.)

    To further understand layers, and how they might help you in your quest for this type of menu system, check out some of these DHTML resources:

    http://hotwired.lycos.com/webmonkey/author.../tutorial1.html
    http://www.dhtmlcentral.com/

    Note, you can 'cheat' by downloading one of the many free menu systems out there, for me, I couldn't find exactly what I was looking for, so I built my own.

    HTH
    <IMG SRC=http://www.wopr.com/w3tuserpics/Kel_sig.gif>
    Moderator:<font color=448800> Pix Place, Internet Explorer</font color=448800>
    <small>www.kvisions.com

Posting Permissions

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