Skip to content

Навигационное меню в стиле Apple

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

Начнем с HTML-скелета

Как и во многих случаях код нашего меню будет представлен неупорядоченным списком:

<ul id="menu">
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Портфолио</a></li>
<li><a href="#">Блог</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Помощь</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Реклама</a></li>
<li>
<form method="get" name="searchform" id="searchform" action="/">
<input type="text" placeholder="Поиск" />
</form>
</li>
</ul>

Ссылки пока являются анкорами, для своего сайта Вы естественно вставите свои ссылки.

CSS-правила

Сначала создадим основу для #menu и его первоочередных потомков

apple3
body{font-family: "Myriad Pro"}
#menu{
height:40px;
-webkit-box-shadow: 0 0 6px rgba(0,0,0,.95);
-moz-box-shadow: 0 0 6px rgba(0,0,0,.95);
box-shadow: 0 0 6px rgba(0,0,0,.95);
background:#b3b3b3;
background: -webkit-linear-gradient(bottom, #6e6e6e, #b3b3b3);
background: -moz-linear-gradient(bottom, #6e6e6e, #b3b3b3);
background: -o-linear-gradient(bottom, #6e6e6e, #b3b3b3);
background: -ms-linear-gradient(bottom, #6e6e6e, #b3b3b3);
background: linear-gradient(to top, #6e6e6e, #b3b3b3);
border-radius: 10px;
list-style: none
}

#menu li{float:left;border-right:1px solid #626262;border-left:1px solid #9d9d9b;height:20px;padding:10px 0}
#menu li:first-child{border-left:none}
#menu li:first-child a{border-radius: 10px 0 0 10px}
#menu li:last-child{border:none; float:right;margin-right:20px}

Телу страницы зададим шрифт Myrand Pro, соответственно он добавиться и остальным элементам.

Для #menu задаем высоту, тень, фон цветом — для IE, фон градиентом — для передовых браузеров, закругление границ и стиль списка убираем, чтобы у элементов списка не было точек.

Элементы списка выравниваем по левому краю, разделяем их между собой границами (слева и справа), задаем внутренние отступы и учитывая их высоту равную высоте #menu (высота списка + отступ сверху + отступ снизу).

Для первого элемента (псевдо-класс :first-child) убираем бордюр слева, а ссылке закругляем верхний левый и нижний левый углы по значению закругления углов для #menu.

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

Стилизируем ссылки по наведению и клику

apple2
#menu li a {
color: #2f2f2f;
text-shadow: 0 1px rgba(255,255,255,.5);
text-decoration: none;
padding:10px 20px
}
#menu li a:hover{
background: #828282;
background: -webkit-linear-gradient(bottom, #4a4a4a, #828282);
background: -moz-linear-gradient(bottom, #4a4a4a, #828282);
background: -o-linear-gradient(bottom, #4a4a4a, #828282);
background: -ms-linear-gradient(bottom, #4a4a4a, #828282);
background: linear-gradient(to top, #4a4a4a, #828282);
color: #e7e7e7;
text-shadow: 0 -1px rgba(32,32,32,.5);
}
#menu li a:active, #menu li a.current{
color: #e0dfdf;
text-shadow: 0 -1px rgba(32,32,32,.5);
-webkit-box-shadow: inset 0 3px 4px rgba(0,0,0,.45);
-moz-box-shadow: inset 0 3px 4px rgba(0,0,0,.45);
box-shadow: inset 0 3px 4px rgba(0,0,0,.45);
background: #373837;
background: -webkit-linear-gradient(bottom, #525051, #373837);
background: -moz-linear-gradient(bottom, #525051, #373837);
background: -o-linear-gradient(bottom, #525051, #373837);
background: -ms-linear-gradient(bottom, #525051, #373837);
background: linear-gradient(to top, #525051, #373837);
}

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

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

При клике по ссылке меняем ей цвет, тень, фон (цветом — IE, градиентом — остальным браузерам), эти же стили получит выбранный элемент, которому присвоен класс .current.

Форма поиска

#searchform input[type="text"]{
width:150px;
height:20px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border:none;
background: #fff url(search.png) no-repeat 5px center;
-webkit-box-shadow: inset 1px 1px 3px rgba(0,0,0,.83);
-moz-box-shadow: inset 1px 1px 3px rgba(0,0,0,.83);
box-shadow: inset 1px 1px 3px rgba(0,0,0,.83);
font-family: Calibri;
color: #959595;
padding: 0 25px
}
#searchform input[type="text"]:focus{
outline:none
}

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

Заключение

Вот так с помощью CSS и одной картинки мы создали клевую навигацию. Не занимая места на сервере добавили стандартные шрифты (Myriad Pro и Calibri). Так же в демонстрации к этому уроку я прописал небольшой скрипт, благодаря которому Вы можете спокойно нажимать по ссылкам, чтобы увидеть стиль выбранного элемента.