Создаем концепт выпадающего меню для сайта

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Шаг 1. HTML

Приведенный ниже код не требует объяснения, так что я просто оставлю его здесь. Использование класса .submenu требуется для избавления от селектора .menu ul:

<ul class="menu cf">
 <li><a href="#">Главная</a></li>
 <li>
 <a href="#">Уроки</a>
 <ul class="submenu">
 <li><a href="#">Веб-дизайн</a></li>
 <li><a href="#">Разработка</a></li>
 <li><a href="#">Исходники</a></li>
 <li><a href="#">Интересно</a></li>
 </ul>
 </li>
 <li><a href="#">Контакты</a></li>
 <li><a href="#">Советы</a></li>
 <li><a href="#">О нас</a></li>
 </ul>

<li><a href="#">Главная</a></li>

<li>

<a href="#">Уроки</a>

<li><a href="#">Веб-дизайн</a></li>

<li><a href="#">Разработка</a></li>

<li><a href="#">Исходники</a></li>

<li><a href="#">Интересно</a></li>

</ul>

</li>

<li><a href="#">Контакты</a></li>

<li><a href="#">Советы</a></li>

</ul>

Кроме того, .cf для очистки обтекания (clearfix).

Создаем концепт выпадающего меню для сайта

Шаг 2. CSS

Для начала необходимо добавить элементы очистки:

.cf:before,
.cf:after {
 content: " ";
 display: table;
}

.cf:after {
 clear: both;
}

.cf {
 *zoom: 1;
}

.cf:before,

.cf:after {

content: " ";

display: table;

}

.cf:after {

clear: both;

}

.cf {

*zoom: 1;

}

Затем сбрасываем отступы и стиль маркированного списка:

.menu,
.submenu {
 margin: 0;
 padding: 0;
 list-style: none;
}

.menu,

.submenu {

margin: 0;

padding: 0;

list-style: none;

}

Основной код который отвечает за выпадание списка и позиционирование элементов:

.menu {
 margin: 50px auto;
 width: 800px;
 width: -moz-fit-content;
 width: -webkit-fit-content;
 width: fit-content;
 }

 .menu > li {
 background: #34495e;
 float: left;
 position: relative;
 -webkit-transform: skewX(25deg);
 }

 .menu a {
 display: block;
 color: #fff;
 text-transform: uppercase;
 text-decoration: none;
 font-family: Arial, Helvetica;
 font-size: 14px;
 }

 .menu li:hover {
 background: #e74c3c;
 }

 .menu > li > a {
 -webkit-transform: skewX(-25deg);
 padding: 1em 2em;
 }

 /* Dropdown */
 .submenu {
 position: absolute;
 width: 200px;
 left: 50%; margin-left: -100px;
 -webkit-transform: skewX(-25deg);
 -webkit-transform-origin: left top;
 }

 .submenu li {
 background-color: #34495e;
 position: relative;
 overflow: hidden;
 }

 .submenu > li > a {
 padding: 1em 2em;
 }

 .submenu > li::after {
 content: '';
 position: absolute;
 top: -125%;
 height: 100%;
 width: 100%;
 box-shadow: 0 0 50px rgba(0, 0, 0, .9);
 }

 /* Odd stuff */
 .submenu > li:nth-child(odd){
 -webkit-transform: skewX(-25deg) translateX(0);
 }

 .submenu > li:nth-child(odd) > a {
 -webkit-transform: skewX(25deg);
 }

 .submenu > li:nth-child(odd)::after {
 right: -50%;
 -webkit-transform: skewX(-25deg) rotate(3deg);
 }

 /* Even stuff */
 .submenu > li:nth-child(even){
 -webkit-transform: skewX(25deg) translateX(0);
 }

 .submenu > li:nth-child(even) > a {
 -webkit-transform: skewX(-25deg);
 }

 .submenu > li:nth-child(even)::after {
 left: -50%;
 -webkit-transform: skewX(25deg) rotate(3deg);
 }

 /* Show dropdown */
 .submenu,
 .submenu li {
 opacity: 0;
 visibility: hidden;
 }

 .submenu li {
 transition: .2s ease -webkit-transform;
 }

 .menu > li:hover .submenu,
 .menu > li:hover .submenu li {
 opacity: 1;
 visibility: visible;
 }

 .menu > li:hover .submenu li:nth-child(even){
 -webkit-transform: skewX(25deg) translateX(15px);
 }

 .menu > li:hover .submenu li:nth-child(odd){
 -webkit-transform: skewX(-25deg) translateX(-15px);
 }

100

101

102

103

104

105

106

107

108

109

110

111

112

113

.menu {

margin: 50px auto;

width: 800px;

width: -moz-fit-content;

width: -webkit-fit-content;

width: fit-content;

}

.menu > li {

background: #34495e;

float: left;

position: relative;

-webkit-transform: skewX(25deg);

}

.menu a {

display: block;

color: #fff;

text-transform: uppercase;

text-decoration: none;

font-family: Arial, Helvetica;

font-size: 14px;

}

.menu li:hover {

background: #e74c3c;

}

.menu > li > a {

-webkit-transform: skewX(-25deg);

padding: 1em 2em;

}

/* Dropdown */

.submenu {

position: absolute;

width: 200px;

left: 50%; margin-left: -100px;

-webkit-transform: skewX(-25deg);

-webkit-transform-origin: left top;

}

.submenu li {

background-color: #34495e;

position: relative;

overflow: hidden;

}

.submenu > li > a {

padding: 1em 2em;

}

.submenu > li::after {

content: '';

position: absolute;

top: -125%;

height: 100%;

width: 100%;

box-shadow: 0 0 50px rgba(0, 0, 0, .9);

}

/* Odd stuff */

.submenu > li:nth-child(odd){

-webkit-transform: skewX(-25deg) translateX(0);

}

.submenu > li:nth-child(odd) > a {

-webkit-transform: skewX(25deg);

}

.submenu > li:nth-child(odd)::after {

right: -50%;

-webkit-transform: skewX(-25deg) rotate(3deg);

}

/* Even stuff */

.submenu > li:nth-child(even){

-webkit-transform: skewX(25deg) translateX(0);

}

.submenu > li:nth-child(even) > a {

-webkit-transform: skewX(-25deg);

}

.submenu > li:nth-child(even)::after {

left: -50%;

-webkit-transform: skewX(25deg) rotate(3deg);

}

/* Show dropdown */

.submenu,

.submenu li {

opacity: 0;

visibility: hidden;

}

.submenu li {

transition: .2s ease -webkit-transform;

}

.menu > li:hover .submenu,

.menu > li:hover .submenu li {

opacity: 1;

visibility: visible;

}

.menu > li:hover .submenu li:nth-child(even){

-webkit-transform: skewX(25deg) translateX(15px);

}

.menu > li:hover .submenu li:nth-child(odd){

-webkit-transform: skewX(-25deg) translateX(-15px);

}

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

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

Интересно:

Опубликовал admin 07.08.2013 в 14:15, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены.

Создаем концепт выпадающего меню для сайта

Шаг 1. HTML

Шаг 2. CSS

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

Читайте также:

Интересно:

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи

Создаем концепт выпадающего меню для сайта

Шаг 1. HTML

Шаг 2. CSS

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

Читайте также:

Интересно:

Зайти

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи