В прошлой статье мы нарисовали панель меню.
В этой статье мы сверстаем эту панель меню с помощью HTML и CSS.
Для начала создадим папку и дадим ей название «панель меню», в ней создадим ещё одну папку и назовём её “images”.
Открываем нашу панель меню в Photoshop. Скачать её вы можете вот здесь (в конце статьи).
Делаем нарезку для панели меню.
Отключаем все слои, кроме слоя «блок меню», отключаем для этого слоя тень и включаем направляющие CTRL+;.
Берём инструмент «раскройка».
Аккуратно вырезаем нашу панель строго по направляющим.
Файл -> сохранить для WEB. Формат выбираем PNG-24 (справа вверху). После того, как вы нажмёте кнопку «сохранить», появится вот такое окно, где нужно будет выбрать пункт «выделенные фрагменты».
Даём файлу название “menu” и сохраняем в папку images.
Отключаем слой «блок меню» и включаем слой «окно поиска». Точно так же вырезаем его и сохраняем в папку “images” под названием “serach-txt” .
Таким же образом вырезаем значок поиска, дав ему имя “serach-btn” и разделительную линию, назвав её “bg-menu”.
Итак, у нас в папке Images должно быть 4 файла PNG:
Пишем разметку панели меню.
<html>
<head>
<meta charset="utf-8">
<link rel= "stylesheet" type= "text/css" href= "style.css" />
<title>Панель меню</title>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Контакты</a></li>
</ul>
<form action="" method="">
<input class="serach-txt" type="text" name="serach" />
<input class="serach-btn" type="image" src="images/serach-btn.png" />
</form>
</div>
</body>
</html>
Обратите внимание, что нашу панель меню мы заключили в div с классом “menu”.
Окну поиска мы присвоили класс “serach-txt”.
Кнопке поиска мы присвоили класс “serach-btn” и прописали путь к картинке.
Если взглянуть в браузер, то увидим вот такую картину:
Пишем стили.
В редакторе создаём файл style.css(синтаксис css) и поехали прописывать стили.
Для всей страницы задаём фоновый цвет.
background: #78a944;
}
Код цвета мы смотрим в Photoshop с помощью пипетки.
Пишем стили для класса “menu”.
- Задаём фоновый рисунок для панели меню.
background:url(images/menu.png) no-repeat;
}
- Выставляем ширину и высоту панели меню.
height: 102px;
- Выставляем нашу панель по центру.
overflow:hidden;
- Делаем отступ сверху.
- Пишем рамку.
- Закругляем углы.
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
Пишем стили для li.
- Убираем маркеры.
list-style:none;
}
- Выравниваем все пункты li по левому краю.
- Задаём отступы.
- Вставляем разделительную линию.
- Убираем первую разделительную линию.
float:left;
background:none;
padding:15px 17px 25px 17px;
}
Пишем стили для a.
- Убираем подчёркивание.
text-decoration: none;
}
- Определяем размер и стиль шрифта.
- Делаем шрифт жирным.
- Задаём цвет тексту.
- Создаём тень от текста.
- При наведении курсора мыши на пункт меню, текст делаем светло-зелёным, тень убираем.
color: #c6ea9f;
text-shadow:none;
}
Пишем стили для окна поиска, т.е. для класса serach-txt.
- Определяем фоновый рисунок и размеры для окна поиска.
background: url(images/serach-txt.png)no-repeat;
width:302px;
height:40px;
}
- Закругляем углы.
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
- Задаём отступы.
И наконец, пишем стили для значка поиска, т.е. для класса serach-btn.
- Выравниваем значок поиска по правому краю.
float:right;
}
- Делаем отступы, т.е. располагаем значок поиска там где надо.
Ну вот и всё!
В итоге у нас должен получиться вот такой файл стилей style.css.
background: #78a944;
}
.menu {
background:url(images/menu.png) no-repeat;
width: 1002px;
height: 102px;
margin:0 auto;
overflow:hidden;
margin-top: 70px;
border: 1px solid #adc88f;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
}
li {
list-style:none;
float:left;
padding:15px 17px 25px 17px;
background:url(images/bg-menu.png) left center no-repeat;
}
li:first-child{
float:left;
background:none;
padding:15px 17px 25px 17px;
}
a {
text-decoration: none;
font:30px "Century Gothic" ;
font-weight: bold;
color: #121e06;
text-shadow:2px 2px 1px #b3d48f;
}
a:hover {
color: #c6ea9f;
text-shadow:none;
}
.serach-txt {
background: url(images/serach-txt.png)no-repeat;
width:302px;
height:40px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
margin:12px 0 30px 115px;
}
.serach-btn {
float:right;
margin: 17px 20px 0 0;
}
Проверить валидность CSS кода можно на этом сайте: http://jigsaw.w3.org/css-validator/.
Скачать исходники.Как сделать выпадающее меню читайте здесь.