I'm having a bit of trouble with a vertical menu.
The two issues I am having are as follows...
1. I need the menu to stay in the same place on all the different pages
2. I created the menu as a separate file and tired to use the include statement on the pages i wanted the menu to show up. Didn't work.
I'm hoping that you guys will be able to take a look at it and help me out.
I'll post the html and css code and give you a link to the site.
CSS
CODE
.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 160px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.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 li ul{ /*SUB MENU STYLE*/
position: absolute;
width: 190px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 50;
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{
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 */
and here is the html, currently have have the menu hard coded on each page i would like to just use the include statement.
CODE
<html>
<head>
<link rel="stylesheet" href="jenn.css" type="text/css">
<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.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
</script>
</head>
<body>
<ul id="verticalmenu" class="glossymenu">
<li><a href="index.html">Home</a></li>
<li><a href="bio.html">Jen's Bio</a></li>
<li><a href="photo.html">Jen's Art Work</a></li>
<li><a href="form.html">Place An Order</a>
<li><a href="" >Friends Pages</a></li>
</ul>
<p align="center">This page is under construction</p>
</body>
</html>
Thanks for taking a look at it.
www.jrockage.com
18 Jun, 2008 - 07:14 PM
|