Всплывающие элементы меню на CSS3 и jQuery
827материалов
228тем на форуме
3003комментария
6152пользователя

Всплывающие элементы меню на CSS3 и jQuery


Описание меню:

Мы использовали CSS анимации и щепотку JQuery для анимации элементов навигации, и пусть они отскакивают и из экрана. Это простое всплывающее меню на jQuery и CSS3 с очень интересной функцией. При нажатии на основную иконку, всплывают круглые элементы меню с иконками категорий. Меню адаптивно под все устройства, специально сделал скриншот с Samsung Galaxy A7. Вообщем приступем к установке меню.

Установка:

Скачиваем архив с нашего сайта и папку menu_css загружаем в свой ФМ

Подключаем стили меню перед </head>
Код
<link rel="stylesheet" href="/menu_css/style.css">
<script src="/menu_css/modernizr.js"></script>

Перед </body> вставляете:
Код
<script src="/menu_css/main.js"></script>

Кнопка вызова меню:
Код
<section class="cd-section">
<a class="cd-bouncy-nav-trigger" href="javascript://">Открыть меню сайта</a>
</section>

Само меню вставляете в нижнюю часть сайта:
Код
<div class="cd-bouncy-nav-modal">
<nav>
<ul class="cd-bouncy-nav">
<li><a href="#">Категория 1</a></li>
<li><a href="#">Категория 2</a></li>
<li><a href="#">Категория 3</a></li>
<li><a href="#">Категория 4</a></li>
<li><a href="#">Категория 5</a></li>
<li><a href="#">Категория 6</a></li>
</ul>
</nav>
<a href="javascript://" class="cd-close">Закрыть меню</a>
</div>

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 12.09.2016 в 18:00
Материал просмотрен: 2345 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 17 комментариев

Пожаловаться
Сказать спасибо
Источник

17 комментариев


11_Roman
Забираю like
trem200
Александр @trem200 08.10.2015 14:542
+11
Какой стоящий скрипт like
markin
markin @markin 09.10.2015 01:513
+4
Очень нужная штука! Спасибо like
avatar
andy csbd @Andy 17.11.2015 23:084
+1
А как поменять круглые элементы меню с иконками категорий?
Skype : dinulupascu
Email: adrenaline.ae@bk.ru
Ромчик
С помощью CSS
ZloyGuru
Дядя Алекс @ZloyGuru 24.01.2016 10:296
+1
на главной странице всё выглядит нормально, но если открыть любую страницу сайта, например http://viewout.ru/news/?page2 то кнопка меню превращается в http://joxi.ru/RmzeojJIWVXN0r а в футере, куда вставлялся код меню вот такая красота - http://joxi.ru/n2YnXpPIj0G6RA
Ромчик
Я не нашел у Вас данное меню на сайте
1 2 »
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта