...

View Full Version : Modifying arrow size in Vertical List Menu



esenger
09-14-2008, 06:41 AM
In the Vertical List Menu on this site, what would be the best way to increase the size of the arrows indicating a sub-menu exists? I've tried enlarging the gif, but that pushes it off the menu so that it is no longer seen. It's also not centering within the menu item if the menu item wraps to two lines.

Thanks!

Here's the code:


HTML:

<!-- #BeginLibraryItem "/Library/Menu.lbi" --><ul id="verticalmenu" class="glossymenu">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Industry-Specific Solutions</a>
<ul>
<li><a href="#">Education</a></li>
<li><a href="#">Legal</a></li>
<li><a href="#">Non-Profit</a></li>
</ul>
</li>
<li><a href="#">Technical Expertise</a></li>
<li><a href="#">Contact Us</a></li>
</ul><!-- #EndLibraryItem -->


CSS:

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px;
border: 0px solid white;
border-bottom: 2px solid white;
}

.glossymenu li{
position: relative;
border: 0px solid white;
border-top: 2px solid white;
}

.glossymenu li a{
font: bold 14px Verdana, Helvetica, sans-serif;
color: #000066;
display: block;
width: auto;
padding: 10px 0;
padding-left: 10px;
text-decoration: none;
background-color: #CEDBF0;
}

.glossymenu li ul{ /*SUB MENU STYLE*/
position: absolute;
width: 190px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: none;
}

.glossymenu li ul li{
float: left;
}

.glossymenu li ul a{
width: 180px; /*WIDTH OF SUB MENU ITEMS - 10px padding-left for A elements */
}

.glossymenu .arrowdiv{
position: absolute;
right: 2px;
background: transparent url(arrow.gif) no-repeat center right;
}

.glossymenu li a:visited, .glossymenu li a:active{
}

.glossymenu li a:hover{
background-color: #000066;
color: #FFFFFF;
}

/* Holly Hack for IE \*/
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
/* End */


JS:

var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas
var submenuoffset=0 //Offset of submenus from main menu. Default is -2 pixels.

function createcssmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
var spanref=document.createElement("span")
spanref.className="arrowdiv"
spanref.innerHTML="&nbsp;&nbsp;"
ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.left=this.parentNode.offsetWidth+submenuoffset+"px"
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
}
}


if (window.addEventListener)
window.addEventListener("load", createcssmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu)

abduraooft
09-14-2008, 09:37 AM
A link to your page would be useful.

esenger
09-14-2008, 04:53 PM
It's still in testing so I haven't posted it live on the Internet yet.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum