Samsung Galaxy A7. Вообщем приступем к установке меню "/> Samsung Galaxy A7. Вообщем приступем к установке меню"/> Samsung Galaxy A7. Вообщем приступем к установке меню" />

« Всплывающие элементы меню на 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>


Скачать ( Размер архива 10.8 Kb )

По данной ссылке, Вы можете скачать или купить архив данного материала

Демонстрация

Демонстративная страница или сайт материала

Установка материала

Мы поможем установить данный материал к Вам на сайт

Источник

Материал взят со стороннего ресурса и был проверен нами


Добавил: Ромчик | Категория: Скрипты для uCoz | Просмотров: 679 | Загрузок: 20

Теги к материалу: jquery, всплывающие, CSS3, меню, элементы, на

Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

Комментариев к материалу: 0
avatar