Yorum yok ↓
Yukarıdaki menü css ile harika bir şekilde kodlanmış peki bu menü nasıl yapılmış İşte kodlarımız
HTML KODLARIMIZ
<ul id="topnav"> <li class="home"><a href="index.htm">Home</a></li> <li class="about"><a href="about.htm">About Us</a></li> <li class="services"><a href="services.htm">Services</a></li> <li class="portfolio"><a href="portfolio.htm">Portfolio</a></li> <li class="contact"><a href="contact.htm">Contact</a></li> <li class="blog"><a href="blog.htm">Blog</a></li> </ul>
CSS KODLARIMIZ
ul#topnav {
margin: 0; padding: 0;
list-style: none;
float: left;
width: 960px;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
}
/*--CSS Sprites - Default State--*/
ul#topnav a {
float: left;
display: block;
height: 58px; /*--Specify height of navigation--*/
text-indent: -99999px; /*--Shoot the text off the page--*/
background-position: left top;
}
/*--CSS Sprites - Hover State--*/
ul#topnav a:hover {
background-position: left -58px;
}
/*--Assign an image and width to each link--*/
ul#topnav li.home a {
background-image: url(home_a.jpg);
width: 120px;
}
ul#topnav li.about a {
background-image: url(about_a.jpg);
width: 147px;
}
ul#topnav li.services a {
background-image: url(services_a.jpg);
width: 157px;
}
ul#topnav li.portfolio a {
background-image: url(portfolio_a.jpg);
width: 182px;
}
ul#topnav li.contact a {
background-image: url(contact_a.jpg);
width: 179px;
}
ul#topnav li.blog a {
background-image: url(blog_a.jpg);
width: 175px;
}
#home li.home a, /*--Home Page > Home Link--*/
#about li.about a, /*--About Page > About Link--*/
#services li.services a, /*--Services Page > Services Link--*/
#portfolio li.portfolio a, /*--Portfolio Page > Portfolio Link--*/
#contact li.contact a, /*--Contact Page > Contact Link--*/
#blog li.blog a /*--Blog Page > Blog Link--*/
{
background-position: left bottom;
}
NOT : Aktif Olmasını istediÄŸimiz menünün body tagına id eklememiz gerekmektedir . Örnek : <body id=”home”> , <body id=”about”> gibi…
