Dropdown menu (Açılır menü) uygulaması

Web sitelerin de dropdown menuleri çok sıklıkla kullanabiliyoruz. Bu örneğimizde css ler uyguladığımız ve mause üzerine geldiginde kendiliginden açılan br menu oluşturmayı ögreneceğiz.
Sayfamızda dropdown menu’nun açılır ve kapanır olmasını sağlayan kodu inceleyelim.

<script>
 $(document).ready(function(){
 $(".dropdownmenu").mouseenter(function () {
 $("#menu").slideToggle();
 });

 $(".dropdownmenu").mouseleave(function () {
 $("#menu").slideToggle();
 });
 });
</script>

Yukarıdaki kodlarda :

<script>
$(".dropdownmenu").mouseenter(function () {
 $("#menu").slideToggle();
 });
</script>

class’ı dropdownmenu üzerine mause ile gelindiginde id’si menu olan nesneyi açma komutunu verdik.

$(".dropdownmenu").mouseleave(function () {
 $("#menu").slideToggle();
 });

class’ı dropdownmenu üerinden mause çekildiğinde kendiliğinden menünun açıldığı gibi kapanmasını sağladık.

index.htm sayfa kodlarımız:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
 <title>Gumusluoglu.Com</title>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
 <link rel="stylesheet" type="text/css" href="style.css" />
 <script>
 $(document).ready(function(){
 $(".dropdownmenu").mouseenter(function () {
 $("#menu").slideToggle();
 });

 $(".dropdownmenu").mouseleave(function () {
 $("#menu").slideToggle();
 });
 });
 </script>

</head>
<body>

 <div>
 <a href="#" id="dropdowndugme">Site Seçenekleri</a>
 <ul id="menu" style="display:none">
 <li><a href="http://yasamoykusu.com">Yaşam Öyküsü</a></li>
 <li><a href="http://kulturtv.com.tr">Kültür Tv</a></li>
 <li><a href="http://www.google.com.tr">Google</a></li>
 <li><a href="http://www.serpito.com/">Serpito</a></li>
 <li><a href="http://www.gumusluoglu.com/">Gumusluoglu.Com</a></li>
 <li><a href="http://yasamoykusu.com">Yaşam Öyküsü</a></li>
 <li><a href="http://kulturtv.com.tr">Kültür Tv</a></li>
 <li><a href="http://www.google.com.tr">Google</a></li>
 <li><a href="http://www.serpito.com/">Serpito</a></li>
 <li><a href="http://www.gumusluoglu.com/">Gumusluoglu.Com</a></li>
 </ul>
 </div>
</body>
</html>

2 thoughts on “Dropdown menu (Açılır menü) uygulaması

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir