CSS Codes
CSS Layouts
Results 1 to 3 of 3

Thread: Help with suckertree menu

  1. 12-20-2006, 06:58 AM #1
    webserver
    webserver is offline New Comer (less than 5 posts)
    Join Date
    Dec 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry Help with suckertree menu

    PLZ.. who can hlep me with this code. My problem with submenu i can not click on submenu. plz copy and check this code for all submenu..plz

    code:
    Code:
    <HTML>
<HEAD>
<TITLE>I am looking to create web site</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1256">
<META content="Microsoft FrontPage 6.0" name=GENERATOR>
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: right;
background-color: #F3F3F3; /*overall menu background color*/
}

/*Top level menu link items style*/
.suckertreemenu ul li a{
display: block;
width: 110px; /*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: right; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
/* End */

table.MsoTableGrid
	{border:1.0pt solid windowtext;
	text-align:right;
	font-size:10.0pt;
	font-family:"Times New Roman";
	}
</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(){
    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>
	
</HEAD>

<BODY vLink=#4F7FE5 link=#4F7FE5 bgColor=#ffffff 
leftMargin=0 topMargin=0 onload=" dynAnimation()" marginheight="0" marginwidth="0">
<DIV align=center>
<DIV align=center>
<TABLE cellSpacing=0 cellPadding=0 border=3 width="780" height="805" bordercolor="#89BEE2" ?>
  <!-- MSTableType="layout" -->
    <tr>
    <TD vAlign=top align=middle style="border-width:3px; border-style:solid; " bordercolor="#89BEE2" height="754">
      <DIV align=center>
      <TABLE id=Table_01 cellSpacing=0 cellPadding=0 width=591 border=0 height="91%">
        <!-- MSTableType="nolayout" -->
		<tr>
          <TD height="91%">
			<p align="center">

<div class="suckertreemenu">
<ul id="treemenu1">
<li><a href="#" style="border-left: 1px solid black">home page</a></li>
<li><a href="#">example1</a>
   <ul>
<li><a href="#">aaa</a>
    <ul>
    <LI><A href="#">aa1</A>
    <LI><A href="#">aa2</A>
    <LI><A href="#">aa3</A>
    <LI><A href="#">aa4</A>
    </ul>
    </li>
<li><a href="#">example2</a>
    <ul>
    <li><a href="#">aa1</a></li>
    <li><a href="#">aa2</a></li>
    <li><a href="#">aa3</a></li>
    <li><a href="#">aa4</a></li>
   </ul>
   </li>
   
<li><a href="#">example3</a>
    <ul>
    <li><a href="#">aa1</a></li>
    <li><a href="#">aa2</a></li>
    <li><a href="#">aa3</a></li>
    <li><a href="#">aa3</a></li>
   </ul>
   </li>
   
<li><a href="#">example4</a>
    <ul>
    <li><a href="#">aa1</a></li>
    <li><a href="#">aa2</a></li>
    <li><a href="#">aa3</a></li>
    <li><a href="#">aa4</a></li>
   </ul>
   </li>
   
<li><a href="#">example5</a>
    <ul>
    <li><a href="#">aa1</a></li>
    <li><a href="#">aa2</a></li>
    <li><a href="#">aa3</a></li>
    <li><a href="#">aa4</a></li>
   </ul>
   </li>
   
<li><a href="#">example6</a>
    <ul>
    <li><a href="#">aa1</a></li>
    <li><a href="#">aa2</a></li>
    <li><a href="#">aa3</a></li>
    <li><a href="#">aa4</a></li>
   </ul>
   </li>
   
<li><a href="#">example7</a>
    <ul>
    <li><a href="#">aa1</a></li>
    <li><a href="#">aa2</a></li>
    <li><a href="#">aa3</a></li>
    <li><a href="#">aa4</a></li>
   </ul>
   </li>
   
<li><a href="#">example8</a>
    <ul>
    <li><a href="#">aa1</a></li>
    <li><a href="#">aa2</a></li>
    <li><a href="#">aa3</a></li>
    <li><a href="#">aa4</a></li>
   </ul>
   </li>
   
<li><a href="#">example9</a>
    <ul>
    <li><a href="#">aa1</a></li>
    <li><a href="#">aa2</a></li>
    <li><a href="#">aa3</a></li>
    <li><a href="#">aa4</a></li>
   </ul>
   </li>
   
<li><a href="#">example10</a>
    <ul>
    <li><a href="#">aa1</a></li>
    <li><a href="#">aa2</a></li>
    <li><a href="#">aa3</a></li>
    <li><a href="#">aa4</a></li>
   </ul>
   </li>
   
<li><a href="#">example11</a>
    <ul>
    <li><a href="#">aa1</a></li>
    <li><a href="#">aa2</a></li>
    <li><a href="#">aa3</a></li>
    <li><a href="#">aa4</a></li>
   </ul>
   </li>
   
<li><a href="#">example12</a>
    <ul>
    <li><a href="#">aa1</a></li>
    <li><a href="#">aa2</a></li>
    <li><a href="#">aa3</a></li>
    <li><a href="#">aa4</a></li>
   </ul>
   </li>
   
<li><a href="#">example13</a>
    <ul>
    <li><a href="#">aa1</a></li>
    <li><a href="#">aa2</a></li>
    <li><a href="#">aa3</a></li>
    <li><a href="#">aa4</a></li>
   </ul>
   </li>
   </ul>
   

<li><a href="#">example2</a>
  <ul>
  <li><a href="#">aaa1</a></li>
      <ul>
    <li><a href="#">aa1</a></li>
    <li><a href="#">aa2</a></li>
    <li><a href="#">aa2</a></li>
    <li><a href="#">aa3</a></li>
   </ul>

  <li><a href="#">example2</a></li>
      <ul>
    <li><a href="#">aa1</a></li>
    <li><a href="#">aa2</a></li>
    <li><a href="#">aa2</a></li>
    <li><a href="#">aa3</a></li>
   </ul>

  <li><a href="#">example3</a></li>
      <ul>
    <li><a href="#">aa1</a></li>
    <li><a href="#">aa2</a></li>
    <li><a href="#">aa2</a></li>
    <li><a href="#">aa3</a></li>
   </ul>

  <li><a href="#">example4</a></li>
  <li><a href="#">example5</a></li>
  <li><a href="#">example6</a></li>
  <li><a href="#">example7</a></li>
  <li><a href="#">example8</a></li>
  <li><a href="#">example9</a></li>
  <li><a href="#">example10</a></li>
  </ul>
</li>
<li><a href="#">example5</a></li>
<li><a href="#">example6</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>
</ul>
<br style="clear: right;" />
</div>
</p>
			<TABLE id=Table_01 
            style="border-color:#89BEE2; border-width:3px; BORDER-COLLAPSE: collapse" 
            borderColor=#111111 height="79%" cellSpacing=0 cellPadding=0 
            width="100%" border=1>
              <TBODY>
              <TR>
             
              
              
              
              </SCRIPT>             
                <TD vAlign=top align=middle>
				&nbsp;<p>&nbsp;&nbsp;</TD></TR></TBODY></TABLE></TD>
		</tr>
		<tr>
          
      		<p align="center"></TABLE></DIV></TD>
    </tr>
	<tr>
		<td width="772" height="45">&nbsp;</td>
		</tr>
</TABLE></DIV></DIV>
</BODY>
</HTML>
    Reply With Quote Reply With Quote
  2. 12-20-2006, 08:08 AM #2
    Arci
    Arci is offline Junior Coders
    Join Date
    Dec 2006
    Location
    Germany
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    sure you CAN click on submenu! but you have to set your hrefs to the corresponding pages... if you link to "#" as in your code there wont happen anything

    try to replace # in your href="#" with available pages.
    Reply With Quote Reply With Quote
  3. 12-20-2006, 10:45 AM #3
    webserver
    webserver is offline New Comer (less than 5 posts)
    Join Date
    Dec 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry Still the problem

    Thanks Mr.Arci for answer,but i stil have problem try to click on example1 then go to example3 or any submenu you can not..i put the herfs but stil no change.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

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
  •  

Forum Rules