Results 1 to 5 of 5
  1. #1

    Help with Horizontal Menus - Tutorials?

    Hey guys,

    You are always such a great help when I get stuck on things like this.

    I am trying to use this navigation bar:

    and when you click on a main navigation link (ie home, services) IF the main navigation has a sub navigation, it will pop up on the bottom (where personal training group training workout consultation online consultation are located now).

    I believe this would require javascript but I know nothing about it except to make small modifications. I have looked at the Yahoo UI but there is so muc more in there I don't need, I don't even know where to start!

    Please does anyone have any suggestions at all?


  2. #2
    Join Date
    Aug 2006
    You can do it without JS. Just consider it as two menus. If the upper level menu doesn't have sub nav items there is just the blank gray bar. If it does then selecting an upper level displays the sub in the gray bar.

  3. #3
    Join Date
    Feb 2006
    top: 50px; left: 200px;
    This particular menu is done with pure css using a primary style for the top links and a secondary style for the subs, each link that is clicked is given the style 'active' which shows its particular sub menus if any.
    Basically to make it work with css you need a html page for each link so therefore the home link page 'home.html' would have the home link class as 'active' and would have its sub-menus in the code, all other links on that page would not have that class and would not have any sub-menus on that page. Services would have the same 'services.html' but it would be services link that would be active and have the subs and not home...?
    I hope that this is making sense...
    BTW it could also be achieved with js, this would also be able to take advantage of the onmouseover attribute and change the links and subs onmouseover rather then requiring the click. - Image Hosting -

  4. #4
    Join Date
    Aug 2006

    an example

    Here is a simplistic example... using body id and classes...
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "">
    <html lang="en-US">
    <title>Horizontal 2 level menu</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    body {
     font:76% arial, verdana, helvetica, sans-serif;}
    * { margin:0; padding:0;}
    #wrapper {width:764px; margin:0 auto;}
    /* NAVIGATION */
    /*Main */
    ul#nav {width:764px; height:20px; margin-top:20px;}
    ul#nav li {list-style-type:none; float:left; background:#fff; padding-right:5px;}
    ul#nav li a {color:#333; padding:0 5px; border:1px solid #ccc; border-bottom:0 none;
     text-decoration:none; letter-spacing:1px; background:#e8e8e8;
     line-height:20px; vertical-align:middle; display:block;}
    ul#nav li a:hover {background:#f1f1ed; color:red}
    /*Main current page highlight*/
    body#home a#homenav,
    body#graphics a#grfxnav
    {background:#c3c3c3; cursor:text; color:#333; font-weight:bold;}
    /*Sub Main*/
    ul#nav_sub {width:764px; height:20px; background:#c3c3c3; clear:left;}
    ul#nav_sub li {list-style-type:none; float:left;}
    ul#nav_sub li a {padding:0 20px; font-size:90%; color:#666; border-right:1px dashed #fff;
     text-decoration:none; letter-spacing:1px; font-weight:bold; line-height:20px; vertical-align:middle;}
    ul#nav_sub li a:hover {color:#333;}
    /*Main current page highlight*/
    body.example #nav_sub a.example
    {color:#c6c6c6; cursor:text;} 
    <body id="home">
    <div id="wrapper">
    <ul id="nav">
    <li><a href="0.htm" id="homenav">home</a></li>
    <li><a href="1.htm">services</a></li>
    <li><a href="2.htm">about us</a></li>
    <li><a href="3.htm">contact us</a></li>
    <ul id="nav_sub">
    <li><a href="1a.htm" class="example">personal training</a></li>
    <li><a href="2a.htm">group training</a></li>
    <li><a href="3a.htm">workout consultation</a></li>
    <li><a href="4a.htm">online consultation</a></li>

  5. #5
    Thanks for the help thus far guys!

Posting Permissions

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