JQuery ile Açılır Menüler

 bcakir
 16 Ocak 2012

Merhaba arkadaşlar, bu yazımda JQuery ve Css ile aşağı ve sağa doğru açılan menülerin nasıl yapıldığını anlatacağım. Menünün açılma mantığı temel olarak aynı sadece biraz css ile oynayarak farklı yöne açmamız mümkün. İlk önce aşağıya doğru açılan uygulamayı yapacağım daha sonra sağa doğru açılması için yapmanız gereken css değişikliğini sizlere anlatacağım. Bu uygulama ile çok kolayca açılır menüler yapabileceksiniz. Uygulamamızın içeriğini anlattığıma göre artık geliştirmeye başlayabiliriz.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>JQuery ile Açılır Menüler</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".menus").hover(function(){
		$(this).addClass("secili");
		$(".alt_menus", this).show();
	}, function(){
		$(this).removeClass("secili");
		$(".alt_menus", this).hide();
	});
});
</script>
<style>
ul, li {padding: 0; margin: 0; list-style: none}
a {text-decoration: none}
#menu {height: 40px; width: 460px; background-color: #ccc}
.menus {float: left; position: relative}
.menus a {display: block; color: #000; padding: 10px 20px 10px 20px}
.menus a:hover {background-color: #ccc; color: #fff}
.menus.secili a {background-color: #ccc; color: #fff}
.alt_menus {position: absolute;  width: 150px; left: 0; top: 40px; background-color: #000; display: none}
.alt_menus li a {display: block; color: #fff; padding: 10px}
.alt_menus li a:hover {background-color: #aaa}
</style>
</head>
<body>
<ul id="menu">
	<li class="menus"><a href="#">Anasayfa</a></li>
	<li class="menus"><a href="#">Benden</a></li>
	<li class="menus"><a href="#">Konular</a>
		<ul class="alt_menus">
			<li><a href="#">Facebook Uygulama</a></li>
			<li><a href="#">Php</a></li>
			<li><a href="#">JQuery</a></li>
			<li><a href="#">Css</a></li>
			<li><a href="#">JavaScript</a></li>
		</ul>
	</li>
	<li class="menus"><a href="#">Uzmanlar</a>
		<ul class="alt_menus">
			<li><a href="#">Bcakir</a></li>
			<li><a href="#">Seomple</a></li>
			<li><a href="#">Batuhankucukali</a></li>
		</ul>
	</li>
	<li class="menus"><a href="#">İletişim</a>
</ul>
</body>
</html>

Yukarıdaki uygulama aşağı yönde açılan menünün nasıl yapıldığını anlatıyor. Uygulamamızın çoğunluk işlemi gördüğünüz gibi tasarım vermek, fonksiyon kısmı çok daha basit. Şimdi, bu menüyü sağa doğru açmak için yapmanız gereken css kodu değişikliğini sizlere vereyim.

ul, li {padding: 0; margin: 0; list-style: none}
a {text-decoration: none}
#menu {width: 100px; background-color: #eee}
.menus {position: relative}
.menus a {display: block; color: #000; padding: 10px 20px 10px 20px}
.menus a:hover {background-color: #ccc; color: #fff}
.menus.secili a {background-color: #ccc; color: #fff}
.alt_menus {position: absolute;  width: 150px; margin-left: 100px; top: 0px; background-color: #000; display: none}
.alt_menus li a {display: block; color: #fff; padding: 10px}
.alt_menus li a:hover {background-color: #000}

Yukarıda yer alan css kodlarını ana uygulamadaki css kodlarıyla değiştirirseniz, bu sefer de sağa doğru açılan bir menü elde etmiş olacaksınız. İki uygulamayı da sizlerle paylaştım, böylece yazım burada sona ermiş oldu. Yararlı olması dileğiyle.

 5.149 Okunma

Bu yazıya 11 yorum yapılmış.

  1. Süpersin, iki tasarımıda bir arada vermişsin. Bunu arıyordum, eline koluna sağlık.

  2. Gene çok kullanışlı bir paylaşım yapmışsın. Tşkler

  3. Birşey sorucam mesela 300 px le 500 px lik bi div tagı olsun bu div tagını içinde yazı var div in yarısından aşağısı hafif şeffaf olsa yani içi beyaz yazılar yarısından sonra o beyazın içine giriyor şeffaf gibi oluyo böyle birşey yapabilirmisin inşallah dediğimi anlatabilmişimdir

    • Dediğini tam anlayamadım ama yazılan yazıların normalden şeffafa doğru kaybolmasını istiyorsun temel olarak.

      • evet tam olarak öyle işte. sabit yükseklikteki divin alt tarafı şefafa doğru gidicek kaydırma çubuğunu aşagı kaydırdıkça üste gelen yazılar daha net olcak

  4. Allah razı olsun hocam çok teşekkür ederim kodlar için…ne demişler bilgi paylaştıkça çoğalır..birde ilmin zekatı başkalarına öğretmektir var..

    • Teşekkür ederim, iyi günlerde kullanın.

  5. Süpersiniz, valla hem sağa açanını hem aşağı açılanını vermişsiniz. Ben bu tür örnekleri anlayıp değiştirmede sıkıntı yaşıyordum.

  6. Merhaba,

    Öncelikle paylaştığınız bilgiler için teşekkür ederim.
    menü çok sütünlu sağa doğru açmak istersek nasıl bir css hazırlamak gerekir?

    Saygılarımla.

  7. kesinlikle işime yaradı çok teşekkür ederim:…

  8. Harika bir paylaşım, çok işime yaradı.

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla Css, JQuery
Kapat