I'm trying to re-create a menu with CSS to replace a JavaScript Rollover image menu.
I've made one that works using <div>'s and JavaScript for each item. But I'd rather use a list (<ul>) as the <div>'s create alot of un-neccesary code.
I'm very close but am stuck trying to get the entire list item to display a border when the link is hovered. Basically like the
horizontal list menu example stumpy posted. If the text were all the same length, I could assign padding to the <a> element, but un-fortunately the text is all different lengths.
Take a look here for the code/example
I've put both the div menu which shows what I'm going for, and my new <ul> menu. All of the CSS is in the source.
If you don't feel like looking there, here's the code:
Code:
<html>
<head>
<title>New Menu Tests</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* Original div menu styles */
.MenuWrap {
width:150px;
background:#A59276;
color:#FFFFFF;
}
.Menu {
font-family:Arial;
font-weight:bold;
font-size:10pt;
border-top:1px solid #AC9B81;
border-bottom:1px solid #AC9B81;
border-left:1px solid #A59276;
border-right:1px solid #A59276;
}
.MenuItem {
text-align:center;
background:#A59276;
border:1px solid #A59276;
margin:1px;
}
.MenuItemOver {
text-align:center;
border:1px solid #CEC1AA;
margin:1px;
cursor:pointer;
}
.MenuItem a, .MenuItemOver a, .MenuItemOver a:hover {
color:#FFFFFF;
text-decoration:none;
}
/* */
/**** New List Styles ******/
#LeftMenu {
float:left;
width:150px;
background:#AC9B81;
}
#LeftMenu ul {
list-style : none;
padding : 0;
margin : 0;
border : none;
}
#LeftMenu li {
padding : 2px 0px;
margin : 2px 0;
background-color : #A59276;
text-align:center;
}
#LeftMenu a {
width:100%;
/*padding : 3px 39px 2px;*/
color:#FFFFFF;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:10pt;
}
#LeftMenu li a:hover {
border:1px solid #CEC1AA;
}
/* */
</style>
</head>
<body>
<h4>Old Menu With <div>'s</h4>
<div class="MenuWrap">
<div class="Menu">
<div class="MenuItem" onMouseOver="this.className='MenuItemOver'" onMouseOut="this.className='MenuItem'" onClick="location.href='/'">
<a href="/">Home</a>
</div>
</div>
<div class="Menu">
<div class="MenuItem" onMouseOver="this.className='MenuItemOver'" onMouseOut="this.className='MenuItem'" onClick="location.href='/about_alpacas/'">
<a href="/about_alpacas/">About Alpacas</a>
</div>
</div>
<div class="Menu">
<div class="MenuItem" onMouseOver="this.className='MenuItemOver'" onMouseOut="this.className='MenuItem'" onClick="location.href='/livestock_investment/'">
<a href="/livestock_investment/">Livestock Investment</a>
</div>
</div>
<div class="Menu">
<div class="MenuItem" onMouseOver="this.className='MenuItemOver'" onMouseOut="this.className='MenuItem'" onClick="location.href='/start_a_farm/'">
<a href="/start_a_farm/">Starting A Farm</a>
</div>
</div>
<div class="Menu">
<div class="MenuItem" onMouseOver="this.className='MenuItemOver'" onMouseOut="this.className='MenuItem'" onClick="location.href='/for_sale/'">
<a href="/for_sale/">Alpacas For Sale</a>
</div>
</div>
<div class="Menu">
<div class="MenuItem" onMouseOver="this.className='MenuItemOver'" onMouseOut="this.className='MenuItem'" onClick="location.href='/herd_sires/'">
<a href="/herd_sires/">Herd Sires</a>
</div>
</div>
<div class="Menu">
<div class="MenuItem" onMouseOver="this.className='MenuItemOver'" onMouseOut="this.className='MenuItem'" onClick="location.href='/fiber_products/'">
<a href="/fiber_products/">Fiber</a>
</div>
</div>
<div class="Menu">
<div class="MenuItem" onMouseOver="this.className='MenuItemOver'" onMouseOut="this.className='MenuItem'" onClick="location.href='/contact/'">
<a href="/contact/">Contact Information</a>
</div>
</div>
<div class="Menu">
<div class="MenuItem" onMouseOver="this.className='MenuItemOver'" onMouseOut="this.className='MenuItem'" onClick="location.href='/membership_links/'">
<a href="/membership_links/">Membership/Links</a>
</div>
</div>
<div class="Menu">
<div class="MenuItem" onMouseOver="this.className='MenuItemOver'" onMouseOut="this.className='MenuItem'" onClick="location.href='/calendar/'">
<a href="/calendar/">Calendar</a>
</div>
</div>
<div class="Menu">
<div class="MenuItem" onMouseOver="this.className='MenuItemOver'" onMouseOut="this.className='MenuItem'" onClick="location.href='/store/'">
<a href="/store/">Store</a>
</div>
</div>
</div><!-- END class="MenuWrap" -->
<h4>New List Menu</h4>
<div id="LeftMenu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about_alpacas/">About Alpacas</a></li>
<li><a href="/livestock_investment/">Livestock Investment</a></li>
<li><a href="/start_a_farm/">Starting A Farm</a></li>
<li><a href="/for_sale/">Alpacas For Sale</a></li>
<li><a href="/herd_sires/">Herd Sires</a></li>
<li><a href="/fiber_products/">Fiber</a></li>
<li><a href="/contact/">Contact Information</a></li>
<li><a href="/membership_links/">Membership/Links</a></li>
<li><a href="/calendar/">Calendar</a></li>
<li><a href="/store/">Store</a></li>
</ul>
</div>
</body>
</html>
I should add that I know I can do this with
Code:
<li class="MenuItem" onMouseOver="this.className='MenuItemOver'" onMouseOut="this.className='MenuItem'" onClick="location.href='/'"><a href="/">Home</a></li>
But I was looking to do it without JavaScript. Any Suggestions?
Dev Articles Community Forums Sponsor:
December 9th, 2003, 02:32 PM
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
