This site requires JavaScript turned on. Your browser does not support JavaScript, or it has JavaScript disabled. If you want to correctly view all the pages on this site, please upgrade your browser or enable JavaScript support. Thank you for taking the time to visit.

« Links open in new window/tab »

Free Site Search Engine at JRank.org

« Links open in new window/tab »

Web Design & Development

Monitor Page for Changes

Share |

CSS - Vertical Menu List
PayneLess Designs

Description: This is a lean CSS vertical menu. The markup is entirely based on an ordinary HTML list, with support for 1 level of nested lists. The nested lists are transformed into 2nd level drop down menus that appears dynamically onmouseover. The entire menu interface is styled via the external CSS, even the arrow image that appears automatically beside menu items that carry a 2nd level. The JavaScript is for Internet Explorer.

Directions:

Step 1: Add the following code to the <head> section of your page:

<link rel="stylesheet" type="text/css" href="cssverticalmenu.css"/>
<script type="text/javascript" src="cssverticalmenu.js">
/***********************************************
* CSS Vertical List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.javascriptkit.com/script/script2/verticalmenu.shtml
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
</script>

It references two external files and 3 images:
cssverticalmenu.css
cssverticalmenu.js
The three images:
- Download 3 images: (DO NOT HOTLINK):
- glossybackyk6.gif
- glossyback2sg4.gif
- arrowhw9.gif

Step 2: Add the below HTML to your page, which contain your menu links:

<ul id="verticalmenu" class="glossymenu">
<li><a href="http://www.javascriptkit.com/">JavaScript Kit</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript Tutorials</a></li>
<li><a href="#">References</a>
<ul>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.javascriptkit.com/dhtmltutors/cssreference.shtml">CSS Reference</a></li>
</ul>
</li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >DHTML/ CSS Tutorials</a></li>
<li><a href="http://www.javascriptkit.com/howto/">Web Design Tutorials</a></li>
<li><a href="#" >Helpful Resources</a>
<ul>
<li><a href="http://www.dynamicdrive.com">Dynamic HTML</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/">Favicon Generator</a></li>
</ul>
</li>
</ul>

Step 3: Add the following code to a blank HTML page named cssverticalmenu.css:

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li ul{ /*SUB MENU STYLE*/
position: absolute;
width: 190px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: none;
filter:alpha(opacity=100);
-moz-opacity:1;
}
.glossymenu li a{
background: white url(glossyback.gif) repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu .arrowdiv{
position: absolute;
right: 2px;
background: transparent url(arrow.gif) no-repeat center right;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url(glossyback2.gif);
}
/* Holly Hack for IE \*/
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
/* End */

Step 4: Add the following code to a blank HTML page named cssverticalmenu.js:

var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas
var submenuoffset=-2 //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)

If you have found any services on my site to be beneficial and would like to donate, please feel free to donate ANY amount you want. Thank you very much.

« Links open in new window/tab »

« Links open in new window/tab »

Monitor Page for Changes

CSS - Vertical Menu ListPayneLess Designs

Directions:

CSS - Vertical Menu List
PayneLess Designs