MyDesign | Kod Arşivi - Anasayfaya Dön   No banner in farm
Anasayfa Araştır Forum Gelişmiş Arama Siteniz İçin En Hit İçerikler RSS İçerik Ekle Scriptler Destekleyenler Kadromuz Reklam İletişim Giriş Sayfası Yap  Sık Kullanılanlara Ekle
Bu Kategorinin En Yeni Kodları:


Bu Kategorinin En Çok Görüntülenen Kodları:






Arama:
Gelişmiş Arama


No banner in farm



En Çok Görüntülenen Kodlar:


Üye Girişi:
 Üye Ol



Anasayfa > JavaScript > Kodlar

jQuery ile Açılır Menü

jQuery ve CSS ile yapılan, oldukça gelişmiş bir açılır menü uygulaması. Gerekli jQuery eklentisini kaynak adresten indirebilirsiniz.

jquery  menü  açılır menü  dropdown menu  hoverIntent 

Kategori : JavaScript
Gönderen : mYavuz
Telif : Soh Tanaka
Tarih : 14 Aralık 2010
Örnek Dosya : İndir
Okunma Sayısı : 11702
Puan
: 8 / 10 (4 Oy)
Puan Verin :
Google Bookmarks  del.icio.us  Digg  Yahoo! MyWeb  Windows Live  Furl
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-9" />
<title>jQuery Açılır Menü</title>
<style type="text/css">
body {
     margin: 0; padding: 0;
     font: normal 10px Verdana, Arial, Helvetica, sans-serif;
     background: url(body_bg.png) repeat-x;
}
*{outline: none;}
img {border: 0;}
.container {
     width: 960px;
     padding: 0;
     margin: 0 auto;
}
#header {
     width: 970px; height: 179px;
     float: left; color:#fff; font-size:12px;
}

#header p {
     margin:80px 0 0 20px;
}

#header a {
     color:#fff;
}

ul#topnav {
     margin: 0; padding: 0;
     float:left;
     width: 100%;
     list-style: none;
     font-size: 1.1em;
}
ul#topnav li {
     float: left;
     margin: 0; padding: 0;
     position: relative;
}
ul#topnav li a {
     float: left; 
     height: 44px;
     color:#fff;
     padding:17px 20px;
     text-decoration:none;
     font-size:12px;
}
ul#topnav li:hover a, ul#topnav li a:hover { background-position: left bottom; }

ul#topnav li .sub {
     position: absolute;     
     top: 44px; left: 0;
     background: #344c00 url(sub_bg.png) repeat-x;
     padding: 20px 20px 20px;
     float: left;
     /*--Bottom right rounded corner--*/
     -moz-border-radius-bottomright: 5px;
     -khtml-border-radius-bottomright: 5px;
     -webkit-border-bottom-right-radius: 5px;
     /*--Bottom left rounded corner--*/
     -moz-border-radius-bottomleft: 5px;
     -khtml-border-radius-bottomleft: 5px;
     -webkit-border-bottom-left-radius: 5px;
     display: none;
}
ul#topnav li .row {clear: both; float: left; width: 100%; margin-bottom: 10px;}
ul#topnav li .sub ul{
     list-style: none;
     margin: 0; padding: 0;
     width: 150px;
     float: left;
}
ul#topnav .sub ul li {
     width: 100%;
     color: #fff;
}
ul#topnav .sub ul li h2 {
     padding: 0;  margin: 0;
     font-size: 1.3em;
     font-weight: normal;
}
ul#topnav .sub ul li h2 a {
     padding: 5px 0;
     background-image: none;
     color: #e8e000;
}
ul#topnav .sub ul li a {
     float: none; 
     text-indent: 0;
     height: auto;
     background: url(navlist_arrow.png) no-repeat 5px 12px;
     padding: 7px 5px 7px 15px;
     display: block;
     text-decoration: none;
     color: #fff;
     font-size:11px;
}
ul#topnav .sub ul li a:hover {color: #ddd; background-position: 5px 12px ;}
</style>
</head>
<body>
<div class="container">
     <div id="header">
          <p>Kaynak: <a href="http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/" target="_blank">http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/</a>

     </div>

<ul id="topnav">
     <li><a href="#">Anasayfa</a></li>
        <li><a href="#">Ürünler</a>
          <div class="sub">
                 <ul>
               <li><h2><a href="#">Ürün Grubu 1</a></h2></li>

                     <li><a href="#">Ürün Detayı</a></li>
               <li><a href="#">Ürün Detayı</a></li>
                         <li><a href="#">Ürün Detayı</a></li>
                         <li><a href="#">Ürün Detayı</a></li>
                         <li><a href="#">Ürün Detayı</a></li>
                         <li><a href="#">Ürün Detayı</a></li>

                         <li><a href="#">Ürün Detayı</a></li>
          </ul>
                <ul>
               <li><h2><a href="#">Ürün Grubu 2</a></h2></li>
                     <li><a href="#">Ürün Detayı</a></li>
                         <li><a href="#">Ürün Detayı</a></li>
                         <li><a href="#">Ürün Detayı</a></li>

                         <li><a href="#">Ürün Detayı</a></li>
                         <li><a href="#">Ürün Detayı</a></li>
                         <li><a href="#">Ürün Detayı</a></li>
                         <li><a href="#">Ürün Detayı</a></li>
                </ul>
                <ul>
               <li><h2><a href="#">Ürün Grubu 3</a></h2></li>

                     <li><a href="#">Ürün Detayı</a></li>
                         <li><a href="#">Ürün Detayı</a></li>
                         <li><a href="#">Ürün Detayı</a></li>
                         <li><a href="#">Ürün Detayı</a></li>
                        <li><a href="#">Ürün Detayı</a></li>
                         <li><a href="#">Ürün Detayı</a></li>

                         <li><a href="#">Ürün Detayı</a></li>
                </ul>
                <ul>
                     <li><h2><a href="#">Ürün Grubu 4</a></h2></li>
                     <li><a href="#">Ürün Detayı</a></li>
                        <li><a href="#">Ürün Detayı</a></li>
                         <li><a href="#">Ürün Detayı</a></li>

                         <li><a href="#">Ürün Detayı</a></li>
                         <li><a href="#">Ürün Detayı</a></li>
                         <li><a href="#">Ürün Detayı</a></li>
                         <li><a href="#">Ürün Detayı</a></li>
                </ul>
          </div>
     </li>

     <li><a href="#">Alt Menü</a>
          <div class="sub">
                      <div class="row">
                              <ul style="width: 225px;">
                                  <li><h2><a href="#">Alt Menü 1</a></h2></li>
                                  <li><a href="#">Ürün Detayı - 2 Sütun</a></li>
                                  <li><a href="#">Ürün Detayı - 2 Sütun</a></li>

                                  <li><a href="#">Ürün Detayı - 2 Sütun</a></li>
                                  <li><a href="#">Ürün Detayı - 2 Sütun</a></li>
                              </ul>

                              <ul style="width: 225px;">
                                  <li><h2><a href="#">Alt Menü 2</a></h2></li>
                                  <li><a href="#">Ürün Detayı - 2 Sütun</a></li>

                                  <li><a href="#">Ürün Detayı - 2 Sütun</a></li>
                                  <li><a href="#">Ürün Detayı - 2 Sütun</a></li>
                                  <li><a href="#">Ürün Detayı - 2 Sütun</a></li>
                              </ul>
                     </div>
                     <div class="row">
                             <ul>

                                  <li><h2><a href="#">Alt Menü 3</a></h2></li>
                                  <li><a href="#">Ürün Detayı</a></li>
                                  <li><a href="#">Ürün Detayı</a></li>
                                  <li><a href="#">Ürün Detayı</a></li>
                                  <li><a href="#">Ürün Detayı</a></li>
                              </ul>

                              <ul>
                                      <li><h2><a href="#">Alt Menü 4</a></h2></li>
                                  <li><a href="#">Ürün Detayı</a></li>
                                  <li><a href="#">Ürün Detayı</a></li>
                                  <li><a href="#">Ürün Detayı</a></li>
                                  <li><a href="#">Ürün Detayı</a></li>

                              </ul>
                              <ul>
                                  <li><h2><a href="#">Alt Menü 5</a></h2></li>
                                  <li><a href="#">Ürün Detayı</a></li>
                                  <li><a href="#">Ürün Detayı</a></li>
                                  <li><a href="#">Ürün Detayı</a></li>
                                  <li><a href="#">Ürün Detayı</a></li>

                              </ul>
               </div>
          </div>
     </li>
        <li><a href="#">Hakkımızda</a></li>
        <li><a href="#">İletişim</a></li>
</ul>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://www.sohtanaka.com/web-design/examples/mega-dropdowns/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript">
$(document).ready(function() {

     function megaHoverOver(){
          $(this).find(".sub").stop().fadeTo('fast', 1).show();
               
          //Calculate width of all ul's
          (function($) { 
               jQuery.fn.calcSubWidth = function() {
                    rowWidth = 0;
                    //Calculate row
                    $(this).find("ul").each(function() {                         
                         rowWidth += $(this).width(); 
                    });     
               };
          })(jQuery); 
          
          if ( $(this).find(".row").length > 0 ) { //If row exists...
               var biggestRow = 0;     
               //Calculate each row
               $(this).find(".row").each(function() {                                      
                    $(this).calcSubWidth();
                    //Find biggest row
                    if(rowWidth > biggestRow) {
                         biggestRow = rowWidth;
                    }
               });
               //Set width
               $(this).find(".sub").css({'width' :biggestRow});
               $(this).find(".row:last").css({'margin':'0'});
               
          } else { //If row does not exist...
               
               $(this).calcSubWidth();
               //Set Width
               $(this).find(".sub").css({'width' : rowWidth});
               
          }
     }
     
     function megaHoverOut(){ 
       $(this).find(".sub").stop().fadeTo('fast', 0, function() {
            $(this).hide(); 
       });
     }


     var config = {    
           sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)    
           interval: 100, // number = milliseconds for onMouseOver polling interval    
           over: megaHoverOver, // function = onMouseOver callback (REQUIRED)    
           timeout: 500, // number = milliseconds delay before onMouseOut    
           out: megaHoverOut // function = onMouseOut callback (REQUIRED)    
     };

     $("ul#topnav li .sub").css({'opacity':'0'});
     $("ul#topnav li").hoverIntent(config);

});
</script>
</body>
</html>
 
 

jQuery ile Açılır Menü için yazılan yorumlar

Henüz yorum eklenmedi.

Yorum ekleyin

Anasayfa > JavaScript > Kodlar > jQuery ile Açılır Menü
Kategoriler:


Forum:



Bağlantılar:


En Son Yorumlanan İçerikler:


Murat Yavuz | Site Haritası | Gizlilik Bildirimi | 54.158.194.80 | 0,12 Saniye
© Copyright 2004-2018 MyDesign | Kod Arşivi. Tüm Hakları Saklıdır.
MyDesign | Kod Arşivi, en iyi görünüm için, 1024x768 ve üzeri çözünürlük tavsiye eder.