Menu Popup theo kiểu - Thủ thuật CSS

Anonim

Ý tưởng này là từ Veer.com và cách họ xử lý danh sách thả xuống cho những thứ như kích thước áo phông. Xin cảm ơn Dennis Sa.

Xem Demo

HTML

Chúng tôi sẽ bọc một đầu vào văn bản thông thường bên trong một, cũng chứa một danh sách không có thứ tự sẽ đại diện cho các giá trị cho menu bật lên.

 

    

  • Male - M
    • 

  • Female - M
    • 

  • Male - S
    • 

  • Female - S
    •

CSS

Các danh sách sẽ bị ẩn theo mặc định, nhưng tất cả vẫn được tạo kiểu và sẵn sàng hoạt động khi một cú nhấp chuột kích hoạt chúng được hiển thị.

.size ( position:relative ) .size .field ( width:300px; background:#EC6603; color:#fff; padding:5px; border:none; cursor:pointer; font-family:'lucida sans unicode',sans-serif; font-size:1em; border:solid 1px #EC6603; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; ) .size .field:hover ( border:solid 1px #fff; -moz-box-shadow:0 0 5px #999; -webkit-box-shadow:0 0 5px #999; box-shadow:0 0 5px #999 ) .size>ul.list ( display:none; position:absolute; left:30px; top:-30px; z-index:999; width:300px; margin:0; padding:10px; list-style:none; background:#fff; color:#333; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:0 0 5px #999; -webkit-box-shadow:0 0 5px #999; box-shadow:0 0 5px #999 ) .size>ul.list li ( padding:10px; border-bottom: solid 1px #ccc; ) .size>ul.list li:hover ( background:#EC6603; color:#fff; ) .size>ul.list li:last-child ( border:none )

jQuery

Chúng ta sẽ kết hợp một plugin nhanh chóng với nhau, để chức năng này có thể được gọi trên bất kỳ trình bao bọc div nào có cùng thiết lập HTML này. =

(function($)( $.fn.styleddropdown = function()( return this.each(function()( var obj = $(this) obj.find('.field').click(function() ( //onclick event, 'list' fadein obj.find('.list').fadeIn(400); $(document).keyup(function(event) ( //keypress event, fadeout on 'escape' if(event.keyCode == 27) ( obj.find('.list').fadeOut(400); ) )); obj.find('.list').hover(function()( ), function()( $(this).fadeOut(400); )); )); obj.find('.list li').click(function() ( //onclick event, change field value with selected 'list' item and fadeout 'list' obj.find('.field') .val($(this).html()) .css(( 'background':'#fff', 'color':'#333' )); obj.find('.list').fadeOut(400); )); )); ); ))(jQuery);

Sử dụng

Sau đó, chúng tôi chỉ gọi plugin, tất nhiên khi DOM đã sẵn sàng.

$(function()( $('.size').styleddropdown(); ));