Веб-мастерская Ларисы ВоронинойВерстаем панель меню с помощью HTML и CSS.
WEB-мастерская Ларисы Ворониной logo

Верстаем панель меню с помощью HTML и CSS. Ноя 24 2016


В прошлой статье мы нарисовали панель меню.

В этой статье мы сверстаем эту панель меню с помощью HTML и CSS.

Для начала создадим папку и дадим ей название «панель меню», в ней создадим ещё одну папку и назовём её “images”.

Открываем нашу панель меню в Photoshop. Скачать её вы можете вот здесь (в конце статьи).

Делаем нарезку для панели меню.

Отключаем все слои, кроме слоя «блок меню», отключаем для этого слоя тень и включаем направляющие CTRL+;.

Берём инструмент «раскройка».

Аккуратно вырезаем нашу панель строго по направляющим.

Файл -> сохранить для WEB. Формат выбираем PNG-24 (справа вверху). После того, как вы нажмёте кнопку «сохранить», появится вот такое окно, где нужно будет выбрать пункт «выделенные фрагменты».

Даём файлу название “menu” и сохраняем в папку images.

Отключаем слой «блок меню» и включаем слой «окно поиска». Точно так же вырезаем его и сохраняем в папку “images” под названием  “serach-txt” .

Таким же образом вырезаем значок поиска, дав ему имя “serach-btn”  и разделительную линию, назвав её “bg-menu”.

Итак, у нас в папке Images должно быть 4 файла PNG:

Пишем разметку панели меню.

<!DOCTYPE html>
<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) и поехали прописывать стили.

Для всей страницы задаём фоновый цвет.

body {
background: #78a944;
}

Код цвета мы смотрим в Photoshop с помощью пипетки.

Пишем стили для класса “menu”.

  • Задаём фоновый рисунок для панели меню.
.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.

  • Убираем маркеры.
li {
list-style:none;
}
  • Выравниваем все пункты li по левому краю.
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.

  • Убираем подчёркивание.
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.

  • Определяем фоновый рисунок и размеры для окна поиска.
.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.

  • Выравниваем значок поиска по правому краю.
.serach-btn {
float:right;
}
  • Делаем отступы, т.е. располагаем значок поиска там где надо.
margin: 17px 20px 0 0;

Ну вот и всё!

В итоге у нас должен получиться вот такой файл стилей style.css.

body {
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 кода можно на этом сайте: https://jigsaw.w3.org/css-validator/.

Правильный CSS!

Как сделать выпадающее меню читайте здесь.


Рейтинг@Mail.ru