CSS ve JavaScript ile Dinamik Menü
Digg'in eski ve ünlü menüsünü biliyorsunuzdur. Hani, ana ketegorilerin üstüne fare ile gelince alt kategorilerin ikinci satırda çıktığı menü. Woork buna benzer bir menü geliştirmiş. Sizler için makaleyi Türkçe'ye çevirdim. İyi okumalar.
Bu makale JavaScript ve CSS kullanarak pastel renkli, menüleri seçtiğinizde alt menülerin otomatik geldiği dinamik bir menü yapısının yapılışını anlatıyor. Sonuç şöyle olacak:
Resimlerin de dahil olduğu kodu bilgisayarınıza indirebilirsiniz.
Birinci Adım: HTML
HTML kodu oldukça basit. Menü ve alt menü yapısını oluşturmak için ul ve li elementlerinin esnekliğini kullanabilirsiniz. Sayfanın yukarısına yeşil bir alan ekledim. Böylece logo ve benzeri elementlerinizi ekleyebilirsiniz.
<!-- HEADER -->
<div id="top-navigation">
<!-- Something in the header here -->
</div>
<!-- Main Menu -->
<div id="navigation">
<ul id="mymenu">
<li><a href="#" onmouseover="javascript:showsubmenu(1)">Home</a></li>
<li><a href="#" onmouseover="javascript:showsubmenu(2)">Movies</a></li>
<li><a href="#" onmouseover="javascript:showsubmenu(3)">Music</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<!-- SUB MENU -->
<div id="sublinks">
<ul id="s1">
<li><a href="#">General</a></li>
<li><a href="#">Information</a></li>
<li><a href="#">News</a></li>
</ul>
<ul id="s2">
<li><a href="#">Drama</a></li>
<li><a href="#">Thriller</a></li>
<li><a href="#">Action</a></li>
<li><a href="#">Horror</a></li>
<li><a href="#">Colossal</a></li>
</ul>
<ul id="s3">
<li><a href="#">Rock</a></li>
<li><a href="#">Pop</a></li>
<li><a href="#">Classical</a></li>
</ul>
</div>Gördüğünüz gibi ana menüdeki her bağlantı showsubmenu() isimli JavaScript fonksiyonunu ilgili alt menünün kodu ile birlikte çağırıyor. sublinks katmanı içindeki her ul elementi de ana menüdeki bağlantılar ile ilişkili. Her alt S1, S2, S3 gibi ilerleyen bir kodu olduğunu görüyorsunuz.
İkinci Adım: CSS
Aşağıdaki CSS kodunu sayfanızın <HEAD> etiketleri arasına yapıştırın.
ul, li{border:0; padding:0; margin:0; list-style:none;}
/* ----------- Navigation ----------- */
#top-navigation{
background:url(img/topnav-bg.gif) repeat-x;
width:auto;
height:48px;
margin:0 auto;
}
#navigation{
background:url(img/nav-bg.gif) repeat-x;
height:32px;
margin:0 auto;
width:auto;
}
#navigation ul{
height:32px;
line-height:32px;
}
#navigation ul li{
display:inline;
}
#navigation ul li a,
#navigation ul li a:visited {
background:url(img/line-a.gif) right no-repeat;
padding:0 20px;
display:block;
text-decoration:none;
float:left;
color:#4261df;
font-weight:bold;
text-shadow:#ffffff 2px 2px 2px;
}
#navigation ul li a:hover{
color:#1532a5;
}
/* ----------- Sub Menu ----------- */
#sublinks{
width:auto;
margin:0 auto;
background:#888888 url(img/sublink.gif);
height:30px;
font-size:11px;
}
#sublinks ul{
height:32px;
line-height:31px;
}
#sublinks ul li{
display:inline;
}
#sublinks ul li a,
#sublinks ul li a:visited {
padding:0 20px;
display:block;
text-decoration:none;
float:left;
color:#FFFFFF;
}
#sublinks ul li a:hover{
text-decoration:underline;
}
/* ----------- Hide Sub menu ----------- */
#s2, #s3{display:none;}Sayfa ilk yüklendiğinde #S1 kodlu alt menüyü göstermek istediğim için, CSS'de #S2 ve #S3 kodlu katmanların display özelliklerini none olarak veriyorum.
Üçüncü Adım: JavaScript
Şimdi de alt menüleri gizleyen ya da gösteren bu küçük showsubmenu() fonksiyonunu sayfaya ekleyin. Fonksiyon paremetre olarak alt menünün ID değerini alıyor.
<script type="text/javascript">
function showsubmenu(id){
submenu = document.getElementById('s'+id);
for(i=1;i<=3;i++){
if(i==id){
submenu.style.display="block";
} else {
document.getElementById('s'+i).style.display="none";
}
}
}
</script>Kod, birden üçe kadar bir döngü çalıştırarak kendisine gönderilen ID değerinin bu döngü içerisinde olup olmadığını kontrol ediyor. (Örnekte #S1, #S2, #S3)
Yeni bir alt menü eklemek için for döngüsündeki şartı bir artırmanız yeterli. Yani,
for(i=1;i<=3;i++)...
Olan satırı,
for(i=1;i<=4;i++)...
Şeklinde değiştirmeniz yeterli. Ardından, HTML kodunda S4 kodlu yeni bir ul elementi eklemelisiniz.
<ul id="s4">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>Not: Bu yazı 30 Mayıs 2008 tarihinde Woork internet sitesinde Antonio Lupetti tarafından İngilizce olarak yazılmıştır.