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

Facebook Yorumları

17 Yorum

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