11 октября 2017

Данное решение является универсальным. Чтобы заработало, достаточно добавить класс dropdown в нужное место вашей страницы. Всплывающий блок появляется при клике по ссылке. Закрывается по клику вне блока.

Не забудьте подключить библиотеку jquery.

html 

<div class="user-block">
  <div class="dropdown">
    <a href="#">Личный кабинет</a>
    <div class="popup">
      <input type="text" class="min" name="price_min" value="84" placeholder="35"><br>
      <label class="checkbox"><input type="checkbox" name="forma[]" value="11"> 15 г</label>
      <ul>
        <li>
          <a href="#">Мои заказы</a>
        </li>
        <li>
          <a href="#">Мой профиль</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="dropdown">
    <a href="#">Отзывы</a>
    <div class="popup">
      <input type="text" class="min" name="price_min" value="84" placeholder="35"><br>
      <label class="checkbox"><input type="checkbox" name="forma[]" value="11"> 15 г</label>
      <ul>
        <li>
          <a href="#">Мои заказы</a>
        </li>
        <li>
          <a href="#">Мой профиль</a>
        </li>
      </ul>
    </div>
  </div>
</div>

css 

.dropdown { display: inline-block; }
.dropdown .popup { position: absolute; background: #fff; padding: 20px; margin-top: 10px; margin-left: -999em; opacity: 0; min-width: 180px; max-width: 300px; box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: opacity 0.8s ease;
    -moz-transition: opacity 0.8s ease;
    transition: opacity 0.8s ease;
}
.dropdown.active .popup { opacity: 1; margin-left: 0; z-index: 9999; }
.dropdown .popup:after { content: ''; position:absolute; bottom: 100%; width: 0; height: 0; border-style: solid; margin-left: -16px; left: 30px; border-width: 0 9px 7px 9px; border-color: transparent transparent #fff transparent; }

js 

/* Open/Close dropdown menu */
$(function(){ 
  $('body') 
  .on('click', '.dropdown > a', function(){ 
   $(this).parent().toggleClass('active'); 
  }) 
  .on('mouseenter mouseleave', '.dropdown', function(){ 
   $(this).toggleClass('hover'); 
  }) 
  .on('click', function(e) { 
   $('.dropdown.active:not(.hover)').removeClass('active'); 
  }); 
})
Теги: JQuery, script, Dropdown