Простое выпадающее меню для uCoz
827материалов
228тем на форуме
3004комментария
6157пользователей

Простое выпадающее меню для uCoz


Описание:

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

Но в данном материале мы построим простое выпадающее меню. Оно будет работать с помощью метода анимации для генерирования задержанных эффектов. Вместе с кодом JavaScript также применяются эффекты переходов CSS3. В результате получается заготовка для навигации сайта.

Установка:

Стили меню (CSS):
Код
.kebab {
     cursor: pointer;
     position: relative;
     display: inline-block;
     box-sizing: border-box;
     padding: 0 16px;
     top: 12px;
}
.kebab figure {
     width: 6px;
     height: 6px;
     border-radius: 5px;
     background: #00bcd4;
     margin: 3px 0;
}
.middle {
     transition: all 0.25s cubic-bezier(0.72, 1.2, 0.71, 0.72);
     transform: scale(1);
     position: relative;
     box-shadow: 0 0.1px 0.1px 0 rgba(0, 0, 0, 0.16), 0 0.1px 0.3px 0 rgba(0, 0, 0, 0.12);
     -webkit-filter: blur(0.1px);
     filter: blur(0.1px);
}
.middle.active {
     transform: scale(4.5);
     transition: all 0.25s cubic-bezier(0.32, 2.04, 0.85, 0.54);
     box-shadow: 0 0.1px 0.1px 0 rgba(0, 0, 0, 0.16), 0 0.1px 0.3px 0 rgba(0, 0, 0, 0.12);
}
.cross {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) scale(0);
     margin-top: -1px;
     font-family: "Nunito", sans-serif;
     color: white;
     transition: all 0.2s cubic-bezier(0.72, 1.2, 0.71, 0.72);
     font-size: 22px;
     user-select: none;
}
.cross.active {
     transform: translate(-50%, -50%) scale(1);
     transition: all 0.15s cubic-bezier(0.32, 2.04, 0.85, 0.54);
}
.nav a, .nav li {
     font-family: Roboto, sans-serif;
}
.nav a, .nav li, .nav a:hover {
     color: #6b6b6b;
     text-decoration: none;
}
.nav {
     margin-left: 20%;
}
.nav > li {
     display: inline-block;
     padding: 1em 18px;
     cursor: pointer;
}
.nav > li:hover {
     background: #ebebeb;
}
.dropdown {
     position: absolute;
     right: 0;
     top: 3em;
     transition: all 0.25s ease-out;
     transform: scale(0);
     transform-origin: 100% 0;
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 8px 0 rgba(0, 0, 0, 0.12);
}
.dropdown li {
     display: block;
     width: 100%;
}
.dropdown li a {
     width: 100%;
     padding: 1em 18px;
     display: inline-block;
     white-space: pre;
     box-sizing: border-box;
}
.dropdown li a:hover {
     background: #ebebeb;
}
.dropdown:hover ul {
     transform: scale(1);
}
.dropdown.active {
     transform: scale(1);
     transition: all 0.25s cubic-bezier(0.5, 1.8, 0.9, 0.8);
}

Код меню:
Код
<ul class="nav">
<li><a href="#">Главная страница</a></li>
<li><a href="#forum">Форум сайта</a></li>
<li><a href="#">О компании uCoz</a></li>
<div class="kebab">
<figure></figure>
<figure class="middle"></figure>
<p class="cross">x</p>
<figure></figure>
<ul class="dropdown">
<li><a href="#">Лучшие сайты</a></li>
<li><a href="#">Шаблоны</a></li>
<li><a href="#">Скрипты</a></li>
<li><a href="#">PHP-скрипты</a></li>
<li><a href="#">Уроки</a></li>
<li><a href="#">Видео уроки</a></li>
<li><a href="#">Вебинары</a></li>
<li><a href="#">Украшения</a></li>
</div>
</ul>

Этот код вставляем в нижнюю часть сайта перед </body>:
Код
<script>
var kebab = document.querySelector('.kebab'), middle = document.querySelector('.middle'), cross = document.querySelector('.cross'), dropdown = document.querySelector('.dropdown');
kebab.addEventListener('click', function () {
     middle.classList.toggle('active');
     cross.classList.toggle('active');
     dropdown.classList.toggle('active');
});
</script>

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

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

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

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


edohak
Edo @edohak 07.01.2016 15:541
+8
Прикольная менюшка, мне понравилась like спасибо
Admin
Роман Домнин @Admin 07.01.2016 15:552
+6
Не за что)
ralland136
Максим @ralland136 08.01.2016 15:573
+2
Да, офигитильная менюшка. Спасибо like
avatar
Менюшка хорошая, но как сделать, чтобы выпадающее меню отображалось над остальными блоками сайта?
Ромчик
Не совсем понял
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта