problem persistent; sfhover - nested menu - hovering problem

Discussion in 'HTML' started by mogwaii, Dec 27, 2010.

  1. mogwaii

    mogwaii Guest

    I really can't find the problem, still i believe it is somwhere in
    added LI links, supposing in stylesheets are missing some new LI
    values for hovering, although it is very difficult to discern which
    ones. I got this patch and the "nesting" script from an old friend
    which now lacks the time to help me again. I have the same site in
    backup in which all is working fine, but here some error is showing
    when hovering over the elements(IE6. is showing that error).

    IE8, Opera and Firefox working well with this nesting "script" so i
    guess this patch couls set sails. Anybody please in the name of the
    Santa Claus !!?

    <script type="text/javascript">
    //MSIE 6 and under hack for lack of CSS LI rollovers
    var sfHover = function() {
    var sfEls =
    document.getElementByid("meni").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
    sfEls.onmouseover=function() {
    this.className+=" sfhover";
    }
    sfEls.onmouseout=function() {
    this.className=this.className.replace(new RegExp(" sfhover\\b"),
    "");
    }
    }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);

    </script>



    CSS PART

    #meni {
    font-size: 15px;
    margin:10px -5px 5px -3px;
    }

    #meni ul {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative; width: 150px;
    background:#F0F8FF;

    }

    /* secondary menu color */
    #meni ul ul { background: #dde; }

    /* tertiary menu color */
    #meni ul ul ul { background: #ffe; }


    /* make LI and A block so fill width 100% */
    #meni ul li, #meni ul a { display: block; }

    /* Just put border on LI to make grid */
    #meni ul li { border: 1px solid #888; }

    #meni a { text-decoration: none; padding: 2px; }

    /* hide the nested menus just push out of sight to hide */
    #meni li ul {
    position: absolute;
    left: -999em;
    margin-left: 140px;
    margin-top: -1.6em;
    }

    #meni li ul ul {
    left: -999em;
    }

    #meni li:hover,
    #meni li.sfhover {
    background:#dde;
    }

    #meni li a:link,
    #meni li a:visited {
    display: block;
    width: 140px;
    color: #6495ED;
    background-color: transparent !important;
    }

    #meni li a:hover,
    #meni li a.sfhover,
    #meni li a:active {
    color: #6495ED; /* current link glow */
    }

    #meni li:hover ul ul,
    #meni li:hover ul ul ul,
    #meni li.sfhover ul ul,
    #meni li.sfhover ul ul ul {
    left: -999em !important; /* drop sibling's childs back */
    background-color: #F0F8FF;
    }

    #meni li:hover ul,
    #meni li li:hover ul,
    #meni li li li:hover ul,
    #meni li.sfhover ul,
    #meni li li.sfhover ul,
    #meni li li li.sfhover ul {
    left: auto; /* lists nested under hovered list items */
    background-color:#F0F8FF;
    }




    #kvartovi{
    position: absolute;
    margin-top: 20px;
    }

    #kvartoviposition {
    position: relative;
    margin-left: 10px;
    }

    #kvartovilinks {
    margin-top: -10px;
    margin-left: -15px;

    }

    #kvartovilinks a {
    color: #6495ED;
    }
    #kvartovilinks a:hover {
    font-weight: normal;
    }


    HTML PART, example for Added LI links


    <li><a href="#">&nbsp;&nbsp;&nbsp;Novi Zagreb
    »»»»»</a>
    <ul>
    <li><a href="http://www.novi-zagreb.info"
    target="_blank">&nbsp;&nbsp;&nbsp;Novi Zagreb</a></li>
    <li><a href="http://www.zagreb.hr/default.aspx?id=153"
    target="_blank">&nbsp;&nbsp;&nbsp;Novi Zagreb - Istok(g.è.) </a></li>
    <li><a href="http://www.travno.hr/"
    target="_blank">&nbsp;&nbsp;&nbsp;Travno </a></li>
    <li><a href="http://www.zagreb.hr/default.aspx?id=154"
    target="_blank">&nbsp;&nbsp;&nbsp;Novi Zagreb - Zapad(g.è.) </a></li>
    <li><a href="http://www.laniste.net/"
    target="_blank">&nbsp;&nbsp;&nbsp;Lani¹te </a></li>
    </ul>
    </li>
    mogwaii, Dec 27, 2010
    #1
    1. Advertising

  2. Gazing into my crystal ball I observed mogwaii <>
    writing in news:2b7c9ac7-015e-4779-a49c-40ca38042c23@
    32g2000yqz.googlegroups.com:

    > <li><a href="http://www.novi-zagreb.info"
    > target="_blank">&nbsp;&nbsp;&nbsp;Novi Zagreb</a></li>
    >


    Two things:

    1. Why the &nbsp; ? Use left padding on the li instead.
    2. Why the target="_blank"? I hate that, especially from a main menu.
    If something HAS TO open in a new window/tab, at least give the visitor
    some kind of indication - use the title attribute or put a notice
    somewhere visible that links are going to open in new windows/tabs.

    As to your OP, URL?

    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
    Adrienne Boswell, Dec 27, 2010
    #2
    1. Advertising

  3. mogwaii

    dorayme Guest

    In article
    <
    >,

    mogwaii <> wrote:

    > I really can't find the problem, still i believe it is somwhere in
    > added LI links, supposing in stylesheets are missing some new LI
    > values for hovering, although it is very difficult to discern which
    > ones. I got this patch and the "nesting" script from an old friend
    > which now lacks the time to help me again. I have the same site in
    > backup in which all is working fine, but here some error is showing
    > when hovering over the elements(IE6. is showing that error).
    >
    > IE8, Opera and Firefox working well with this nesting "script" so i
    > guess this patch couls set sails. Anybody please in the name of the
    > Santa Claus !!?
    >
    > <script type="text/javascript">
    > //MSIE 6 and under hack for lack of CSS LI rollovers
    > var sfHover = function() {
    > var sfEls =


    You would not *need* to find the problem if you made your
    dropdown menu in such a way that it does not matter if it drops
    down or not. And this is exquisitely so if the only browser in
    which it does not is IE6.

    Generally, Suckerfish type menus work well without the js, the
    shover being to latch a bit of js on for IE6. But if you make the
    top menu item a link (the top menu item is the one that is always
    visible) go to a page that has asa local menu all the dropdown
    items under it, no user is really disadvantaged.

    I had a nice working dropdown recently but there was a problem
    with the js and shover and it was relief to know that it did not
    matter that I find the time to sort it out because I had already
    made the provision mentioned above and in some ways, it was
    better, more natural looking and less fiddly in IE6 (where the
    drop was not working)!

    --
    dorayme
    dorayme, Dec 27, 2010
    #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. GD
    Replies:
    4
    Views:
    2,203
    =?Utf-8?B?Q3VydF9DIFtNVlBd?=
    Sep 13, 2005
  2. Wayfarer
    Replies:
    7
    Views:
    470
    picayunish
    Sep 23, 2003
  3. Cogito
    Replies:
    3
    Views:
    414
    Beauregard T. Shagnasty
    May 25, 2005
  4. max
    Replies:
    8
    Views:
    749
    Nico Schuyt
    Nov 8, 2006
  5. gk
    Replies:
    7
    Views:
    964
    Tom Anderson
    Oct 12, 2010
Loading...

Share This Page