Dual menus? horizontal and vertical?

5 replies
  • WEB DESIGN
  • |
Anyone know how to do this in CSS?
I want a horizontal menu for the top of my site for
privacy policy, contact us, about us, etc etc (i can do this)

On the side I want a vertical menu that I will use for Interlinking My site pages (Silo Structure etc) ( I know how to do this also)

Dual Menus? I dont know how to do

When I search Dual menus its very sketchy on google
you can easily find either a horizontal menu or a vertical menu with CSS etc but finding instructions to do both on one page, I have not found

probably something simple
#dual #horizontal #menus #vertical
  • Listamatic: one list, many options - Using CSS and a simple list to create radically different list options

    Two lists. Have one be ID'd one way, have the other with a different ID, and style them differently. If you're doing this within a wordpress or other skin, it's possible to do there too. Yell if you need help.
    {{ DiscussionBoard.errors[5304272].message }}
  • Profile picture of the author outwest
    yes this will NOT be in wordpress
    I am silo structuring the site and that is almost impossible in WP unless you are wayyyyy more of a programmer than 99 percent of webmasters

    i would rather hand code it myself in html

    can you give an example of the header instructions for two different Ids?
    I have no problem when its style.css for the CSS , and I just copy the css code put it in a file named that and upload it. then I put the header instructions with that file in it. how do you change the header instructions for two files? and how do you differentiate the two menus in the html?

    usually I just have one menu and one header instruction for the css so its easy
    Signature
    Tech article writing .Native English Speaker(with Proof)
    specializing in SmartPhones , Internet security, high tech gadgets, search engines, tech shows, digital cameras.

    {{ DiscussionBoard.errors[5304314].message }}
  • Profile picture of the author outwest
    What about doing a 2 Column layout with CSS? not sure if that is difficult in html page

    mostly have dealt with simple html layouts or just picked wordpress and done themes
    Signature
    Tech article writing .Native English Speaker(with Proof)
    specializing in SmartPhones , Internet security, high tech gadgets, search engines, tech shows, digital cameras.

    {{ DiscussionBoard.errors[5305012].message }}
  • Profile picture of the author puedall
    Hi,
    When you style to different menus, you will need to different folders and you have to name them differently..
    For example: Name one horizontal menu and second vertical menu. Or just menu 1 and menu 2. It really is, just for your reference.
    But if you past your menu in Html make sure to point them to correct names files...
    It is simple..Hope this helps and hope I explained it well enough..
    {{ DiscussionBoard.errors[5617436].message }}
  • Profile picture of the author Istvan Horvath
    What is soooo complicated? (after you said twice "I can do it"...)

    HTML
    <div id="topmenu">
    <ul id="toplist">
    <li class="boo">menuitem+link+whatever</li>
    <li class="boo">menuitem+link+whatever</li>
    <li class="boo">menuitem+link+whatever</li>
    <li class="boo">menuitem+link+whatever</li>
    </ul>
    </div>
    ....
    ....
    <div id="leftmenu">
    <ul id="leftlist">
    <li class="moo">menuitem+link+whatever</li>
    <li class="moo">menuitem+link+whatever</li>
    <li class="moo">menuitem+link+whatever</li>
    <li class="moo">menuitem+link+whatever</li>
    </ul>
    </div>

    And it has NOTHING to do with "header instructions" (that doesn't make sense, anyway...)

    You have ONE single stylesheet - you can name it whatever, e.g.
    my-bs-style.css

    In it define the IDs and classes for all your html (Note: An ID can be used only once, classes can be used many times!):

    CSS
    #topmenu {...}
    #toplist {...}
    #leftmenu {...}
    #leftlist {...}
    .boo {...}
    .moo {...}

    Just for the record: it can be done BOTH in WordPress and/or hand-coded HTML sites.
    Signature

    {{ DiscussionBoard.errors[5619685].message }}

Trending Topics