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 7 of 7
  1. #1
    New Coder
    Join Date
    Dec 2007
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with menu code

    I have a horizontal menu with three levels

    1st Selection
    - 2nd Selection
    - 3rd Selection

    The 2nd Selection drops strait down, which is what i want. The 3rd Selection opens strait down also but i need it to open to the right. Would someone be able to take a look at the code and let me know what i am doing wrong?

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    How can we look at code we can't see?

  • #3
    New Coder
    Join Date
    Dec 2007
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I apologise here is the javascript code i will post the css and html code as well


    Code:
    var cssmenuids=["cssmenu1"] //Enter id(s) of CSS Horizontal UL menus, separated by commas
    var csssubmenuoffset=-1 //Offset of submenus from main menu. Default is 0 pixels.
    
    function createcssmenu2(){
    for (var i=0; i<cssmenuids.length; i++){
      var ultags=document.getElementById(cssmenuids[i]).getElementsByTagName("ul")
        for (var t=0; t<ultags.length; t++){
    			ultags[t].style.top=ultags[t].parentNode.offsetHeight+csssubmenuoffset+"px"
        	var spanref=document.createElement("span")
    			spanref.className="arrowdiv"
    			spanref.innerHTML="&nbsp;&nbsp;&nbsp;&nbsp;"
    			ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
        	ultags[t].parentNode.onmouseover=function(){
    					this.style.zIndex=100
        	this.getElementsByTagName("ul")[0].style.visibility="visible"
    					this.getElementsByTagName("ul")[0].style.zIndex=0
        	}
        	ultags[t].parentNode.onmouseout=function(){
    					this.style.zIndex=0
    					this.getElementsByTagName("ul")[0].style.visibility="hidden"
    					this.getElementsByTagName("ul")[0].style.zIndex=100
    	
        	}
        }
      }
    }
    
    if (window.addEventListener)
    window.addEventListener("load", createcssmenu2, false)
    else if (window.attachEvent)
    window.attachEvent("onload", createcssmenu2)

  • #4
    New Coder
    Join Date
    Dec 2007
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    css code

    Code:
    .horizontalcssmenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    
    /*Top level list items*/
    .horizontalcssmenu ul li{
    position: relative;
    display: inline;
    float: left;
    
    }
    
    /*Top level menu link items style*/
    .horizontalcssmenu ul li a{
    display: block;
    width: 120px; /*Width of top level menu link items*/
    padding: 2px 8px;
    border: 1px solid #202020;
    border-left-width: 0;
    text-decoration: none;
    background: url(untitled.bmp) center center repeat-x;
    color: white;
    font: bold 13px Tahoma;
    }
    	
    /*Sub level menu*/
    .horizontalcssmenu ul li ul{
    left: 0;
    top: 0;
    border-top: 1px solid #202020;
    position: absolute;
    display: block;
    visibility: hidden;
    z-index: 100;
    }
    
    /*Sub level menu list items*/
    .horizontalcssmenu ul li ul li{
    display: inline;
    float: none;
    }
    
    
    /* Sub level menu links style */
    .horizontalcssmenu ul li ul li a{
    width: 160px; /*width of sub menu levels*/
    font-weight: normal;
    padding: 2px 5px;
    background: url(untitled1.bmp) center center repeat-x;
    border-width: 0 1px 1px 1px;
    }
    
    .horizontalcssmenu ul li a:hover{
    background: url(untitled1.bmp) center center repeat-x;
    }
    
    .horizontalcssmenu ul li ul li a:hover{
    background: url(untitled2.bmp) center center repeat-x;
    }

  • #5
    New Coder
    Join Date
    Dec 2007
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    html code


    Code:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="csshorizontalmenu.css" />
    
    <script type="text/javascript" src="csshorizontalmenu.js">
    
    /***********************************************
    
    * CSS Horizontal List Menu- by JavaScript Kit (www.javascriptkit.com)
    * Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/ 
    * This notice must stay intact for usage
    * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
    
    ***********************************************/
    
    </script>
    
    
    
    
    </head>
    <body>
    
    <div class="horizontalcssmenu">
    <ul id="cssmenu1">
    <li style="border-left: 1px solid #202020;"><a href="http://www.javascriptkit.com/">Home</a></li>
    <li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JS</a></li>
    <li><a href="http://www.javascriptkit.com/">JS Tutorials</a></li>
    <li><a href="#">References</a>
        <ul>
        <li><a href="http://www.javascriptkit.com/jsref/">JS Reference</a></li>
    		<ul>
        		<li><a href="http://www.javascriptkit.com/jsref/">JS Reference</a></li>
       		 <li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
       		 <li><a href="http://www.javascriptkit.com/dhtmltutors/cssreference.shtml">CSS Reference</a></li>
        		</ul>
    
        <li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
        <li><a href="http://www.javascriptkit.com/dhtmltutors/cssreference.shtml">CSS Reference</a></li>
        </ul>
    </li>
    <li><a href="http://www.javascriptkit.com/howto/">web Tutorials</a></li>
    <li><a href="#">Resources</a>
        <ul>
        <li><a href="http://www.dynamicdrive.com">Dynamic HTML</a></li>
        <li><a href="http://www.codingforums.com">Coding Forums</a></li>
        <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
        <li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
        <li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a></li>
        <li><a href="http://tools.dynamicdrive.com/favicon/">Favicon Generator</a></li>
        </ul>
    </li>
    </ul>
    <br style="clear: left;" />
    </div>
    
    <p id="iepara">Rest of content here</p>
    
    
    </body>
    </html>

  • #6
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    horizontal menu fix

    I'm not sure this is the solution you want...if you're after a menu that will do:

    Menu Item 1
    ---Menu Item 1.A
    ------Menu Item 1.A.1
    ------Menu Item 1.A.2
    ---Menu Item 1.B
    Menu Item 2
    etc...

    Then you need to add a sub sub-level to the CSS code. There is no change to the script. Here's the code I inserted:

    Code:
    /*NEW - Sub sub-level menu*/
    .horizontalcssmenu ul li ul li ul{
    left: 0;
    top: 0;
    border-top: 1px solid #202020;
    position: absolute;
    left: 40px; /*this is the offset for the sub sub-menu to allow the sub-menu to be seen*/
    display: block;
    visibility: hidden;
    z-index: inherit;
    }
    
    /*NEW- Sub sub-level menu list items*/
    .horizontalcssmenu ul li ul li ul li{
    display: inherit;
    float: right;
    }
    
    
    /*NEW- Sub sub-level menu links style */
    .horizontalcssmenu ul li ul li ul li a{
    width: 65px; /*width of sub menu levels*/
    display:block;
    font-weight: normal;
    padding: 2px 2px;
    background: #E9B229;
    border-width: 0 1px 1px 1px;
    }
    The left:40px moves the sub sub-level over so that you can still see the next menu item below it. If you'd like to see it in action take a look at the menu here.

    Rob

  • #7
    New Coder
    Join Date
    Dec 2007
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Rob, THANK YOU SO MUCH!!! The addition is exactly what i was looking for, i can't thank you enough!!


  •  

    Posting Permissions

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