SunQuest
 
           Advanced Web Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
 
User Name:
Password:
Remember me
 
Go Back   Dev Articles Community ForumsWeb DesignAdvanced Web Development

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Display Modes
 
Unread Dev Articles Community Forums Sponsor:
SlickEdit: Code in over 40 languages across 7 platforms. SlickEdit’s unmatched power, speed, and flexibility allows even the most accomplished developers to write better code faster. Download a free trial today!
  #1  
Old December 9th, 2003, 02:32 PM
INF INF is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Nov 2003
Location: Woodland, WA
Posts: 26 INF User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Vertical List Menu With Hovering Borders?

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?

Reply With Quote
  #2  
Old December 9th, 2003, 02:56 PM
INF INF is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Nov 2003
Location: Woodland, WA
Posts: 26 INF User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Looks like I found a bug with the Code posting.
Code:
cursor:pointer;

should be
Code:
cursor: pointer;


Reply With Quote
  #3  
Old December 9th, 2003, 03:08 PM
INF INF is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Nov 2003
Location: Woodland, WA
Posts: 26 INF User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Duh!
Code:
display:block;

Here's the code for those interested.
CSS:
Code:
#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 {
	color:#FFFFFF;
	width:145px;
	text-decoration:none;
	font-family:Arial;
	font-weight:bold;
	font-size:10pt;
	display:block;
	border:1px solid #A59276;
	display:block;
	margin:0 1px;
}
#LeftMenu a:hover {
	border:1px solid #CEC1AA;
}

HTML
Code:
<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>

Reply With Quote
Reply

Viewing: Dev Articles Community ForumsWeb DesignAdvanced Web Development > Vertical List Menu With Hovering Borders?


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 6 hosted by Hostway