Horizontal CSS and Javascript menu

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • polo
    #1

    Horizontal CSS and Javascript menu

    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:#3c5 279; /*#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:absolu te;
    background:#CCC CCC;
    list-style:none;
    z-index:1;
    }

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

    #menu ul li{
    position:relati ve;
    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.getElement sByTagName('UL' )[0];
    L.style.display = L.style.display ==''? 'block' : '';
    }

    onload = function() { if(ie) {
    var U = document.getEle mentById('menu' ).getElementsBy TagName('LI');
    for(var i=0;i<U.length; i++)
    if(U[i].getElementsByT agName('UL') &&
    U[i].getElementsByT agName('UL').le ngth>0)
    {
    U[i].onmouseover = function() {roll(this);};
    U[i].onmouseout = function() {roll(this);};
    }
    }
    }
    </script>
    </head>

    <body>

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

    <li>
    <a href="#"><b>Men u 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>Men u 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>Men u 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>

    Tags: None
    • Julian Turner
      #2
      Re: Horizontal CSS and Javascript menu


      polo wrote:

      [snip][color=blue]
      > 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,[/color]
      [/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

        Comment

        • polo
          #3
          Re: Horizontal CSS and Javascript menu

          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 ?
          Whatever:hover
          http://www.xs4all.nl/~peterned/csshover.html
          Peterened - stuff in dhtml

          i find that it works to mimic the hover css tag, but the positionning
          is totally wrong...
          any idea on that ?

            Comment

            Previous template Next
            Working...