Автор

13 06.2014
Мега меню для сайта с помощью 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;
}

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

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


vk.com/club.ssdru

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


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

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

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


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

Простой интерактивный ресурс, который можно использовать для виртуального просмотра вашего продукта.


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

Эффект погружения, основанный на масках изображений и CSS-преобразованиях.


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

Вот и наступила зима, выпал первый снег, и по настоящему чувствуется что скоро наступит новый год, ведь новогоднее настроение уже парит в воздухе. Люди во всю наряжают елки, а веб-мастера стараются украсить свой сайт новогодними украшениями. В данном уроке мы рассмотрим как создать простой эффект снега для сайта при этом мы будем использовать правила JS и немного новогодней магии. У нас будет рондомное падение снега, при этом мы добавим плавности, кроме этого мы добавили эффект глубины с помощью больших и меньших окружностей снежинок.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close