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 |
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
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.
Aleyküm selam hacı ökkeş hoşgeldin. Valla gönül istiyor fakat şimdilik elden gelen bu. İlerde İnşallah.
9 ay %20 indirim 40,50 TL , iyidi :) peşini kaça abi?
Sana 30 olur Emre, sen yabancı değilsin :)
şimdi dropdown olayını çok karıştırdılar :D
Eline saglik Caner, yeni projemde kullanacagimdan emin olabilirsin :>
Güzel olmuş. Elinize sağlık.
oldu, tamam. :)
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
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!
@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.
Form elemanları css ile editlemek için tasarlanmış özel editör varmı?
Valla varsa da ben bilmiyorum, araştırmak lazım.
Eyvallah Caner. Ben bir araştırayım bakalım :)
Çok güzel olmuş. Elinize sağlık. Aradığım bir örnekti. :) Css ile çok amelece yapılıyor. JQ ihtiyaç..
Çok teşekkürler, süper olmuş.
vayy yeni fark ettim süpermiş