Vadimon's Blog. Блоггерам и вебмастерам

Урок создания простого CSS меню

Среда, июня 16, 2010 в 12:17

Сегодня создадим простенькое CSS меню для сайта или блога. Сначала нарисуем его в Photoshop, а затем напишем код для него. Все это будет несложно и займет не очень много времени. Итак, приступаем.

Простое CSS меню

Для начала создадим документ в Photoshop. Размер нашего меню будет 600 х 50 пикселей, но поскольку оно будет иметь тень, то создайте документ несколько больше этого размера, цвет фона белый. При помощи инструмента Rectangular Marquee Tool создадим выделение размером 600 х 50 пикселей и зальем его любым цветом.

Простое CSS меню После этого добавим прямоугольнику следующие стили:

Простое CSS меню

После этих действий навигация должна выглядеть приблизительно следующим образом:

Простое CSS меню

Теперь добавим условные пункты меню

Простое CSS меню

Затем на примере «Кнопка 1″ покажем, как будет выглядеть пункт меню при наведении на него указателя мыши. Для этого опять же выберем прямоугольный инструмент выделения и создадим прямоугольную область под слоем с текстом и зальем ее цветом #e1e1e1. Дополнительно добавим в верхней и нижней части пункта меню небольшие треугольники. В итоге, все наше меню будет выглядеть вот так:

Простое CSS меню

После того, как мы нарисовали в меню в Photoshop, можно приступить к написанию кода. Но прежде нам потребуются два изображения нашего меню для CSS кода. Увеличьте изображение достаточно для того, чтобы вырезать полоску шириной в 1 пиксел. Не забудьте тень меню тоже включить в прямоугольную область.

Простое CSS меню

Скопируйте эту прямоугольную область в новый слой и сохраните изображение под названием nav-background.gif. Теперь сохраним бэкграунд пункта меню при наведении на него указателя мыши. Также не забудьте включить в изображение тень меню.

Простое CSS меню

Сохраните получившеся изображение как nav-background-hover.gif. Теперь это точно все, что мы должны были подготовить в Photoshop, приступаем к написанию кода.

Откройте любой HTML-редактор и создайте в нем два файла: index.html и style.css. Создайте также папку images, в которую поместите два полученных изображения для CSS кода.

Простое CSS меню

В файле index.html напишем нижеприведенный код:

<div id="navigation">
<ul>
	<li><a title="Кнопка 1" href="#">Кнопка 1</a></li>
	<li><a title="Кнопка 2" href="#">Кнопка 2</a></li>
	<li><a title="Кнопка 3" href="#">Кнопка 3</a></li>
	<li><a title="Кнопка 4" href="#">Кнопка 4</a></li>
	<li><a title="Кнопка 5" href="#">Кнопка 5</a></li>
</ul>
</div>

После такого html-кода меню на данном этапе будет выглядеть таким вот образом: step12

Теперь подключаем таблицу стилей файла style.css командой:

<link href="style.css" rel="stylesheet" type="text/css" />

расположенной между тегами <head></head>. Открываем файл style.css и пишем там следующий код:


body {
margin-top:20px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
}

Этот код задает местоположение меню. В данном случае оно будет отступать сверху на 20 пикселей и иметь ширину во все окно браузера. Теперь добавим еще код:


#navigation {
display:block;
position:relative;
height:55px;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
background: url(images/nav-background.gif) repeat-x top left;
}

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

Простое CSS меню

Добавим еще код:


#navigation ul {
 margin:0;
 padding:0;
 list-style-type:none;
 width:auto;
 }

#navigation ul li {
 display:block;
 float:left;
 margin:0 1px 0 0;
 }

#navigation ul li a {
 display:block;
 float:left;
 color:#5f5f5f;
 text-decoration:none;
 padding: 15px 22px 0 28px;
 height:34px;
 }

#navigation ul li a:hover {
background: url(images/nav-background-hover.gif);
}

На этом написание кода закончено. Если вы знакомы с языком разметки HTML и языком CSS, то увидите, что ничего здесь сложного нет. В итоге мы получим простое, но в то же время вполне сносное меню.