Результаты поиска в стиле поиска Google

Question

Я ищу простой JavaScript или некоторый CSS для выпадающего меню, как и в результатах поиска Google. Маленькая стрелка при нажатии показывает опции «Cached», «Similar».

Answer 1

Основная реализация довольно проста, но вы можете начать отсюда и сделать его более приятно смотреть и лучший опыт пользовательского интерфейса:

<div class="button"> 
    <span class="dropdown-button-text">Dropdown</span> 
    <div class="popup"> 
     Popup content 
    </div> 
</div> 

<style type="text/css"> 
    .button { position: relative; display: inline-block; min-width: 100px; } 
    .popup { position: absolute; top: 100%; left: 0; display: none; min-width: 300px; min-height: 50px; border: 1px solid #9F9F9F; } 
</style> 

<script> 
    $("body").delegate(".dropdown-button-text", "click", function() { 
     var popup = $(this).parent().children(".popup"); 
     if (popup.is(":visible")) { 
      popup.hide(); 

     } else { 
      popup.show(); 
     } 
    }); 
</script>