Results 1 to 9 of 9

Thread: suckertreemenu - how to start the menu with a selected submenu open

  1. #1
    Join Date
    Nov 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default suckertreemenu - how to start the menu with a selected submenu open

    1) Script Title: suckertreemenu

    2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...orizontal/P10/

    3) Describe problem: I manage to use the Suckertreemenu. How can I open a default / selected menu instead of waiting for a mouse to move (h)over the menu?

    It looks too static with no selected menu opened by default.

    Tnx,

    Gert
    GWCheck

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Give the submenu ul that you want to already be open an id of open, which should look like this:
    Code:
    <ul id="open">
    Then, in the Javascript change:
    Code:
        ultags[t].parentNode.onmouseover=function(){
        this.getElementsByTagName("ul")[0].style.visibility="visible";
        }
    To
    Code:
        ultags[t].parentNode.onmouseover=function(){
        if(document.getElementById('open').style.visibility = "visibile") document.getElementById('open').style.visibility = "hidden";
        this.getElementsByTagName("ul")[0].style.visibility="visible";
        }
    Good luck
    Jeremy | jfein.net

  3. #3
    Join Date
    Nov 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Can't get it to work. Did you try it?

    It still needs a mouse / hover IMO...

    Gert
    GWCheck.com

  4. #4
    Join Date
    Nov 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Works!

    Had to put it at the end of the IF section that is just for the first level submenu: (so it shows on the load of the page, but when the visitor starts browsing it goes away).

    if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
    ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
    ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
    if(document.getElementById("open").style.visibility = "hidden") document.getElementById("open").style.visibility = "visible";
    }

    Tnx for the tip!

    Gert
    GWCheck

  5. #5
    Join Date
    Nov 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Not yet there.

    It appears on startup, but it only goes away when a hover touches it. So if any other menu item is opened, the 1st menu stays opened. Hmm. Tricky.

    Gert
    GWCheck

  6. #6
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    No - put it where I told you, all of your javascript should look like this:
    Code:
    <script type="text/javascript">
    
    //SuckerTree Horizontal Menu (Sept 14th, 06)
    //By Dynamic Drive: http://www.dynamicdrive.com/style/
    
    var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas
    
    function buildsubmenus_horizontal(){
    for (var i=0; i<menuids.length; i++){
      var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
        for (var t=0; t<ultags.length; t++){
    		if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
    			ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
    			ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
    		}
    		else{ //else if this is a sub level menu (ul)
    		  ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
        	ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
    		}
        ultags[t].parentNode.onmouseover=function(){
        if(document.getElementById('open').style.visibility = "visibile") document.getElementById('open').style.visibility = "hidden";
        this.getElementsByTagName("ul")[0].style.visibility="visible";
        }
        ultags[t].parentNode.onmouseout=function(){
        this.getElementsByTagName("ul")[0].style.visibility="hidden"
        }
        }
      }
    }
    
    if (window.addEventListener)
    window.addEventListener("load", buildsubmenus_horizontal, false)
    else if (window.attachEvent)
    window.attachEvent("onload", buildsubmenus_horizontal)
    
    </script>
    Jeremy | jfein.net

  7. #7
    Join Date
    Nov 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    It looks now like this and it works. On startup the 1st menu is opened, and if any menu is touched that one is opened and the 1st menu clears.

    function buildsubmenus_horizontal(){
    for (var i=0; i<menuids.length; i++){
    var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
    ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
    ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
    if(document.getElementById("open").style.visibility = "hidden") document.getElementById("open").style.visibility = "visible";
    }
    else{ //else if this is a sub level menu (ul)
    ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
    }
    ultags[t].parentNode.onmouseover=function() {
    if(document.getElementById("open").style.visibility = "visible") document.getElementById("open").style.visibility = "hidden";
    this.getElementsByTagName("ul")[0].style.visibility="visible"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.visibility="hidden"
    }
    }
    }
    }

  8. #8
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Is your code working? If not, it should all look like this:
    Code:
    <style type="text/css">
    
    .suckertreemenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    
    /*Top level list items*/
    .suckertreemenu ul li{
    position: relative;
    display: inline;
    float: left;
    background-color: #F3F3F3; /*overall menu background color*/
    }
    
    /*Top level menu link items style*/
    .suckertreemenu ul li a{
    display: block;
    width: 90px; /*Width of top level menu link items*/
    padding: 1px 8px;
    border: 1px solid black;
    border-left-width: 0;
    text-decoration: none;
    color: navy;
    }
    	
    /*1st sub level menu*/
    .suckertreemenu ul li ul{
    left: 0;
    position: absolute;
    top: 1em; /* no need to change, as true value set by script */
    display: block;
    visibility: hidden;
    }
    
    /*Sub level menu list items (undo style from Top level List Items)*/
    .suckertreemenu ul li ul li{
    display: list-item;
    float: none;
    }
    
    /*All subsequent sub menu levels offset after 1st level sub menu */
    .suckertreemenu ul li ul li ul{ 
    left: 159px; /* no need to change, as true value set by script */
    top: 0;
    }
    
    /* Sub level menu links style */
    .suckertreemenu ul li ul li a{
    display: block;
    width: 160px; /*width of sub menu levels*/
    color: navy;
    text-decoration: none;
    padding: 1px 5px;
    border: 1px solid #ccc;
    }
    
    .suckertreemenu ul li a:hover{
    background-color: black;
    color: white;
    }
    
    /*Background image for top level menu list links */
    .suckertreemenu .mainfoldericon{
    background: #F3F3F3 url(media/arrow-down.gif) no-repeat center right;
    }
    
    /*Background image for subsequent level menu list links */
    .suckertreemenu .subfoldericon{
    background: #F3F3F3 url(media/arrow-right.gif) no-repeat center right;
    }
    
    * html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
    padding-top: 1em;
    }
    	
    /* Holly Hack for IE \*/
    * html .suckertreemenu ul li { float: left; height: 1%; }
    * html .suckertreemenu ul li a { height: 1%; }
    /* End */
    </style>
    
    <script type="text/javascript">
    
    //SuckerTree Horizontal Menu (Sept 14th, 06)
    //By Dynamic Drive: http://www.dynamicdrive.com/style/
    
    var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas
    
    function buildsubmenus_horizontal(){
    for (var i=0; i<menuids.length; i++){
      var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
        for (var t=0; t<ultags.length; t++){
    		if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
    			ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
    			ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
    		}
    		else{ //else if this is a sub level menu (ul)
    		  ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
        	ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
    		}
        ultags[t].parentNode.onmouseover=function(){
     if(document.getElementById('open').style.visibility = "visibile") document.getElementById('open').style.visibility = "hidden";
    
        this.getElementsByTagName("ul")[0].style.visibility="visible"
        }
        ultags[t].parentNode.onmouseout=function(){
        this.getElementsByTagName("ul")[0].style.visibility="hidden"
        }
        }
      }
    }
    
    if (window.addEventListener)
    window.addEventListener("load", buildsubmenus_horizontal, false)
    else if (window.attachEvent)
    window.attachEvent("onload", buildsubmenus_horizontal)
    
    </script>
    <div class="suckertreemenu">
    <ul id="treemenu1">
    <li><a href="#" style="border-left: 1px solid black">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Folder 1</a>
      <ul id="open" style="visibility: visible">
      <li><a href="#">Sub Item 1.1</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
      <li><a href="#">Sub Item 1.4</a></li>
      </ul>
    </li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Folder 2</a>
      <ul>
      <li><a href="#">Sub Item 2.1</a></li>
      <li><a href="#">Folder 2.1</a>
        <ul>
        <li><a href="#">Sub Item 2.1.1</a></li>
        <li><a href="#">Sub Item 2.1.2</a></li>
        <li><a href="#">Sub Item 2.1.3</a></li>
        <li><a href="#">Sub Item 2.1.4</a></li>
        </ul>
      </li>
    </ul>
    </a>
    </li>
    <li><a href="#">Item 4</a></li>
    </ul>
    <br style="clear: left;" />
    </div>
    
    <p id="iepara">Rest of content here</p>
    Last edited by Nile; 11-23-2010 at 07:30 PM.
    Jeremy | jfein.net

  9. #9
    Join Date
    Nov 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    it is working now, the way i put it. just have another question.

    is it possible that one menu allways stays open? the first one when it's not hoverd by the mouse and the last one when it is hoverd by the mouse ?

    now it opens allways with the first one, but closes when the mouse moves away.

    Gert

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
  •