Ü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

     CSS ile yatay açılır menü yapımı
     admin     16.12.2013     10:44:29

Yapı olarak daha önce yapmış olduğumuz dikey açılır menuye benzemektedir. Burada ana menu elemanları inlene olarak görüntülenmektedir. Ana elemanların alt menüleri ise block level olarak görüntülenmektedir. Web sitelerinizde kullanabileceğiniz güzel bir menü örneğini sizler için yapıp yayınlıyorum. Dikkat etmeni<z gereken bir konu var. Menüyü bir kaç farklı tarayıcıda test etmeyi unutmayınız. Taraıcı uyumluluğu için CSS sıfırlama gerekebilir.



Ekran Çıktısı:

Kodlar :

<html>
<head>
 <title>CSS-Yatay Açılır Menü</title>
 <style type="text/css">
  body { margin:0px; padding:0px; }
  #menum ul {
    list-style:none;
margin:0px; padding:0px; }
  #menum li {
    float:left; position:relative; width:150px; }
  #menum li ul {
    display:none; left:0; position:absolute; top:21px; }
  #menum ul li a{
    background:#EFEFEF;
    border-color:#CCCCCC #888888 #555555 #BBBBBB;
    border-style:solid;
    color:#000;
    display:block;
    font:bold 12px Arial, Helvetica, Sans-serif;
    margin:0px;
    padding:2px 3px;
   text-decoration:none;
    line-height:16px; }
  #menum ul li a:hover {
    background-color:#FFF; color:#FF0000; }
  #menum li:hover ul { display:block; }
 </style>
</head>
<body>
<div id="menum">
<ul>
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Hakkımızda</a>
  <ul>
    <li><a href="#">Şirket Tarihçesi</a></li>
<li><a href="#">Yöneticilerimiz</a></li>
<li><a href="#">Çalışanlarımız</a></li>
<li><a href="#">Faaliyetlerimiz</a></li>
  </ul>
</li>
<li><a href="#">Hizmetlerimiz</a>
  <ul>
    <li><a href="#">Web Tasarım</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Logo Tasarım</a></li>
<li><a href="#">Danışmanlık</a></li>
  </ul>  
<li><a href="#">Referanslarımız</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>
</body>
</html>

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


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

İsim Giriniz :
  

  =>Yapılan Yorumlar...

onur    04.01.2015    00:33:59

elinize sağlık


yiğit    10.08.2016    15:18:15

 kodlarda hata var hakkımızda ’dan önce açılan li tag’ı kapatılmamış


ayhan    19.08.2016    09:38:11

hata düzeltilmiştir @yiğit. Uyarı için teşekkürler.


ali    15.12.2016    23:52:06

çok güzel teşekkürler