Second horizontal suckertreemenu [Archive]

View Full Version : Second horizontal suckertreemenu

wiswag

04-08-2008, 11:44 AM

I need a second horizontal suckertree menu - the first expands/drops down - the second is horizontal only. When I attempt to combine them on one page the second adopts the width attributes of the first. I need to be able to control the width factor which has to be different in each menu. Thanks in advance. :confused:

Nile

04-08-2008, 11:59 AM

Here, lets make sure you did it right, you need to put in here:

var menuids=["treemenu1"]

Then add a , then place in the next ul, example:

var menuids=["treemenu1"],["2"]
Then I'd make another:

<ul id="2">
<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>
<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>

Hope this helps, I need your code to make it really help.

wiswag

04-08-2008, 01:33 PM

Nile

04-08-2008, 09:48 PM

Here, you need to take a look at the html code. It was wrong, you weren't applying any hover on it and thats why it didn't have the hover affect:

<style type="text/css">

.suckertreemenu ul{
margin: 0;
padding: 0;
width: 100%;
list-style-type: none; bold; font-style:normal; font-variant:normal; font-weight:bold; font-size:12px; font-family:Tahoma
}

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

/*Top level menu link items style*/
.suckertreemenu ul li a{
border-left:0px solid white; border-right:1px solid white; border-top:1px solid white; border-bottom:1px solid white; display: block;
width: 125px; /*Width of top level menu link items*/
text-decoration: none;
color: white; padding-left:8px; padding-right:8px; padding-top:1px; padding-bottom:1px
}

/*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: 130px; /* 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: 125px; /*width of sub menu levels*/
color: white;
text-decoration: none;
padding: 1px 5px;
border: 1px solid #ccc;
}

.suckertreemenu ul li a:hover{
background-color: #008080;
color: white;
}

/*Background image for top level menu list links */
.suckertreemenu .mainfoldericon{
background: #2c3169 url('media/arrow-down.gif') no-repeat center right;
}

/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background: #2c3169 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: 2em;
}

/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%;}
* html .suckertreemenu ul li a { height: 1%;}
* html .suckertreemenu ul li ul li { float: left;}
* html .suckertreemenu ul li ul li a{ margin-top:-2px;
/* End */

</style>

<style type="text/css">

.suckertreemenu1 ul{
margin: 0;
padding: 0;
width: 100%;
list-style-type: none; bold; font-style:normal; font-variant:normal; font-weight:bold; font-size:12px; font-family:Tahoma
}

/*Top level list items*/
.suckertreemenu1 ul li{
position: relative;
display: inline;
float: left;
background-color: #2c3169; /*overall menu background color*/
}

/*Top level menu link items style*/
.suckertreemenu1 ul li a{
border-left:0px solid white; border-right:1px solid white; border-top:1px solid white; border-bottom:1px solid white; display: block;
width: 130px; /*Width of top level menu link items*/
text-decoration: none;
color: white; padding-left:8px; padding-right:8px; padding-top:1px; padding-bottom:1px
}

/*1st sub level menu*/
.suckertreemenu1 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)*/
.suckertreemenu1 ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu1 ul li ul li ul{
left: 130px; /* no need to change, as true value set by script */
top: 0;
}

/* Sub level menu links style */
.suckertreemenu1 ul li ul li a{
display: block;
width: 130px; /*width of sub menu levels*/
color: white;
text-decoration: none;
padding: 1px 5px;
border: 1px solid #ccc;
}

.suckertreemenu1 ul li a:hover{
background-color: #008080;
color: white;
}

/*Background image for top level menu list links */
.suckertreemenu1 .mainfoldericon{
background: #2c3169 url('media/arrow-down.gif') no-repeat center right;
}

/*Background image for subsequent level menu list links */
.suckertreemenu1 .subfoldericon{
background: #2c3169 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: 2em;
}

