BABA: DİKEY AÇILIR MENÜ DEMO

.menum ul{
 margin:0;/*UL çerçevesinin dışından boşluğunu yok eder.*/
 padding:0;/*UL çerçevesinin içerden boşluğunu yok eder.*/
 list-style:none;/*Lİ'lerin kenarlarındaki stili(örneğin yuvarlak gibi) kaldırır.*/
 width:150px;/*UL'nin genişliğini 150px olarak ayarlar*/
 border-bottom:1px solid #000;/*UL'nin sadece alt kenar özelliğini belirler.*/
}
.menum li{
 position:relative;/*Katmanın yerinin bir önceki katman esas alınarak belirlenmesini sağlar. Burada Lİ özelliği UL'yi esas alarak yerini belirler.*/
}
.menum li ul{/*menum'ün içindeki Lİ'nin içindeki UL için class tanımlaması*/
 position:absolute;/*Katmanın yerini esas pencere olarak alır. Yani yeri nere ise orada konumlanır.*/
 list-style:none;/*Lİ'lerin kenarlarındaki stili(örneğin yuvarlak gibi) kaldırır.*/
 left:149px;/*Soldan 149 px boşluk bırakır. 1px az olmasının sebebi border'dandır.*/
 width:150px;/*Lİ'nin içerisindeki UL'nin genişliği 150 px yapılır.*/
 display:none;/*menu->li->ul sayfa açıldığında gözükmesini engeller.*/
 top:0;/*Yukarıdan boşluğu siler*/
}

.menum li ul li ul {
   position:absolute;
   list-style:none;
   left:149px;
   width:150px;
   display:none;
   top:0; }
.menum li a{/*menu->li->a yani menu'nun içindeki linklere stil verilir*/
 display:block;/*Linkler alt alta gösterilir*/
 text-decoration:none;/*Linklerin alt çizgisi kaldırılır*/
 background-color:#9CF;/*Linkelere arka plan rengi verilir*/
 color:#000;/*Linklerin yazı rengi siyah olarak ayarlanır*/
 font:bold 13px Verdana, Geneva, sans-serif;/*Font özellikleri verilir*/
 padding:5px;/*Linklerin çerçevenin içinden boşluğu 5px olarak ayarlanır*/
 border:1px solid #000;/*Linkelere çerçeve özelliği verilir*/
 border-bottom:0;/*Linklerin alt çerçevesi kaldırılır*/
}
.menum li a:hover{/*menu'nun içindeki Lİ'nin içindeki linkerin üzerine gelindiğinde uygulanacak stiller*/
 background-color:#012D58;/*Linkin arkaplan rengini değiştir*/
 color:#FF0;/*Linkin yaz rengini değiştir.*/
}
 li:hover ul{/*Menu'nun içindeki ana Lİ'lerin üzerine gelince alt menüsü (yani UL'si) varsa göstermesi için stil uygulanır*/
 display:block;/*Menu'nun içindeki Lİ'nin içindeki alt menu olarak olan li->ul lerin alt menüsü varsa onların açılmasını sağlar*/
}
   li ul li:hover ul {display:block;}/*ie 7 ve altındaki tarayıcı uyumsuzluklarını gidermek için bu kodları kullandık*/
* html ul li{
float:left;
height:1%;
}
* html ul li a{
height:1%;
}
</style>

<div class="menum">
  <ul>
    <li><a href="#">Anasayfa</a></li>
    <li><a href="#">Hakkımızda</a>
      <ul>
        <li><a href="#">Faaliyetlerimiz</a>

<li><a href="#">Şirket Tarihçesi</a></li>
        <li><a href="#">Yöneticilerimiz</a></li>
        <li><a href="#">Çalışanlarımız</a>
      <ul>
        <li><a href="#">Çalışanlarımız1</a>
        <li><a href="#">Çalışanlarımız2</a>
        <li><a href="#">Çalışanlarımız3</a>
      </ul>
    </li>
      </ul>

<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>
    <li><a href="#">Referanslarımız</a></li>
    <li><a href="#">İletişim</a></li>
  </ul>
</div>

BABA

31 Temmuz 2017 Pazartesi

DİKEY AÇILIR MENÜ DEMO

Hiç yorum yok:

Yorum Gönder