suckertree+glossy menu

**InsertName** · 07-17-2008, 09:58 PM

Hello everyone,

I'm currently working on my website and I thought it would look nice if I used the glossy vertical menu effect combined with the suckertree vertical menu. At the moment, I'm experiencing this problem:

I was wondering if there's a way to make the menu that extends to the submenu also have the glossy effect instead of being white(bottom 2 menus)?

Code:

<html>
<head>
<title>Test</title>
<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: 180px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
	
.suckerdiv ul li{
position: relative;
}
	
/*Sub level menu items */
.suckerdiv ul li ul{
position: absolute;
width: 180px; /*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-image: url(glossyback.gif);
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

.suckerdiv ul li a:visited{
color: black;
}

.suckerdiv ul li a:hover{
background-image: url(glossyback2.gif);
}

.suckerdiv .subfolderstyle{
background: url(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=["suckertree"] //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].parentNode.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-1].getElementsByTagName("a")[0].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>
<style type="text/css">

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

.glossymenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 170px;
border: 1px solid #9A9A9A;
border-bottom-width: 0;
}

.glossymenu li a{
background: white url(glossyback.gif) repeat-x bottom left;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: black;
display: block;
width: auto;
padding: 3px 0;
padding-left: 10px;
text-decoration: none;

}


* html .glossymenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 180px;
}

.glossymenu li a:visited, .glossymenu li a:active{
color: black;
}

.glossymenu li a:hover{
background-image: url(glossyback2.gif);
}

</style>
</head>
<body>
<table width="180" align="left">
	<tr>
		<td height="5">
			
		</td>
	</tr>
	<tr>
		<td>
			<div class="suckerdiv">
			<ul id="suckertree" class="glossymenu">
			<li><a href="#">Text</a></li>
			<li><a href="#">Text</a></li>
			<li><a href="#">Text</a></li>
			<li><a href="#">Text</a>
				<ul class="glossymenu">
				<li><a href="#">Text</a></li>
				<li><a href="#">Text</a></li>
				<li><a href="#">Text</a></li>
				<li><a href="#l">Text</a></li>
				</ul>
			</li>
			<li><a href="#">Text</a>
				<ul class="glossymenu">
				<li><a href="#">Text</a></li>
				<li><a href="#">Text</a></li>
				<li><a href="#">Text</a></li>
				<li><a href="#">Text</a></li>
				</ul>
			</li>
			</div>
		</td>
	</tr>
</table>
</body>
</html>

**Nile** · 07-17-2008, 10:07 PM

Whats the problem?

Please post a link to the page on your site that contains the problematic script so we can check it out.

**InsertName** · 07-17-2008, 10:11 PM

What do you mean? Post it on the internet or link it to elsewhere?

My problem (if it can be fixed) is that I can't find way to add a glossy effect to the white area on the menu.

I used these codes:
http://www.dynamicdrive.com/style/cs...menu-vertical/
http://www.dynamicdrive.com/style/cs...vertical-menu/ (modified the blue gloss to silver)

**Nile** · 07-18-2008, 01:31 AM

Yes, post it on the internet if you wouldn't mind.

**InsertName** · 07-18-2008, 02:04 PM

I uploaded here:

Thread: suckertree+glossy menu

Thread Tools

Search Thread

suckertree+glossy menu

Bookmarks

Bookmarks

Posting Permissions