• Locked
1 reply [Last post]
Wed, 2012-02-08 19:01
chenci
chenci's picture
Offline
Last seen: 1 year 14 weeks ago
newbie
Student
Timezone: GMT-3
Joined: 2012-02-08
Posts: 1
Points: 2

Hi, i'm new here, some friends told this site has a lot of expert, so i'm here to ask how this page did the navigation bar with the dynamic hover? I'm just trying to learn how it works, not the exact design.
The only thing i could do was a static one (just like the "Home" in that page) with this code

CSS
#nav {
	width: 960px;
	height: 65px;
	margin: 0 auto;
	padding-top: 10px;
	position:relative;
	overflow:hidden;
	background: url(nav.png) no-repeat; /* the navegation bar*/
}
 
#nav ul {
   clear: left;
   float: left;
   list-style: none;
   margin: 0px;
   padding: 0px;
   position: relative;
   left: 50%;
   text-align: center;
 
}
 
#nav li {
   display:block;
   float:left;
   list-style:none;
   font-style: normal;	
   margin:0;
   padding:0;
   position:relative;
   right:50%;
   background: url(nav-divider.gif) no-repeat 0% 14px;
}
 
#nav li.first a {
	background: url(nav-left.png) left top no-repeat;
	height: 44px;
	margin:0;
	padding: 12px 10px 13px 15px;
	text-decoration: none
}
 
#nav li.first a span {
	background: url(nav-right.png) right top no-repeat;
	font-style: normal;
	padding: 12px 15px 13px 0;
}
 
#nav li.first a span2 {
	background: #d23e2c;
	height: 44px;
	padding: 12px 0 13px 0;
	font-style: normal;	
}
 
#nav li a {
	text-decoration: none;
	font-family: 'Oswald', sans-serif;
	padding:3px 10px;
	font-size: 17px;
	line-height: 44px;
	font-weight: bold;
	color: #FFFFFF;
	font-style: normal;	
	text-transform: uppercase;
}

HTML
<div id="nav">
	<ul>
	<li class="first"><a href="index.php" title=""><span><span2>Menu</span2></span></a></li>
	<li>...</li>
	</ul>
</div>

But when i use the same code to hover, it doesn't work well: if you point the cursor in the left of an menu item, it shows only nav-left.png and nav-right.png (leaving the middle in blank), only if you point the cursor in the center, you can see the complete hover.
Hope someone knows what i'm trying to explain because for me is very difficult to explain. Thanks for your time.

Top
Tags:
Fri, 2012-02-10 10:23
#1
balajidesign
balajidesign's picture
Offline
Last seen: 26 weeks 2 days ago
Enthusiast
Timezone: GMT+5.5
Joined: 2012-01-31
Posts: 116
Points: 124

why you specify on span2. is

why you specify on span2. is this html5 code??

Top
  • Locked