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

Facebook Yorumları

17 Yorum

  1. hacı ökkeş

    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. 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? 😀
    Fenerbahçe’nin renkleri Sarı ….  tir 😛
    Noktalı yere kırmızı yazmak isterdim 😀

  3. ahmet

    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
      Yazar

      @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.

  4. Deniz

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

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