Автор

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

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

Смелая навигация, слайд-шоу, когда активна, заменяет текущий контент в трехмерном пространстве.


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

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


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close