13 Nisan 2009 
ErhanK Dock stilinde bir navigasyon uygulaması. Sonuçta şu şekilde bir çalışma ortaya çıkıyor: 
Bu HTML kodumuz, bu kodu menüyü kullanacağınız yere koymanız gerekiyor.
Sıra geldi CSS kodlarımıza. Bu kodları CSS dosyanıza eklemeniz gerekmekte. Aşağıdaki kodları ister teker teker CSS dosyanıza ekleyebilir veya önizleme sayfasındaki CSS kodlarını da alabilirsiniz.
İlk olarak aşağıdaki kodu ekliyoruz. Bu kod; listenin yan yana dizilmesini ve maddeleme işaretlerinin kaldırılmasını sağlıyor.
-
ul#navlist {
-
display: inline;
-
list-style: none;
-
}
Şimdiki kodumuz ise li elementlerinin yan yana dizilmesini sağlıyor ve kendilerine bir yükseklik ve genişlik değeri atıyoruz. Tabii yazdığınız menü başlıklarına göre genişlik veya yükseklikle oynayabilirsiniz.
-
ul#navlist li {
-
float: left;
-
width: 80px;
-
height:60px;
-
}
Aşağıdaki kod ise li elementinin içindeki linklerin biçimini belirtiyor.
-
ul#navlist li a {
-
width: 70px;
-
height:50px;
-
padding:5px;
-
display:block;
-
color:#fff;
-
text-decoration: none;
-
font-size:7pt;
-
font-family:arial;
-
line-height:50px;
-
text-align:center;
-
border-right:1px solid #fff;
-
border-left:1px solid #fff;
-
border-top: 5px solid #fff;
-
border-bottom: 5px solid #fff;
-
background: #003663;
-
}
Son olarak linklerin üzerine gelindiğinde, yani hover eylemi gerçekleştikten sonra olacak değişiklikler için de bir CSS kodu gerekiyor:
-
ul#navlist li a:hover {
-
border-top: 5px solid #004a80;
-
border-bottom: 5px solid #004a80;
-
background:#004a80;
-
font-size:9pt;
-
font-weight:bold;
-
}
Oluşan Dock stili menü uygulamasını aşağıdan görebilirsiniz.
Kategori: 
Etiketler: