Ü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 Sekmeli Menu Yapımı
     admin     14.03.2012     16:48:51

Merhaba. Yapacağımız menu yatay ve sekmelereden oluşacaktır. (VB’teki Tab kontrolüne benzetebilirsiniz.) Bu işlem için UL sırasız liste etiketini kullanacağız. Normalde liste elemanları alt alta sıralanırlar. Biz bu durumu yataya çevirmek için LI etiketinin display özellğini inline olarak ayarlıyoruz. Diğer özellikler ise bildiğiniz CSS özellikleridir. Bu özelliklerle menu elemanlarının nasıl görüntüleneceğini ayarlıyoruz. Program kodları aşağıdaki gibidir. Detay için başlığa tıklayınız.



Merhaba. Yapacağımız menu yatay ve sekmelereden oluşacaktır. (VB’teki Tab kontrolüne benzetebilirsiniz.) Bu işlem için UL sırasız liste etiketini kullanacağız. Normalde liste elemanları alt alta sıralanırlar. Biz bu durumu yataya çevirmek için LI etiketinin display özellğini inline olarak ayarlıyoruz.  Diğer özellikler ise bildiğiniz CSS özellikleridir. Bu özelliklerle menu elemanlarının nasıl görüntüleneceğini ayarlıyoruz.  Program kodları aşağıdaki gibidir. Detay için başlığa tıklayınız.

 

<HTML>
<HEAD>
<TITLE>SEKMELI (TAB) MENÜ</TITLE>
<STYLE TYPE="TEXT/CSS">
.TAB{  //Sırasız liste etiketinin özellikleri
PADDING: 3px 0;
MARGIN-LEFT: 0;
FONT: BOLD 12px VERDANA;
BORDER-BOTTOM: 1px SOLID GRAY;
LIST-STYLE-TYPE: NONE;
TEXT-ALIGN: LEFT; /*MENÜNÜN KONUMUNU SOLA, ORTAYA VEYA SAĞA HIZALANABILIR*/
}
.TAB LI{  //Liste elemanları
DISPLAY: INLINE;
MARGIN: 0;
}
.TAB LI A{  //Linklerin normal hali.
TEXT-DECORATION: NONE;
PADDING: 3px 7px;
MARGIN-RIGHT: 3px;
BORDER: 1px SOLID GRAY;
BORDER-BOTTOM: NONE;
BACKGROUND-COLOR: #F6FFD5;
COLOR: #2D2B2B;
}
.TAB LI A:VISITED{  //Ziyaret edilmiş linkler
COLOR: #2D2B2B;
}
.TAB LI A:HOVER{   //Üzerine gelindiğinde
BACKGROUND-COLOR: #DBFF6C;
COLOR: BLACK;
}
.TAB LI A:ACTIVE{  //Üzerine tıklandığında
COLOR: BLACK;
POSITION: RELATIVE;
TOP:1px;
PADDING-TOP: 4px;
BACKGROUND-COLOR: #DBFF6C;
COLOR: BLACK;
}
</STYLE>
</HEAD>
<BODY>
<UL CLASS="TAB">
<LI><A HREF="#">ANA SAYFA</A></LI>
<LI><A HREF="#">HAKKIMDA</A></LI>
<LI><A HREF="#">YARDIM</A></LI>
<LI><A HREF="#">ILETIŞIM</A></LI>
</UL>
</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...