Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Modifying arrow size in Vertical List Menu

    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:

    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 -->
    Code:
    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 */
    Code:
    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)

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    A link to your page would be useful.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's still in testing so I haven't posted it live on the Internet yet.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •