CSS ve jQuery ile dropdown select


Standart HTML select öğesine alternatif, daha şekilli, daha hoş bir dropdowndur kendileri. Ben yaptım, çok iyi oldu çok da güzel oldu tamam mı.

jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(document).ready(function(){  
 
// dropdown menu
$(".ddown").live("click", function() {
  if($("#ddown").is(":hidden")) {
    $("#ddown").slideDown('fast');
    $(".ddown").addClass("ddownact");
  }
  else {
    $("#ddown").slideUp('fast');
    $(".ddown").removeClass("ddownact");
   }
});  

$("#ddown a").live("click", function() {
  var deger = $(this).attr("data-id");
  var fiyat = $(this).find("strong").html();
 
  $(".ddown").html("<strong>"+fiyat+"</strong>");
  $("#deger").val(deger);  
 
  $("#ddown").slideUp('fast');    
  $(".ddown").removeClass("ddownact");  

});  

}); //doc ready end

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* menu */
.mysel { width: 275px; font-family: Arial, sans-serif; }
.mysel a.ddown { display: block; background: url('../images/bg-select.png') 0 0 no-repeat; width: 252px; color: #4c4c4c; text-shadow: 1px 1px 1px #FFFFFF; font-size: 12px; padding: 10px 0 14px 19px; text-decoration: none; }
.mysel a.disabled { color: #B0B1B3 !important; }
.mysel a.ddown:hover { background: url('../images/bg-select.png') 0 -70px no-repeat; }
.mysel a.ddownact { background: url('../images/bg-select.png') 0 -141px no-repeat !important; color: #006CE3; }

.mysel .inner { position: relative; }
.mysel .inner .menu { display:none; position: absolute; top: 34px; left: 9px; padding: 0; margin: 0; /* border: 1px solid #C0C3D2; */ width: 240px; -webkit-border-bottom-right-radius: 8px; -webkit-border-bottom-left-radius: 8px; -moz-border-radius-bottomright: 8px; -moz-border-radius-bottomleft: 8px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; box-shadow:0px 1px 1px #414141; -moz-box-shadow:0px 1px 1px #414141; -webkit-box-shadow:0px 1px 1px #414141; }
.mysel .inner .menu li { list-style: none; }
.mysel .inner .menu li a { display:block; border-bottom: 1px solid #BFB7B5; text-decoration: none; line-height: 1.2em; font-size: 12px; color: #67696B; text-shadow: 1px 0 0 #FFFFFF; background: #F0F1F5 url('../images/bg-select-ddown.png') 0 0 repeat-x; padding: 7px 10px; }
.mysel .inner .menu li a:hover { background: url('../images/bg-select-ddown.png') 0 -61px repeat-x; padding: 6px 10px 7px; color: #FFFFFF; text-shadow: 1px 0 0 #1f6db6; border-top: 1px solid #1F6DB6; }
.mysel .inner .menu li a span { color: #808394; font-size: 11px; font-style: italic; }
.mysel .inner .menu li a:hover span { color: #F8F8F8; font-size: 11px; font-style: italic; }
.mysel .inner .menu li a.first { border-top: none !important; }
.mysel .inner .menu li a.last { border-bottom: none !important; -webkit-border-bottom-right-radius: 8px; -webkit-border-bottom-left-radius: 8px; -moz-border-radius-bottomright: 8px; -moz-border-radius-bottomleft: 8px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; }

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- dropdown -->
<div class="mysel">
<div class="inner" id="pricelist">

<a href="javascript:void(0);" class="ddown"><strong>10.22 TL / 3 ay (KDV Dahil)</strong></a>
<ul class="menu" id="ddown">
  <li><a href="javascript:void(0);" data-id="1. Seçenek"><strong>10.22 TL / 3 ay (KDV Dahil)</strong><br /><span>%10 indirim</span></a></li>
  <li><a href="javascript:void(0);" data-id="2. Seçenek"><strong>20.14 TL / 6 ay (KDV Dahil)</strong><br /><span>%15 indirim</span></a></li>
  <li><a href="javascript:void(0);" data-id="3. Seçenek" class="last"><strong>40.50 TL / 9 ay (KDV Dahil)</strong><br /><span>%20 indirim</span></a></li>
</ul>

</div>
</div>
<!-- //dropdown -->

Çalışan örnek:
Demo

Bilgisayara indir (48 KB):
Download

İlginizi Çekebilecek Diğer İçerikler

17 Yorum

  1. hacı ökkeş dedi ki:

    s.a. ben geldim. Nasılsın caner nasılsınız cemaat. Allah iyilikler versin. hocam ayda yılda bir yayınlıyorsun tasarımla ilgili yazı oda çok küçük proje parçacığı şeklinde oluyor. Daha özgün ve büyük projelerde paylaşırsan seviniriz. Kolay gele.

  2. Caner Öncel dedi ki:

    Aleyküm selam hacı ökkeş hoşgeldin. Valla gönül istiyor fakat şimdilik elden gelen bu. İlerde İnşallah.

  3. Emre dedi ki:

    9 ay %20 indirim 40,50 TL , iyidi :) peşini kaça abi?

  4. Caner Öncel dedi ki:

    Sana 30 olur Emre, sen yabancı değilsin :)

  5. gürhan dedi ki:

    şimdi dropdown olayını çok karıştırdılar :D

  6. Yigit dedi ki:

    Eline saglik Caner, yeni projemde kullanacagimdan emin olabilirsin :>

  7. kralizasyon dedi ki:

    Güzel olmuş. Elinize sağlık.

  8. Cihan dedi ki:

    oldu, tamam. :)

  9. Sonkan BAYRAKTAR dedi ki:

    Canerim, buna benzer bir çok örneğe baktım ve beğenmediğim. Taki sen bunu paylaşana kadar tüm bu arayışlarıma son verdin yine süpersin bunu bir kaç gün içinde siteme entegre edeceğim. Bir de bilgin olsun Egonomik’e kayıt linkini sen mi kaldırdın yoksa ayarlarda mı bir sorun var. Hem haber vereyim dedim, hem merak ettim. 

    Ayrıca: benim gibi koyu bir Galatasaraylıya sorulacak bir soru mu bu? :D
    Fenerbahçe’nin renkleri Sarı ….  tir :P
    Noktalı yere kırmızı yazmak isterdim :D

  10. ahmet dedi ki:

    Caner eline sağlık.
    1 soru 1’de talebim olacak :)
    Select alanını css ile biçimlendirme konusunda kullanabileceğimiz kaynak verebilirmisin (elinin altında varsa).
    javascript:void(0) kodunun sayfada 1’den fazla kullanımı tarayıcıya yük bindirirmi? Bu konuda bilgin varmı. Örneğin menülerde # yerine kullansak!

    • Caner Öncel dedi ki:

      @ahmet ben genellikle bu iş için kod editörü kullanıyorum :)

      Void olayına gelince, eskiden direkt javascript:; kullanırdım, sonra yanlış hatırlamıyorsam standartlarla ilgili bir sorun çıktı ve void(0); e geçtim uzun süredir de bu şekilde kullanıyorum, bir sorun yaşamadım. #’i sevmiyorum çünkü script çalışmadığında sayfayı tepeye atıyor.

  11. ahmet dedi ki:

    Form elemanları css ile editlemek için tasarlanmış özel editör varmı?

  12. ahmet dedi ki:

    Eyvallah Caner. Ben bir araştırayım bakalım :)

  13. Deniz dedi ki:

    Çok güzel olmuş. Elinize sağlık. Aradığım bir örnekti. :) Css ile çok amelece yapılıyor. JQ ihtiyaç..

  14. Burak dedi ki:

    Çok teşekkürler, süper olmuş.

  15. Kenan dedi ki:

    vayy yeni fark ettim süpermiş

Uyarı: Yorumlarda link kullanmayınız. Link içeren yorumlar otomatik olarak spam kabul edilmektedir.

Bir cevap yazın

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