Results 1 to 3 of 3

Thread: SuckerTree Vertical Menu - Change submenu right to left

  1. #1
    Join Date
    Apr 2005
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default SuckerTree Vertical Menu - Change submenu right to left

    1) Script Title: SuckerTree Vertical Menu (v1.1)

    2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...y/category/C2/

    3) Describe problem: Is it possible to make the submenus display to the left rather than the right?

    Thanks

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Try replacing the original code that goes in the HEAD section of your page with the below instead:

    Code:
    <style type="text/css">
    
    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */
    
    .suckerdiv ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 160px; /* Width of Menu Items */
    border-bottom: 1px solid #ccc;
    position: relative;
    left: 800px;
    }
    	
    .suckerdiv ul li{
    position: relative;
    }
    	
    /*Sub level menu items */
    .suckerdiv ul li ul{
    position: absolute;
    width: 170px; /*sub menu width*/
    top: 0;
    visibility: hidden;
    }
    
    /* Sub level menu links style */
    .suckerdiv ul li a{
    display: block;
    overflow: auto; /*force hasLayout in IE7 */
    color: black;
    text-decoration: none;
    background: #fff;
    padding: 1px 5px;
    border: 1px solid #ccc;
    border-bottom: 0;
    }
    
    .suckerdiv ul li a:visited{
    color: black;
    }
    
    .suckerdiv ul li a:hover{
    background-color: yellow;
    }
    
    .suckerdiv .subfolderstyle{
    background: url(media/arrow-list.gif) no-repeat center right;
    }
    
    	
    /* Holly Hack for IE \*/
    * html .suckerdiv ul li { float: left; height: 1%; }
    * html .suckerdiv ul li a { height: 1%; }
    /* End */
    
    </style>
    
    <script type="text/javascript">
    
    //SuckerTree Vertical Menu 1.1 (Nov 8th, 06)
    //By Dynamic Drive: http://www.dynamicdrive.com/style/
    
    var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas
    
    function buildsubmenus(){
    for (var i=0; i<menuids.length; i++){
      var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
        for (var t=0; t<ultags.length; t++){
        ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
    		if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
    			ultags[t].style.left=-ultags[t].offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
    		else //else if this is a sub level submenu (ul)
    		  ultags[t].style.left=-ultags[t].offsetWidth+"px" //position menu to the right of menu item that activated it
        ultags[t].parentNode.onmouseover=function(){
        this.getElementsByTagName("ul")[0].style.display="block"
        }
        ultags[t].parentNode.onmouseout=function(){
        this.getElementsByTagName("ul")[0].style.display="none"
        }
        }
    		for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
    		ultags[t].style.visibility="visible"
    		ultags[t].style.display="none"
    		}
      }
    }
    
    if (window.addEventListener)
    window.addEventListener("load", buildsubmenus, false)
    else if (window.attachEvent)
    window.attachEvent("onload", buildsubmenus)
    
    </script>

  3. #3
    Join Date
    Apr 2005
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Smile

    That works great - Many Thanks

Bookmarks

Posting Permissions

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