Daha önceki yazılarda menülerin sitenin en önemli parçası olduğundan bahsetmiştim. Bu yazıda tab görünümlü yatay menü nasıl oluşturulacağız.
https://www.yazilimbilisim.net/web/css/css-menu-yapimi/ bağlantısından önceki yazyı inceleyebilirsiniz.
Gelelim yatay menüyü adım adım nasıl oluşturacağımıza;
Adım 1: Yatay Menünün HTML kodları
Sayfada birden fazla menü olması duruma karşın id değeri yatay-menu olarak tanımladık. Standart bir menü ul li a etiketleri ile oluşturulmaktadır. Bu kurala uygun olarak aşağıdaki şekilde HTML etiketleri oluşturulmuştur.
|
1 2 3 4 5 6 7 8 9 |
<ul id="yatay-menu"> <li><a href="#">Ana Sayfa</a></li> <li><a href="#">Web Tasarımı</a></li> <li><a href="#">Grafik Animasyon</a></li> <li><a href="#">Veritabanı</a></li> <li><a href="#">Programlama</a></li> </ul> |
Adım 2: UL Etiketinin Biçimlendirilmesi
UL etiketi tarayıcı tarafından varsayılan olarak madde işareti, iç boşluk ve dış boşluk içermektedir. Bunları istediğimiz tasarıma göre biçimlendiriyoruz.
|
1 2 3 4 5 6 7 |
ul#yatay-menu { list-style: none; margin:0; padding:0; } |
Adım 3: LI etiketinin Biçimlendirilmesi
Önceki yazıda float:left özelliği ile yatay menü oluşturmuştum. Bu yazıda farklı bir yöntem olarak display:inline-block; yöntemi ile yatay menü oluşturacağız.
inline-block özelliği etiketin bulunduğu satırda ve alanda block olarak görünmesini sağlar. Liste etiketleri alt alta yazılırsa tarayıcılar tarafından beyaz karater boşluğu bırakılmaktadır.(yaklaşık 2px boşluk). Bu bilgi ile dış boşlukları -2px yaparak kaldıracağız.
|
1 2 3 4 5 6 7 8 |
ul#yatay-menu li { display: inline-block; padding:0 10px; border-bottom:2px solid #3DA4AB; margin:auto -2px; } |
Adım 4: Link Etiketinin Biçimlendirilmesi
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
ul#yatay-menu li a { color: #F6CD61; display: inline-block; font: 14px/100% Arial, Helvetica, sans-serif; height: 36px; line-height: 36px; text-decoration: none; vertical-align: middle; padding: 0 10px; background-color:#4A4E4D; } |
Adım 5: Aktif Linkin Renginin Değiştirilmesi
|
1 2 3 4 5 6 |
ul#yatay-menu li a:hover{ color: #4A4E4D; background-color:#F6CD61; } |
TÜM KODLAR
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>DEMO</title> <style> ul#yatay-menu { list-style: none; margin:0; padding:0; } ul#yatay-menu li { display: inline-block; padding:0 10px; border-bottom:2px solid #3DA4AB; margin:auto -2px; } ul#yatay-menu li a { color: #F6CD61; display: inline-block; font: 14px/100% Arial, Helvetica, sans-serif; height: 36px; line-height: 36px; text-decoration: none; vertical-align: middle; padding: 0 10px; background-color:#4A4E4D; } ul#yatay-menu li a:hover{ color: #4A4E4D; background-color:#F6CD61; } </style> </head> <body> <ul id="yatay-menu"> <li><a href="#">Ana Sayfa</a></li> <li><a href="#">Web Tasarımı</a></li> <li><a href="#">Grafik Animasyon</a></li> <li><a href="#">Veritabanı</a></li> <li><a href="#">Programlama</a></li> </ul> </body> </html> |
[…] Yatay Menü Yapımı […]
[…] Yatay Menü Yapımı […]
[…] menü kavramı örneklerle açıklanmaktadır. Yatay diğer yatay açılır menü örneği için Yatay Menü Yapımı yazısına […]