Как сделать меню для сайта

Создание сайта

В этой небольшой статье я расскажу, как сделать красивое меню для сайта, с условием того что бы менюшка хорошо индексировалась поисковиками. Для того что бы поисковики хорошо относились к меню, мы будем использовать каскадные таблицы стилей CSS, вместо всевозможных скриптов и flesh.

как сделать меню для сайта

Для создания красивого меню нам понадобится: блокнот и Photoshop. Как и в прошлой статье: Создание шапки для сайта я использую Photoshop CS2. Так же можно скачать уже готовое меню здесь, и так приступим к созданию:

1. Прежде всего в фотошопе создаем новый документ (Ctrl+N) размером 600*50 пикселей, и при помощи инструмента Paint Bucket Tool (G) заливаем черным цветом.

как сделать меню для сайта

2. В меню Leyers нажимаем правой кнопкой мыши по слою Background и выбираем Group Info New Smart Object:

как сделать меню для сайта

3. Нажимаем еще раз правой кнопкой на этом же слои и выбираем - Blending Options, и переходим на вкладку: Stroke, настраиваем как показано на рисунку. Цвет был использован – 515550.

как сделать меню для сайта

4. Создаем новый слой (Ctrl+Shift+N), выбираем инструмент Rectangular Marque Tool (M) и выделяем верхнюю половину изображения

как сделать меню для сайта

5. Выделенную часть, заливаем белым цветом и ставим прозрачность 15%

как сделать меню для сайта

в итоге должно получится примерно так:

как сделать меню для сайта

6. Выбираем шрифт и добавляем текст:

как сделать меню для сайта

7. Теперь нужно сделать подсвечивание кнопки при наведении на нее курсора. Для этого создаем новый слой, выбираем инструмент: Rectangular Marque и делаем выделение вокруг кнопки. Далее, заливаем выделенный фрагмент (цвет: 5b371d) и ставим прозрачность 25%.

как сделать меню для сайта

8. Для того что бы наше меню также выглядело и на сайте, нам потребуется сохранить часть изображения. Для этого, выделяем небольшой фрагмент, приблизительно 5х50 пикселей. Создаем новый документ с таким же размером: 5х50 пикселей, и перетаскиваем выделенное в новый документ:

как сделать меню для сайта

Тоже самое, проделываем с изображением, которое будет появляется при наведении курсора:

как сделать меню для сайта

Сохраняем эти два документа с именем: file1 и file2 и с расширением: png

Когда изображение сохранены, переходим к html и css. Создаем новый html файл или вставляем код, где будет размещены ссылки:

<ul>
<li><a href="/ссылка" title="Главная">Блог</a></li>
<li><a href="/ссылка" title="Мои услуги">Мои услуги</a></li>
<li><a href="/ссылка" title="О проекте">О проекте</a></li>
<li><a href="/ссылка" title="Реклама">Реклама</a></li>
<li><a href="/ссылка" title="Карта блога">Карта блога</a></li>
<li><a href="/ссылка" title="Контакты">Контакты</a></li>
</ul>

Переходим к CSS. Создаем новый документ с расширением .css и копируем следующий код:

body {
margin:100px;
padding:0
}

ul{
margin:0;
padding:0;
list-style-type:none;
height:50px;
width: 550px;
font-size:14px;
background: url('/file1.png') repeat-x;
font-family:Arial,Verdana,Helvitica,sans-serif;
}

ul li a{
display:block;
float:left;
color:#FFFFFF;
text-decoration:none;
text-align:center;
padding:15px 15px 5px 15px;
height:50px;

}

ul li a:hover {
color:#FFFFFF;
background: url('/file2.png') repeat-x

И вот, меню для сайта готово. Изменяем ссылки под себя и можем смело пользоваться. Не забываем во время создания меню подбирать цвета под дизайн собственного сайта, поскольку цвета для меню были взяты произвольно. Вы хотите создать логотип для своего сайта, тогда не забываем подписаться на rss-ленту, поскольку следующая статья посвящена теме: Как сделать логотип в фотошопе

Удачи в покорении CSS и Phtoshop.

< Предыдущая		Следующая >

Вставлять код изображения не нужно, только имя файла изображения вот в эти две строки:
background: url(file1.png) repeat-x; и
background:url( file2.png) repeat-x

где file1.png и file2.png - это имена двух изображений, которые были созданы в фотошопе

Цитировать

+1 #9 Александр 13.02.2011 15:35

Здравствуйте!!! Я не могу понять куда в этот код вставить код изображения?

Помогите пожалуйста!

Цитировать

0 #8 dezm 12.09.2010 16:21

Цитирую НайТ:

Интересно, но в обычных блогах на wordpress лучше думаю через функции темы это делать.

Да конечно в движках функция горизонтальное и вертикальное меню устанвливается автомтически, но для тех кто занимается html и css, эти статьи будут полезны

Цитировать

+1 #7 НайТ 05.09.2010 00:58

Интересно, но в обычных блогах на wordpress лучше думаю через функции темы это делать.

Цитировать

+2 #6 VictorVV 14.08.2010 07:02

Я уже знал про создание таких меню на CSS уже давно. Существует много программ по их генерации, например CSS Menu Generator. Ну что же, статья полезна, всмонил некоторые css-стили.

Цитировать