Horizontal CSS and Javascript menu

Discussion in 'Javascript' started by polo, Mar 9, 2006.

  1. polo

    polo Guest

    Hi
    i am trying to get a horizontal menu and sub menu in css, which works
    great on my Firefox
    But, in order to get around the ie hover bug, i included some
    javascript which gives me a strange result... I admit i got recent help
    by Stephane on the js code (thanks)

    here is my code for anyone with a suggestion as to how to mimic the css
    properties "inline" or "float" on ie and get the same result as in FF:

    <html>
    <head>

    <title></title>

    <style type="text/css">
    /*-------------------------------------------------------------*/

    #menu{
    margin:0px;
    padding:0px;
    list-style:none;
    width:750;
    background:#3c5279; /*#5f7eb3;*/
    float:left;
    font:0.9em Tahoma, Verdana, Helvetica, sans-serif;
    color:#FFFFFF;
    font-weight:bold;
    }

    #menu li{
    float:left;
    display:block;
    padding:2px 1px;
    }
    #menu li a{
    display:inline;
    padding:2px 6px;
    color:#FFFFFF;
    text-decoration:none;
    }
    #menu li a:hover{
    color: orange;
    }

    #menu li ul{
    display:none;
    }
    #menu li:hover ul{
    display:block;
    width:736px;
    height: 25;
    padding-top:10px;
    padding:7px;
    }

    #menu ul{
    position:absolute;
    background:#CCCCCC;
    list-style:none;
    z-index:1;
    }

    ..un{
    margin:2px -1px;
    }
    ..deux{
    margin:2px -79px;
    }
    ..trois{
    margin:2px -157px;
    }

    #menu ul li{
    position:relative;
    float:none;
    }

    #menu ul li a{
    display:inline;
    color:#000000;
    font:12px Tahoma, Verdana, Helvetica, sans-serif;
    font-weight:bold;
    }

    ul#newmenu {
    font-weight:bold;
    color:#000000;
    }
    ul#newmenu li {
    display: inline;
    }
    ul#newmenu li a:hover {
    color: orange;
    }

    /*-------------------------------------------------------------*/
    </style>

    <script type="text/javascript">
    /* javascript pour l'idiot d'Internet Explorer */
    // is it IE ?
    var ie=false; /*@cc_on ie=true; @*/

    function roll(quoi) {
    var L = quoi.getElementsByTagName('UL')[0];
    L.style.display = L.style.display==''? 'block' : '';
    }

    onload = function() { if(ie) {
    var U = document.getElementById('menu').getElementsByTagName('LI');
    for(var i=0;i<U.length;i++)
    if(U.getElementsByTagName('UL') &&
    U.getElementsByTagName('UL').length>0)
    {
    U.onmouseover = function() {roll(this);};
    U.onmouseout = function() {roll(this);};
    }
    }
    }
    </script>
    </head>

    <body>

    <!-- menu customisé ******************************* -->
    <ul id="menu">

    <li>
    <a href="#"><b>Menu 1</b></a>&nbsp;|
    <ul id="newmenu" class="un">
    <li><a href="#">Menu 1.1</a></li>&nbsp;|
    <li><a href="#">Menu 1.2</a></li>&nbsp;|
    <li><a href="#">Menu 1.3</a></li>&nbsp;|
    <li><a href="#">Menu 1.4</a></li>&nbsp;|
    <li><a href="#">Menu 1.5</a></li>
    </ul>
    </li>

    <li>
    <a href="#"><b>Menu 2</b></a>&nbsp;|
    <ul id="newmenu" class="deux">
    <li><a href="#">Menu 2.1</a></li>&nbsp;|
    <li><a href="#">Menu 2.2</a></li>&nbsp;|
    <li><a href="#">Menu 2.3</a></li>&nbsp;|
    <li><a href="#">Menu 2.4</a></li>&nbsp;|
    <li><a href="#">Menu 2.5</a></li>
    </ul>
    </li>

    <li>
    <a href="#"><b>Menu 3</b></a>&nbsp;|
    <ul id="newmenu" class="trois">
    <li><a href="#">Menu 3.1</a></li>&nbsp;|
    <li><a href="#">Menu 3.2</a></li>&nbsp;|
    <li><a href="#">Menu 3.3</a></li>&nbsp;|
    <li><a href="#">Menu 3.4</a></li>&nbsp;|
    <li><a href="#">Menu 3.5</a></li>
    </ul>
    </li>

    </ul>
    <br />
    <br />

    </body>
    </html>
     
    polo, Mar 9, 2006
    #1
    1. Advertising

  2. polo wrote:

    [snip]
    > Hi
    > i am trying to get a horizontal menu and sub menu in css, which works
    > great on my Firefox
    > But, in order to get around the ie hover bug,

    [/snip]

    Apologies. Without going into your JavaScript, have you visited
    <URL:http://www.cssplay.co.uk>?

    I think the site demonstrates what you are looking for in PURE CSS,
    including IE.

    Quite astonishing.

    Regards

    Julian Turner
     
    Julian Turner, Mar 9, 2006
    #2
    1. Advertising

  3. polo

    polo Guest

    Thank you Julian
    What a great site !!!
    it does not solve my problem directly, but i may find a solution by
    including my submenu in a table.... (horrible thought, i know) as
    described in the vertical dropdown menu example. now it makes the code
    rather heavy, and i dont know yet if i can do that in a horizontal
    table...
    Thanks again
    anybody else with help on the javascript there ?

    what about the whatever:hover htc inclusion ?
    http://www.xs4all.nl/~peterned/csshover.html
    i find that it works to mimic the hover css tag, but the positionning
    is totally wrong...
    any idea on that ?
     
    polo, Mar 9, 2006
    #3
    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. itzikkl
    Replies:
    0
    Views:
    5,826
    itzikkl
    Mar 27, 2005
  2. Arto Steiner

    IE7, zoom and horizontal menu (CSS)

    Arto Steiner, May 24, 2007, in forum: HTML
    Replies:
    1
    Views:
    821
    BootNic
    May 25, 2007
  3. Emil
    Replies:
    1
    Views:
    558
    Manuel Ricca
    Dec 11, 2007
  4. Philip
    Replies:
    1
    Views:
    333
  5. polo

    Horizontal CSS and Javascript menu

    polo, Mar 8, 2006, in forum: Javascript
    Replies:
    0
    Views:
    132
Loading...

Share This Page