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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cut & Paste CSS Vertical List Menu levels

    i use the well known code from javascriptkit (http://www.javascriptkit.com/script/...icalmenu.shtml) for the time being without any modification in css or js. Only i have insert in HTML code a other level in the sub menus (menu-> sub menu ->sub menu2). the problem is that when i reach the second level the menu it doesn't show at left of the parent menu but right (over the parent to be more specific).

    I try various changes in the js and the css but with no success.

    any help ?

  • #2
    Regular Coder
    Join Date
    May 2008
    Location
    Lost in Localhost...
    Posts
    702
    Thanks
    3
    Thanked 43 Times in 42 Posts
    We need to see your code to sort anything out.

  • #3
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    cssverticalmenu.css

    Code:
    .glossymenu, .glossymenu li ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
    border: 1px solid black;
    }
    
    .glossymenu li{
    position: relative;
    }
    
    .glossymenu li a{
    background: white url(glossyback.gif) repeat-x bottom left;
    font: bold 12px Verdana, Helvetica, sans-serif;
    color: white;
    display: block;
    width: auto;
    padding: 5px 0;
    padding-left: 10px;
    text-decoration: none;
    }
    
    .glossymenu li ul{ /*SUB MENU STYLE*/
    position: absolute;
    width: 190px; /*WIDTH OF SUB MENU ITEMS*/
    left: 0;
    top: 0;
    display: none;
    }
    
    .glossymenu li ul li{
    float: left;
    }
    
    .glossymenu li ul a{
    width: 180px; /*WIDTH OF SUB MENU ITEMS - 10px padding-left for A elements */
    }
    
    .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 */
    cssverticalmenu.js
    Code:
    var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas
    var submenuoffset=-2 //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)
    html code
    Code:
    <ul id="verticalmenu" class="glossymenu">
      <li><a href="/index.php">menu1</a></li> 
      <li><a href="/administration.php" >menu-bla</a></li>
      <li><a href="/sponsors.php" >menu2</a></li>
      <li><a href="/about.php">menu3</a></li>
      <li><a href="">menu4</a>
        <ul>
          <li><a href="http://www.javascriptkit.com/jsref/">sub4-1</a></li> 
          <li><a href="http://www.javascriptkit.com/jsref/">sub4-2</a></li>
          <li><a href="http://www.javascriptkit.com/domref/">sub4-3</a></li>
          <li><a href="http://www.javascriptkit.com/dhtmltutors/cssreference.shtml">sub4-4</a></li>
        </ul> 
      </li>
      <li><a href="">menu5</a>
        <ul>
          <li><a href="">sub5-1</a>
            <ul>
              <li><a href="http://www.javascriptkit.com/jsref/">sub 5-1-1</a></li>
              <li><a href="http://www.javascriptkit.com/domref/">sub 5-1-2</a></li> 
            </ul>  
          </li>
          <li><a href="">5-2</a>
            <ul>
              <li><a href="/paidon0809_results.php">5-2-1</a></li>
            </ul>
          </li>
          <li><a href="">5-3</a>
            <ul>
              <li><a href="/andron0809_results.php">sub5-3-1</a></li>
            </ul> 
          </li>
        </ul>
      </li>
      <li><a href="">sub3</a>
        <ul>
          <li><a href="http://www.javascriptkit.com/jsref/">sub3-1</a></li>
          <li><a href="http://www.javascriptkit.com/domref/">sub3-2</a></li>
          <li><a href="http://www.javascriptkit.com/dhtmltutors/cssreference.shtml">sub3-3</a></li>
        </ul>
      </li>
      <li><a href="/stories/08/03/story.php">menu6</a></li>
      <li><a href="/forum.php">menu7</a></li>
      <li><a href="/contact.php">menu8</a></li>
    </ul>

  • #4
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    any help or suggestion?


  •  

    Posting Permissions

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