Bu yazımda javascript ile hazırlanan menu effect uygulamasına göz atacağız. İnternette gezinirken gördüğüm oldukça güzel ve görselliği artıran bir uygulama. Boyutu küçük olması nedeniyle de ayrı bir avantajı var. Bu güzel uygulamayı sizlerle paylaşmak istedim.
Öncelikle script dosyasının ve diğer dosyaların olduğu örneği
buradan indirelim.
Daha sonra sayfamızın html kodlarına bakacak olursak:
<head>
<title>Sliding Menu Effect</title>
<link rel="stylesheet" type="text/css" href="style2.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body onload="menuSlider.init('menu','slide')">
<div class="menu">
<ul id="menu">
<li value="1">
<a href="#">Anasayfa</a>
</li>
<li>
<a href="#">Hakkımda</a>
</li>
<li>
<a href="#">İletişim</a>
</li>
<li>
<a href="#">Rss</a>
</li>
<li>
<a href="#">Arşiv</a>
</li>
<li>
<a href="#">Sitemap</a>
</li>
</ul>
<div id="slide"></div>
</div>
</body>
Görüldüğü gibi oldukça kolay ve görselliği artıran bir uygulama. "li" html tagında vermiş olduğumuz "value" değeri ile kayan kutunun durması gereken yeri belirliyoruz. Görüldüğü kodlarımız ile oynayarak daha büyük ya da daha güzel bir uygulama haline getirebiliriz.
Örnek ekran görüntüsü ise şöyle:
Uygulamayı
buradan görebilir,
buradan da indirebilirsiniz.
İyi Çalışmalar!