Автор

Мега меню для сайта с помощью CSS3

Мега меню для сайта с помощью CSS3


В данном уроке мы рассмотрим как создать мега меню для сайта, с красивыми выпадающими окнами и плавной анимацией. Стиль меню будет выполнен в минималистическом стиле, при этом будет приведено в пример четыре варианта меню с различной структуризацией и вариантом исполнения. Такое меню очень легкое в весе, легко устанавливается и поддерживает не только современные браузеры но и старые, такие как старый ослик IE. В исходниках будут вложены различные стили для навигации, благодаря им Вы сможете легко изменить цветовую палитру.

 

ДЕМО
ИСХОДНИКИ

 

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

Шаг 1. HTML

Разметка состоит из контейнера в котором заключены команды вызова пунктов меню с присвоенными к ним ссылками и подписями, также определяем каждый отдельный элемент списка атрибутом li:

<li aria-haspopup="true">
<a href="#"><i class="fa fa-thumb-tack"></i>Новости</a>
<div class="grid-container3">
<ul>
<li>
<a href="#"><i class="fa fa-list"></i>Все новости</a>
<div class="grid-container3">
<ul>
<li><a href="#">Опубликовать</a></li>
<li><a href="#">Читать</a></li>
<li><a href="#">Черновик</a></li>
<li><a href="#">Рекомендация</a></li>
</ul>
</div>
</li>
<li><a href="#"><i class="fa fa-plus"></i>Новое</a></li>
<li><a href="#"><i class="fa fa-gear"></i>Категории</a></li>
<li><a href="#"><i class="fa fa-tags"></i>Теги</a></li>
</ul>
</div>
</li>

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

Шаг 2. CSS

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

.sky-mega-menu {
position: relative;
z-index: 999;
background: rgba(255,255,255,0.9);
box-shadow: 0 0 20px rgba(0,0,0,.3);
font-size: 0;
line-height: 0;
text-align: right;
}
.sky-mega-menu:after {
content: '';
display: table;
clear: both;
}
.sky-mega-menu li {
position: relative;
display: inline-block;
float: left;
padding: 5px;
border-style: solid;
border-color: rgba(0,0,0,.1);
border-right-width: 1px;
font-size: 13px;
line-height: 45px;
text-align: left;
white-space: nowrap;
}
.sky-mega-menu li a {
display: block;
padding: 0 20px;
text-decoration: none;
color: #666;
transition: background 0.4s, color 0.4s;
-o-transition: background 0.4s, color 0.4s;
-ms-transition: background 0.4s, color 0.4s;
-moz-transition: background 0.4s, color 0.4s;
-webkit-transition: background 0.4s, color 0.4s;
}
.sky-mega-menu li > div {
position: absolute;
z-index: 1000;
top: 100%;
left: -9999px;
margin-top: 8px;
background: rgba(255,255,255,0.9);
box-shadow: 0 0 8px rgba(0,0,0,.3);
opacity: 0;
-o-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
-o-transition: -o-transform 0.4s, opacity 0.4s;
-ms-transition: -ms-transform 0.4s, opacity 0.4s;
-moz-transition: -moz-transform 0.4s, opacity 0.4s;
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
}
.sky-mega-menu li > div:after {
content: '';
position: absolute;
bottom: 100%;
left: 0;
width: 100%;
height: 8px;
background: transparent;
}
.sky-mega-menu li > div:before {
content: '';
position: absolute;
bottom: 100%;
left: 24px;
border-right: 5px solid transparent;
border-bottom: 5px solid rgba(255,255,255,0.9);
border-left: 5px solid transparent;
}
.sky-mega-menu li:hover > a,
.sky-mega-menu li.current > a {
background: #2da5da;
color: #fff;
}
.sky-mega-menu li:hover > div {
left: 0;
opacity: 1;
-webkit-transform: translate(0, 0);
}
.sky-mega-menu .right {
float: none;
border-right-width: 0;
border-left-width: 1px;
}
.sky-mega-menu .right > div {
-o-transform-origin-x: 100%;
-ms-transform-origin-x: 100%;
-moz-transform-origin-x: 100%;
-webkit-transform-origin-x: 100%;
}
.sky-mega-menu .right:hover > div {
right: 0;
left: auto;
}
.sky-mega-menu .right:hover > div:before {
right: 24px;
left: auto;
}
.sky-mega-menu .switcher {
display: none;
}

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

Вот и все. Готово!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеCSS3

Мега меню для сайта с помощью CSS3

Сегодня мы рассмотрим еще один вариант слайдеров для сайта, все это имеет вид автоматического аккордеона с возможностью подписи изображений, а так же с возможностью выбора и нумерации слайда. Для всего этого мы будем использовать liteAccordion - небольшой плагин jQuery для быстрого создания горизонтального аккордеона. Он имеет размер ~1.4kb (в минимизированном варианте) и может выводить любые элементы HTML (изображения, тексты, видео, Flash..). Давайте посмотрим какой все это имеет вид..


Мега меню для сайта с помощью CSS3

В этой статье покажу способ создания всплывающего окна на любом сайте. Использовать будем jQuery плагин fancybox. А чтобы добавить смысловой нагрузки статье, вставим в модальное окошко форму отправки письма. Сразу хочу заметить модальные окна на этом плагине работают на всех браузерах. Приступим!


Мега меню для сайта с помощью CSS3

Формат SVG делает сайт, более интересным. Это действительно много творческих возможностей для интересных эффектов на веб-сайт с использованием SVG. Сегодня мы хотели бы поделиться с вами двумя экспериментальными понятиями, которые используют анимацию, ставших популярными благодаря анимации на PlayStation 4 и Xbox одновременно.


Мега меню для сайта с помощью CSS3

Бывают случаи, когда вы хотите представить пользователю выбор, с фокусом веб-страницы являются разные варианты. Независимо от того, является ли это модальной навигацией или списком категорий, сегодняшний самородок вас охватывает!


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close