Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Feb 2007
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Is this possible?

    I am working with the script on this page:
    http://javascriptkit.com/script/scri...icalmenu.shtml

    Using this script, I went ahead and modified the CSS and the JS file, in order to have the sub menus appear with a one pixel right offset from the top level.

    When I move the mouse slowly from the top level to the sub level, the sub level disappears. If the sub level is touching the top level, without the one pixel offset, the sub level does not disappear. I would like to have the sub level appear with a one pixel ofset to the right of the top level.

    Is it possible to keep the sub level from disappearing while the mouse is moving across the one pixel difference?
    Last edited by DDmUSA; 02-16-2007 at 12:08 PM.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,519
    Thanks
    3
    Thanked 507 Times in 494 Posts
    will need to see your modifications
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New Coder
    Join Date
    Feb 2007
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Code needs to be modified some more...

    Please educate me on any modifications available to allow the sub menu to remain visible while the mouse pointer is being moved across a one or more pixel offset.


    The initial JS script file is as follows:

    var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas
    var submenuoffset=-11 //Offset of submenus from main menu. Default is -2 pixels.

    function createcssmenu(){
    for (var i=0; i<menuids.length; i++){
    var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    var spanref=document.createElement("span")
    spanref.className="arrowdiv"
    spanref.innerHTML="&nbsp;&nbsp;"
    ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
    ultags[t].parentNode.onmouseover=function (){
    this.getElementsByTagName("ul")[0].style.left=this.parentNode.offsetWidth+submenuoffset+"px"
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
    }
    }


    if (window.addEventListener)
    window.addEventListener("load", createcssmenu, false)
    else if (window.attachEvent)
    window.attachEvent("onload", createcssmenu)


    The initial CSS file is as follows:

    .glossymenu, .glossymenu li ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
    border: 0px solid black;
    }

    .glossymenu li{
    position: relative;
    left: 12;
    }

    .glossymenu li ul{ /*SUB MENU STYLE*/
    position: absolute;
    width: 215px; /*WIDTH OF SUB MENU ITEMS*/
    left: 0;
    top: 0;
    display: none;
    filter:alpha(opacity=100);
    -moz-opacity:1;
    }

    .glossymenu li a{
    background: white url(glossyback.gif) repeat-x bottom left;
    font: bold 10px Verdana, Helvetica, sans-serif;
    color: white;
    display: block;
    width: auto;
    padding: 6px 0;
    padding-left: 3px;
    text-decoration: none;
    }

    .glossymenu .arrowdiv{
    position: absolute;
    right: 1px;
    font: bold 12px Verdana, Helvetica, sans-serif;
    background: transparent url(arrow.gif) no-repeat center right;
    }

    .glossymenu li a:visited, .glossymenu li a:active{
    color: white;
    }

    .glossymenu li a:hover{
    background-image: url(glossyback2.gif);
    }

    /* Holly Hack for IE \*/
    * html .glossymenu li { float: left; height: 1%; }
    * html .glossymenu li a { height: 1%; }
    /* End */


  •  

    Posting Permissions

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