/* Holly Hack for IE \*/
* html .suckertreemenu1 ul li { float: left; height: 1%;}
* html .suckertreemenu1 ul li a { height: 1%;}
* html .suckertreemenu1 ul li ul li { float: left;}
* html .suckertreemenu1 ul li ul li a{ margin-top:-2px;
/* End */

</style>

<script type="text/javascript">

var menuids=["treemenu1","treemenu2"] //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>

</style>

**////HtmlCode 1st menu////**

<div class="suckertreemenu" align="center">>
<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>
<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>

**////HtmlCode 2nd menu////**

<div class="suckertreemenu" align="center">
<ul id="treemenu2">
<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>
<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>

wiswag

04-09-2008, 04:52 PM

Nile

04-09-2008, 11:23 PM

So did my script work?

wiswag

04-11-2008, 08:57 AM

Medyman

04-11-2008, 03:41 PM

I am afraid your coding didn't do what I was looking for. I am trying to get the second menu to have a different width (/*Top level menu link items style*/) from the first. I've tried various permutations without success. Thanks again.

Apply a different class to whatever element you want to increase the size of. Then change the size from that.

Here is an example of what I mean:

<html>
<head>
<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: 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;
}

/* Top level menu with for second menu */
.suckertreemenu #treemenu2 li a {
width:150px;
}

/*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", "treemenu2"] //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>
<h1>First Menu</h1>
<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>
<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>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<br style="clear: left;" />
</div>

<br><br><br><br>
<h1>Second Menu</h1>
<div class="suckertreemenu">
<ul id="treemenu2">
<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>
<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>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<br style="clear: left;" />
</div>

</body>
</html>

The important parts that I added (except for the obvious second menu markup) are highlighted. You'll have to reapply any styling changes you made as well as reset the image paths.

wiswag

04-17-2008, 06:03 PM

Thanks Medyman, however again no success. Am I making some obvious error I can't see for looking? My code as follows:

<style type="text/css">

.suckertreemenu ul{
margin: 0;
padding: 0;
width: 100%;
list-style-type: none; bold; font-style:normal; font-variant:normal; font-weight:bold; font-size:12px; font-family:Tahoma
}

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

/*Top level menu link items style*/
.suckertreemenu ul li a{
border-left:0px solid white; border-right:1px solid white; border-top:1px solid white; border-bottom:1px solid white; display: block;
width: 125px; /*Width of top level menu link items*/
text-decoration: none;
color: white; padding-left:8px; padding-right:8px; padding-top:1px; padding-bottom:1px
}

/* Top level menu with for second menu */
.suckertreemenu #treemenu2 li a {
width:126px;
}

/*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: 130px; /* 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: 125px; /*width of sub menu levels*/
color: white;
text-decoration: none;
padding: 1px 5px;
border: 1px solid #ccc;
}

.suckertreemenu ul li a:hover{
background-color: #008080;
color: white;
}

/*Background image for top level menu list links */
.suckertreemenu .mainfoldericon{
background: #2c3169 url('media/arrow-down.gif') no-repeat center right;
}

/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background: #2c3169 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: 2em;
}

/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%;}
* html .suckertreemenu ul li a { height: 1%;}
* html .suckertreemenu ul li ul li { float: left;}
* html .suckertreemenu ul li ul li a{ margin-top:-2px;
/* End */

</style>

<script type="text/javascript">

var menuids=["treemenu1","treemenu2"] //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>

</style>

</head>

<body>

**////HtmlCode 1st menu////**

<div class="suckertreemenu" align="center">
<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>
<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>

**////HtmlCode 2nd menu////**

<div class="suckertreemenu" align="center">
<ul id="treemenu2">
<li><a href="#" style="border-left: 1px solid black">Name 1</a></li>
<li><a href="#">Name 2</a></li>
<li><a href="#">Name 3</a></li>
<li><a href="#">Name 4</a></li>
<li><a href="#">Name 5</a></li>
<li><a href="#">Name 6</a></li>
</ul>
<br style="clear: left;" />
</div>

</body>

</html>

Nile

04-17-2008, 06:09 PM

Do you want a hover effect for the last one? If you do, I don't think that your doing it right, you didn't include the hover stuff, in the case, it won't show.
Hope this Helps,
Nile

Medyman

04-18-2008, 12:00 AM

Do you want a hover effect for the last one? If you do, I don't think that your doing it right, you didn't include the hover stuff, in the case, it won't show.
Hope this Helps,
Nile

Yea, I'm confused by what you need too. I just reread your first post. You say that you want two menus -- one that drops down and one that doesn't.

So, why even use another instance of the suckerfish menu? You can use any of the other menus (see DD's CSS library for examples).

Nile

04-18-2008, 12:52 AM

Yeah, I mean is your problem that your menu overlaps the dropdown? This can easily be fixed by adding a z-index.