Lecaw

Учимся создавать Web-сайты

Как создать выпадающее мега меню на CSS3

January 30, 2013
CSS
325hits

Привет ребята! В этом уроке я расскажу Вам, как создать выпадающее Мега Меню на CSS3. Мега Меню обычно используются на корпоративных сайтах/сайтах электронной коммерции, они становятся все более популярными, потому что они - отличный способ показать/организовать содержание. Дизайн этого мега меню может быть найден в The Bricks UI. Давайте начнем с HTML разметки.

ДЕМО  Исходные файлы

 

HTML разметка

Создайте неупорядоченный список с классом “nav”(<ul>), затем для каждого пункта мега меню, мы добавим новый элемент списка (<li>) с тегом (<a>) внутри. Если хотите, чтобы пункт меню был мега меню, просто добавьте <div> внутри <li>.

<ul  class="nav">
  <li>
  <a href="#">What's  new</a>
  <div>
  Mega Menu Content...
  </div>
  </li>
  <li><a href="#">Top  rated</a></li>
  <li>
  <a  href="#">Earnings</a>
  <div>
  Mega Menu Content...
  </div>
  </li>
  <li><a  href="#">Rings</a></li>
  <li><a  href="#">Bracelets</a></li>
  <li><a href="#">All  Categories</a></li>
  <li class="nav-search">
  <form action="#">
  <input type="text"  placeholder="Search...">
  <input type="submit"  value="">
  </form>
  </li>
</ul>

Сброс и основные стили контейнера меню

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

