Ayyıldız2 | 2008 TR Yapısı • 1-99 Orta Emek Destan • Oto Avsız • 10 Temmuz 21:00 HEMEN TIKLA!
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
YAN MENÜ
Kullanımı kolay navigasyona sahip olmak, herhangi bir web sitesi için önemlidir.CSS ile sıkıcı HTML menülerini güzel görünümlü gezinme çubuklarına dönüştürebilirsiniz.
Gezinme Çubuğu = Bağlantıların Listesi
Bir gezinme çubuğu, temel olarak standart HTML'ye ihtiyaç duyar.Örneklerimizde gezinme çubuğunu standart bir HTML listesinden oluşturacağız.
Gezinme çubuğu temel olarak bir bağlantı listesidir, bu nedenle <ul> ve <li> öğelerini kullanmak son derece mantıklıdır:
Kod:
<!DOCTYPE html>
<html>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>
</body>
</html>Şimdi madde işaretlerini, kenar boşluklarını ve dolguyu listeden çıkaralım:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>In this example, we remove the bullets from the list, and its default padding and margin.</p>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
- list-style-type: none;- Mermileri kaldırır. Gezinme çubuğunun liste işaretçilerine ihtiyacı yoktur
- Tarayıcı varsayılan ayarlarını ayarlayın margin: 0;ve padding: 0;kaldırın
Aktif/Mevcut Navigasyon Bağlantısı
Kullanıcıya hangi sayfada olduğunu bildirmek için mevcut bağlantıya "aktif" bir sınıf ekleyin:
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
Kod:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #04AA6D;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<h2>Vertical Navigation Bar</h2>
<p>In this example, we create an "active" class with a green background color and a white text. The class is added to the "Home" link.</p>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>Bağlantıları Ortala ve Kenarlık Ekle
Bağlantıları ortalamak text-align:centeriçin <li> veya <a>'ya ekleyin .Ekle border<ul> gezinme çubuğu etrafına kenarlık eklemek için özellik. Gezinme çubuğunun içinde de kenarlıklar istiyorsanız border-bottom, sonuncusu hariç tüm <li> öğelerine a ekleyin :
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
Kod:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
border: 1px solid #555;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
li a.active {
background-color: #04AA6D;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<h2>Vertical Navigation Bar</h2>
<p>In this example, we center the navigation links and add a border to the navigation bar.</p>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Son düzenleme:
Konu Sahibi
Konu Sahibi
Rica Ederim..Yorumlarınız için Teşekkürler..Paylaşım için teşekkürler.
