Меню кнопка анимированное / Меню / Сниппеты Bootstrap

Меню кнопка анимированное

Меню в виде кнопки, при нажатии сверху анимированно появляются пункты и кнопка закрытия, готовый HTML код для установки на сайт с Bootstrap.

* Рекомендуется расположить код меню выше основных элементов макета, кнопке установлены параметры внешнего отступа, для изменения можно установить абсолютные значения.

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Меню

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Русский

Уникальный ID: 600

Количество символов:

Посмотрели: 14059 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 3.5 / 5 - 13 голосов

Тип лицензии: CC BY 4.0

Авторство: bootstraptema.ru

Информация: Пользователям

Информация: Правообладателям

Теги: Snippet, html, menu, меню, сниппет, Bootstrap

Поделился: BootstrapТема

Добавлено: 2016-02-18 в 19:59

Метка: 1581667161

⇄ ⇅

<div class="menu"> 
 <a href="#" id="activator"><img src="https://bootstraptema.ru/snippets/menu/2016/button/menu.png" alt="" /></a>
 <div class="box" id="box">
 <div class="box_content">
 <div class="menu_box_list">
 <ul>
 <li class="active"><a href="#">Главная</a></li>
 <li><a href="#">Шаблоны</a></li>
 <li><a href="#">Плагины</a></li>
 <li><a href="#">Сниппеты</a></li>
 <li><a href="#">Контакты</a></li>
 <div class="clearfix"></div>
 </ul>
 </div>
 <a class="boxclose" id="boxclose"><img src="https://bootstraptema.ru/snippets/menu/2016/button/close.png" alt="" /></a>
 </div> 
 </div>
 
 <script>
 var $ = jQuery.noConflict();
 $(function() {
 $('#activator').click(function(){
 $('#box').animate({'top':'0px'},500);
 });
 $('#boxclose').click(function(){
 $('#box').animate({'top':'-700px'},500);
 });
 });
</script>

BootstrapTema

Меню кнопка анимированное

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0