#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    4
    Rep Power
    0

    horizontal css/javasctip menu Q.


    Hi,

    I have a horizontal menu, now what I would like to know how to do, is that once one of the element has focus, I would have another row underneath it that would have my links

    link1 | link2 | link3, etc...

    here is my menu bar, any info, or ideas would be great

    <html>
    <head>
    <style type="text/css">
    .navh LI {
    DISPLAY: inline; LIST-STYLE-TYPE: none
    }
    .navh UL {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; WHITE-SPACE: nowrap
    }
    .navh A {
    border:1px solid #333333; PADDING-RIGHT: 8px; PADDING-LEFT: 24px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px; BACKGROUND-COLOR: #999999
    }
    .navh A:link {
    COLOR: #eeeeee; TEXT-DECORATION: none
    }
    .navh A:visited {
    COLOR: #eeeeee; TEXT-DECORATION: none
    }
    .navh A:hover {
    border:1px solid #333333; COLOR: #333333; BACKGROUND-COLOR: #ff6600
    }
    </style>
    </head>

    <body>
    <div class="navh">
    <ul>
    <li><a href="#" >Item 1</a></li>
    <li><a href="#" >Item 2</a></li>
    <li><a href="#" >Item 3</a></li>
    </ul>
    </div>

    </body>
    </html>
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    Ireland
    Posts
    73
    Rep Power
    11
    Hi, I hope this helps. It uses tables instead of lists, but achieves pretty much the same

    effect.

    <html>

    <head>
    <style type="text/css">
    td.table {
    width: 100px;
    background: cccccc;
    }
    table.menu {
    visibility: hidden;
    position: absolute;
    background: cccccc;
    border-width: 2px;
    border-style: solid;
    border-color: 000000;
    border-collapse: collapse;
    }
    </style>
    <script type="text/javascript">
    function showmenu(elmnt) {
    document.all(elmnt).style.visibility="visible"
    }
    function hidemenu(elmnt) {
    document.all(elmnt).style.visibility="hidden"
    }
    </script>
    </head>

    <body>
    <table>
    <tr>
    <td class="table" onmouseover="showmenu('Item 1')" onmouseout="hidemenu('Item 1')">Item

    1<br>
    <table class="menu" id="Item 1">
    <tr><td class="menu"><a href="link#1.html">Link 1</a></td>
    <td class="menu"><a href="link#2.html">Link 2</a></td></tr>
    </table>
    </td>
    <td class="table" onmouseover="showmenu('Item 2')" onmouseout="hidemenu('Item 2')">Item

    2<br>
    <table class="menu" id="Item 2">
    <tr><td class="menu"><a href="link#1.html">Link 1</a></td>
    <td class="menu"><a href="link#2.html">Link 2</a></td></tr>
    </table>
    </td>
    <td class="table" onmouseover="showmenu('Item 3')" onmouseout="hidemenu('Item 3')">Item

    3<br>
    <table class="menu" id="Item 3">
    <tr><td class="menu"><a href="link#1.html">Link 1</a></td>
    <td class="menu"><a href="link#2.html">Link 2</a></td></tr>
    </table>
    </td>
    </tr>
    </table>
    </body>

    </html>
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    4
    Rep Power
    0
    The example is great... but I know this is probably a stupid question, but if you add more than 2 links.. the whole alignment gets messed up?

    Why is that?
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    Ireland
    Posts
    73
    Rep Power
    11
    You simply need to add the following to the 'table.menu' part of the style section - 'width:500px;' - or whatever number of px you need.
    Last edited by dslc1000; February 21st, 2004 at 04:56 PM.

IMN logo majestic logo threadwatch logo seochat tools logo