Üye Girişi Yapınız     


    E-Posta
    

    Şifreniz
    



Şifremi Unuttum


Ana Sayfa Site Hakkında İletişim Ziyaretçi Defteri Döküman İndir Makale Ekle Haber Ekle

     yatay resimli menu yapımı
     mehmetgunay     19.12.2012     08:14:46

 Css kodları ile yatay resimli menu yapımı. 



 <html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>KOD Dünyası.net-Mehmet GÜNAY</title>
<style type="text/css">
h6 {text-align:right;}
body {
padding: 50px;
}
/* Menü için CSS kodu burada başlıyor */
#menu {
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase; /* Tüm yazıları büyük harfe dönüştürür. */
margin: 20px 0;
padding: 0;
list-style-type: none;
background-color: #eee;
font-size: 13px;
height: 40px;
border-top: 2px solid #eee;
border-bottom: 2px solid #ccc;
}
#menu li {
float: left;
margin: 0;
}
#menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
color: #666;
}
#menu li a:hover, #menu li.active a {
background-color: #f5f5f5;
border-bottom: 2px solid #DDD;
color: #999;
}
#menu_zemin ul {margin-left: 12px;}
#menu_zemin {padding: 0 16px 0 0; background: url(images/grey.png) no-repeat right;}
#menu_zemin div {float: left; height: 44px; width: 12px; background: url(images/grey.png) no-repeat left;}
/* Mavi Menu */
#menu_zemin.blue ul {
border-top: 2px solid #356AA0;
border-bottom: 2px solid #204061;
background: #356AA0;}
#menu_zemin.blue a {color: #fff;}
#menu_zemin.blue li a:hover, #menu_wrapper.blue li.active a {color: #90CDFF; background: #3D7BBB; border-bottom: 2px solid #356AA0;}
#menu_zemin.blue {background: url(images/blue.png) no-repeat right;}
#menu_zemin.blue div {background: url(images/blue.png) no-repeat left;}
</style>
</head>
<body>
<div id="menu_zemin" class="blue">
<div class="left"></div>
<ul id="menu">
<li><a href="">Ana Sayfa</a></li>
<li ><a href="">Hakkımızda</a></li>
<li><a href="">Hizmetlerimiz</a></li>
<li><a href="">İletişim</a></li>
</ul>
</div>
</ul>
</div>
<h6>koddunyası.net</h6>
</body>
</html>
 

Facebook'ta Paylaş    
Diğer HTML İçerikleri       Tüm Yazılar        Ana Sayfa


  =>Soru Sorun veya Yorum Yazın...

İsim Giriniz :
  

  =>Yapılan Yorumlar...