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 to the CF scene
    Join Date
    Jun 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Vertical Menu Help

    Hi folks

    I'm the teacher at Bodmin College responsible for the school website. We've recently upgraded some machines to IE8 which has meant that we've had problems with our vertical menu. I've rewritten the menu using the CSS Vertical Menu . It works in IE8 now but there is a real problem now in IE7 [sigh].

    The problem is that the height of the second level menu results in their being gaps in between each menu item so that as you move your mouse down the second menu items it quickly closes again. Can anyone help a scripting novice fix this by telling me which variable I need to change either in the Java script or the CSS files.

    Thank you very much and you'll make a lot of teachers and students happy!

    Chris

  • #2
    Regular Coder Deacon Frost's Avatar
    Join Date
    Feb 2008
    Location
    Between the Lines
    Posts
    279
    Thanks
    31
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by prettejohn View Post
    Hi folks

    I'm the teacher at Bodmin College responsible for the school website. We've recently upgraded some machines to IE8 which has meant that we've had problems with our vertical menu. I've rewritten the menu using the CSS Vertical Menu . It works in IE8 now but there is a real problem now in IE7 [sigh].

    The problem is that the height of the second level menu results in their being gaps in between each menu item so that as you move your mouse down the second menu items it quickly closes again. Can anyone help a scripting novice fix this by telling me which variable I need to change either in the Java script or the CSS files.

    Thank you very much and you'll make a lot of teachers and students happy!

    Chris

    The display problem is in FX as well.

    A tip would be to post your code for both the javascript, and the css.

    It would seem to be a css issue, but there may very well be a js error.

  • #3
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the tip DeaconFrost.

    The code is for the Java Script:

    Code:
    var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas
    var submenuoffset=-50 //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 Code for the css is:

    Code:
    .glossymenu, .glossymenu li ul{
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    	width: 100px; /*WIDTH OF MAIN MENU ITEMS*/
    
    }
    
    .glossymenu li{
    position: relative;
    }
    
    .glossymenu li a{
    	background: white url(glossyback.gif) repeat-x bottom left;
    	font: Arial, Helvetica, sans-serif, #74A8F5;
    	color: white;
    	display: block;
    	width: auto;
    	padding: 0px 0;
    	padding-left: 10px;
    	text-decoration: none;
    }
    
    .glossymenu li ul{ /*SUB MENU STYLE*/
    position: absolute;
    width: 100px; /*WIDTH OF SUB MENU ITEMS*/
    left: 0;
    top: 0;
    display: none;
    }
    
    .glossymenu li ul li{
    float: left;
    }
    
    .glossymenu li ul a{
    	width: 120px; /*WIDTH OF SUB MENU ITEMS - 10px padding-left for A elements */
    	padding-left: 100px;
    	height: 15px;
    }
    
    .glossymenu .arrowdiv{
    position: absolute;
    right: 2px;
    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 */
    Thank you!


  •  

    Posting Permissions

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