регистрация
856материалов
3341комментарий
239тем на форуме
7060пользователей

Простое выпадающее меню для 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
Материал просмотрен: 2922 раза
Категория материала: Скрипты для uCoz
К материалу оставлено: 5 комментариев

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

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


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