Treemenu (expand button and link separately)

**hodza** · 01-10-2012, 09:32 AM

Hi guys,
would you help me with the Tree Menu. I need to make the Tree Menu separately expand button and link on the same line. When I add the link to menu, when click it always expand/contact and search the link from the line.
I need to separate expand/contact icon and the link on the same line.
Thank you for help.

TreeMenu: http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

**vwphillips** · 01-10-2012, 03:41 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

.treeview ul{ /*CSS for Simple Tree Menu*/
margin: 0;
padding: 0;
}

.treeview li{ /*Style for LI elements in general (excludes an LI that contains sub lists)*/
list-style-type: none;
padding-left: 22px;
margin-bottom: 3px;
}

.treeview li.submenu{ /* Style for LI that contains sub lists (other ULs). */
cursor: hand !important;
cursor: pointer !important;
}


.treeview li.submenu ul{ /*Style for ULs that are children of LIs (submenu) */
display: none; /*Hide them by default. Don't delete. */
}

.treeview .submenu ul li{ /*Style for LIs of ULs that are children of LIs (submenu) */
cursor: default;
}

.float {
  width:20px;height:20px;float:left;
background: white url(http://www.dynamicdrive.com/dynamicindex1/closed.gif) no-repeat left 1px;
}

.link {
  width:20px;height:20px;float:left;
background: white url(http://www.dynamicdrive.com/dynamicindex1/list.gif) no-repeat left 1px;
}

/*]]>*/
</style>

<script  type="text/javascript">
/*<![CDATA[*/
var persisteduls=new Object()
var ddtreemenu=new Object()

ddtreemenu.closefolder="http://www.dynamicdrive.com/dynamicindex1/closed.gif" //set image path to "closed" folder image
ddtreemenu.openfolder="http://www.dynamicdrive.com/dynamicindex1/open.gif" //set image path to "open" folder image

//////////No need to edit beyond here///////////////////////////

ddtreemenu.createTree=function(treeid, enablepersist, persistdays){
 var ultags=document.getElementById(treeid).getElementsByTagName("ul")
 if (typeof persisteduls[treeid]=="undefined")
  persisteduls[treeid]=(enablepersist==true && ddtreemenu.getCookie(treeid)!="")? ddtreemenu.getCookie(treeid).split(",") : ""
  for (var i=0; i<ultags.length; i++)
   ddtreemenu.buildSubTree(treeid, ultags[i], i)
  if (enablepersist==true){ //if enable persist feature
   var durationdays=(typeof persistdays=="undefined")? 1 : parseInt(persistdays)
  ddtreemenu.dotask(window, function(){ddtreemenu.rememberstate(treeid, durationdays)}, "unload") //save opened UL indexes on body unload
  }
}

ddtreemenu.buildSubTree=function(treeid, ulelement, index){
 ulelement.parentNode.className="submenu"
 if (typeof persisteduls[treeid]=="object"){ //if cookie exists (persisteduls[treeid] is an array versus "" string)
  if (ddtreemenu.searcharray(persisteduls[treeid], index)){
   ulelement.setAttribute("rel", "open")
   ulelement.style.display="block"
   ddtreemenu.bycls('float',ulelement.parentNode)[0].style.backgroundImage="url("+ddtreemenu.openfolder+")"
 }
 else
  ulelement.setAttribute("rel", "closed")
 } //end cookie persist code
 else if (ulelement.getAttribute("rel")==null || ulelement.getAttribute("rel")==false) //if no cookie and UL has NO rel attribute explicted added by user
  ulelement.setAttribute("rel", "closed")
 else if (ulelement.getAttribute("rel")=="open") //else if no cookie and this UL has an explicit rel value of "open"
  ddtreemenu.expandSubTree(treeid, ulelement) //expand this UL plus all parent ULs (so the most inner UL is revealed!)
  var obj=ddtreemenu.bycls('float',ulelement.parentNode)[0];
  obj.onclick=function(e){
   var submenu=this.parentNode.getElementsByTagName("ul")[0]
   if (submenu.getAttribute("rel")=="closed"){
    submenu.style.display="block"
    submenu.setAttribute("rel", "open")
    obj.style.backgroundImage="url("+ddtreemenu.openfolder+")"
   }
   else if (submenu.getAttribute("rel")=="open"){
    submenu.style.display="none"
    submenu.setAttribute("rel", "closed")
    obj.style.backgroundImage="url("+ddtreemenu.closefolder+")"
   }
   ddtreemenu.preventpropagate(e)
  }
  ulelement.onclick=function(e){
  ddtreemenu.preventpropagate(e)
 }
}

ddtreemenu.expandSubTree=function(treeid, ulelement){ //expand a UL element and any of its parent ULs
 var rootnode=document.getElementById(treeid)
 var currentnode=ulelement
 var obj=ddtreemenu.bycls('float',ulelement.parentNode)[0];
 currentnode.style.display="block"
 currentnode.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
 while (currentnode!=rootnode){
  if (currentnode.tagName=="UL"){ //if parent node is a UL, expand it too
   currentnode.style.display="block"
   currentnode.setAttribute("rel", "open") //indicate it's open
   obj.style.backgroundImage="url("+ddtreemenu.openfolder+")"
  }
  currentnode=currentnode.parentNode
 }
}

ddtreemenu.flatten=function(treeid, action){ //expand or contract all UL elements
 var ultags=document.getElementById(treeid).getElementsByTagName("ul")
 for (var i=0; i<ultags.length; i++){
  var obj=ddtreemenu.bycls('float',ultags[i].parentNode)[0];
  ultags[i].style.display=(action=="expand")? "block" : "none"
  var relvalue=(action=="expand")? "open" : "closed"
  ultags[i].setAttribute("rel", relvalue)
  obj.style.backgroundImage=(action=="expand")? "url("+ddtreemenu.openfolder+")" : "url("+ddtreemenu.closefolder+")"
 }
}

ddtreemenu.rememberstate=function(treeid, durationdays){ //store index of opened ULs relative to other ULs in Tree into cookie
var ultags=document.getElementById(treeid).getElementsByTagName("ul")
var openuls=new Array()
for (var i=0; i<ultags.length; i++){
if (ultags[i].getAttribute("rel")=="open")
openuls[openuls.length]=i //save the index of the opened UL (relative to the entire list of ULs) as an array element
}
if (openuls.length==0) //if there are no opened ULs to save/persist
openuls[0]="none open" //set array value to string to simply indicate all ULs should persist with state being closed
ddtreemenu.setCookie(treeid, openuls.join(","), durationdays) //populate cookie with value treeid=1,2,3 etc (where 1,2... are the indexes of the opened ULs)
}

////A few utility functions below//////////////////////

ddtreemenu.getCookie=function(Name){ //get cookie value
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}

ddtreemenu.setCookie=function(name, value, days){ //set cookei value
var expireDate = new Date()
//set "expstring" to either future or past date, to set or delete cookie, respectively
var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days))
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}

 ddtreemenu.bycls=function(nme,el){
  for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
   if(reg.test(els[z0].className)){
    ary.push(els[z0]);
   }
  }
  return ary;
 }

ddtreemenu.searcharray=function(thearray, value){ //searches an array for the entered value. If found, delete value from array
var isfound=false
for (var i=0; i<thearray.length; i++){
if (thearray[i]==value){
isfound=true
thearray.shift() //delete this element from array for efficiency sake
break
}
}
return isfound
}

ddtreemenu.preventpropagate=function(e){ //prevent action from bubbling upwards
if (typeof e!="undefined")
e.stopPropagation()
else
event.cancelBubble=true
}

ddtreemenu.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
}
/*]]>*/
</script>
</head>

<body>

<a href="javascript:ddtreemenu.flatten('treemenu1', 'expand')">Expand All</a> | <a href="javascript:ddtreemenu.flatten('treemenu1', 'contact')">Contact All</a>

<ul id="treemenu1" class="treeview">
<li><a href="#" class="link" ></a> Item 1</li>
<li><a href="#" class="link" ></a> Item 2</li>

<li><div class="float" ></div><a href="#" class="float" ></a> Folder 1
	<ul>
	<li><a href="#" class="link" ></a> Sub Item 1.1</li>
	<li><a href="#" class="link" ></a> Sub Item 1.2</li>
	</ul>
</li>
<li>Item 3</li>

<li><div class="float" ></div><a href="#" class="float" ></a> Folder 2
	<ul>
	<li><a href="#" class="link" ></a> Sub Item 2.1</li>
	<li><div class="float" ></div><a href="#" class="float" ></a> Folder 2.1
		<ul>
		<li><a href="#" class="link" ></a> Sub Item 2.1.1</li>
		<li><a href="#" class="link" ></a> Sub Item 2.1.2</li>
		</ul>
	</li>
</ul>
</li>

<li><a href="#" class="link" ></a> Item 4</li>
</ul>


<script type="text/javascript">

//ddtreemenu.createTree(treeid, enablepersist, opt_persist_in_days (default is 1))

ddtreemenu.createTree("treemenu1", true)

</script>
</body>

</html>

Thread: Treemenu (expand button and link separately)

Thread Tools

Search Thread

Treemenu (expand button and link separately)

Bookmarks

Bookmarks

Posting Permissions