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
Facebook Yorumları
17 Yorum