.nav,
.nav a,
.nav ul,
.nav li,
.nav div,
.nav form,
.nav input {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
.nav a { text-decoration: none; }
.nav li { list-style: none; }

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

.nav {
    display: inline-block;
    position: relative;
    cursor: default;
    z-index: 500;
}
.nav > li {
    display: block;
    float: left;
}

Стиль ссылок мега меню

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

.nav > li > a {
    position: relative;
    display: block;
    z-index: 510;
    height: 54px;
    padding: 0 20px;
    line-height: 54px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #fcfcfc;
    text-shadow: 0 0 1px rgba(0,0,0,.35);
    background: #372f2b;
    border-left: 1px solid #4b4441;
    border-right: 1px solid #312a27;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}

При наведении, мы только изменяем цвет фона. Чтобы закончить с ссылками меню, мы добавим закругленные углы к первой ссылке, используя псевдо селектор :first-child и удалим левую границу.

.nav > li:hover > a { background: #4b4441; }
.nav > li:first-child > a {
    border-radius: 3px 0 0 3px;
    border-left: none;
}

Стиль формы поиска

Мы переходим к стилю контейнера формы поиска: установите position: relative, добавьте левую границу такую как на ссылках мега меню и установим ширину от родительского элемента.

.nav > li.nav-search > form {
    position: relative;
    width: inherit;
    height: 54px;
    z-index: 510;
    border-left: 1px solid #4b4441;
}

Затем мы стилизуем текстовый блок: сделаем обтекание слева, установим высоту, отступы, и т.д. Чтобы скрыть текстовый блок, мы установим ширину в 1px и удалим отступы слева и справа.

.nav > li.nav-search input[type="text"] {
    display: block;
    float: left;
    width: 1px;
    height: 24px;
    padding: 15px 0;
    line-height: 24px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #999999;
    text-shadow: 0 0 1px rgba(0,0,0,.35);
    background: #372f2b;
    -webkit-transition: all .3s ease 1s;
    -moz-transition: all .3s ease 1s;
    -o-transition: all .3s ease 1s;
    -ms-transition: all .3s ease 1s;
    transition: all .3s ease 1s;
}
.nav > li.nav-search input[type="text"]:focus { color: #fcfcfc; }
.nav > li.nav-search input[type="text"]:focus,
.nav > li.nav-search:hover input[type="text"] {
    width: 110px;
    padding: 15px 20px;
    -webkit-transition: all .3s ease .1s;
    -moz-transition: all .3s ease .1s;
    -o-transition: all .3s ease .1s;
    -ms-transition: all .3s ease .1s;
    transition: all .3s ease .1s;
}

Стили для кнопки ввода подобны текстовому блоку, мы только установим фиксированную ширину и высоту, добавим фоновую иконку и закругленные углы, используя свойство border-radius.

.nav > li.nav-search input[type="submit"] {
    display: block;
    float: left;
    width: 20px;
    height: 54px;
    padding: 0 25px;
    cursor: pointer;
    background: #372f2b url(../img/search-icon.png) no-repeat center center;
    border-radius: 0 3px 3px 0;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}
.nav > li.nav-search input[type="submit"]:hover { background-color: #4b4441; }

Выпадающее мега меню

Это - одна из самых важных частей. Начнем с установки таких свойств как position, width, display, top и left. Мы скроем выпадающие списки используя непрозрачность. После этого мы добавим фоновый цвет, округленные углы и переходы.

.nav > li > div {
    position: absolute;
    display: block;
    width: 100%;
    top: 50px;
    left: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    background: #ffffff;
    border-radius: 0 0 3px 3px;
    -webkit-transition: all .3s ease .15s;
    -moz-transition: all .3s ease .15s;
    -o-transition: all .3s ease .15s;
    -ms-transition: all .3s ease .15s;
    transition: all .3s ease .15s;
}

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

.nav > li:hover > div {
    opacity: 1;
    visibility: visible;
    overflow: visible;
}

Остальной контент

Поскольку мега меню теперь поддерживает любой контент на любом языке (HTML, php, js, и т.д.). Для этого примера мы создадим, столбцы с некоторыми ссылки внутри. Добавьте следующий код HTML в выпадающее мега меню (<div>).

<div class="nav-column">
    <h3>Home</h3>
    <ul>
        <li><a href="#">Pampers Diapers</a></li>
        <li><a href="#">Huggies Diapers</a></li>
        <li><a href="#">Seventh Generation</a></li>
        <li><a href="#">Diapers</a></li>
        <li><a href="#">Derbies</a></li>
        <li><a href="#">Driving shoes</a></li>
        <li><a href="#">Espadrilles</a></li>
        <li><a href="#">Loafers</a></li>
    </ul>
</div>
<div class="nav-column">
    <h3>Home</h3>
    <ul>
        <li><a href="#">Driving shoes</a></li>
        <li><a href="#">Espadrilles</a></li>
        <li><a href="#">Loafers</a></li>
    </ul>
    <h3>Home</h3>
    <ul>
        <li><a href="#">Driving shoes</a></li>
        <li><a href="#">Espadrilles</a></li>
        <li><a href="#">Loafers</a></li>
    </ul>
</div>
<div class="nav-column">
    <h3>Home</h3>
    <ul>
        <li><a href="#">Pampers Diapers</a></li>
        <li><a href="#">Huggies Diapers</a></li>
        <li><a href="#">Seventh Generation</a></li>
        <li><a href="#">Diapers</a></li>
        <li><a href="#">Derbies</a></li>
        <li><a href="#">Driving shoes</a></li>
        <li><a href="#">Espadrilles</a></li>
        <li><a href="#">Loafers</a></li>
    </ul>
</div>
<div class="nav-column">
    <h3 class="orange">Related Categories</h3>
    <ul>
        <li><a href="#">Pampers Diapers</a></li>
        <li><a href="#">Huggies Diapers</a></li>
        <li><a href="#">Diapers</a></li>
    </ul>
    <h3 class="orange">Brands</h3>
    <ul>
        <li><a href="#">Driving shoes</a></li>
        <li><a href="#">Espadrilles</a></li>
    </ul>
</div>

Затем мы добавим основные стили для этого контента. Мы установим ширину каждого столбца в 20%, отступы в 2.5% и сделаем обтекание слева. Для завершения мы добавим некоторые стили для текста заголовков и ссылок.

.nav .nav-column {
    float: left;
    width: 20%;
    padding: 2.5%;
}
.nav .nav-column h3 {
    margin: 20px 0 10px 0;
    line-height: 18px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: #372f2b;
    text-transform: uppercase;
}
.nav .nav-column h3.orange { color: #ff722b; }
.nav .nav-column li a {
    display: block;
    line-height: 26px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #888888;
}
.nav .nav-column li a:hover { color: #666666; }

ДЕМО  Исходные файлы

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(1 Голосовать)

Оставить комментарий