Стильное всплывающее меню - CSS-хитрости

Anonim

Это идея от Veer.com и то, как они обрабатывают выпадающие списки для таких вещей, как размеры футболок. Спасибо Деннису Са.

Посмотреть демо

HTML

Мы обернем обычный текстовый ввод внутри, который также содержит неупорядоченный список, который будет представлять значения для всплывающего меню.

 

    

  • Male - M
    • 

  • Female - M
    • 

  • Male - S
    • 

  • Female - S
    •

CSS

По умолчанию списки будут скрыты, но все они будут стилизованы и готовы к работе, когда щелчок вызывает их отображение.

.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

Мы создадим быстрый плагин, чтобы эту функцию можно было вызывать в любой оболочке div, содержащей ту же настройку HTML. =

(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);

использование

Затем мы просто вызываем плагин, когда, конечно, DOM будет готов.

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