Меню для Сайта своими руками

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

Радует то, что это почти всегда одно и тоже. Исключение, пожалуй, один случай: когда на сайте выпадающее меню. К примеру, есть кнопка «уроки», наводя на которую, выпадает целый список: «уроки photoshop», «уроки flash», «уроки 3D Max» и т.д. Для пользователя такое меню на сайте очень удобное, но для поисковых систем такая конструкция усложнит и замедлит индексацию.

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

Лучший вариант – это обыкновенная гиперссылка. Но ведь хочется, чтобы меню выглядело красиво, чтобы кнопки менялись при наведении курсора, правильно? И я с Вами согласен. О том, как создать такое меню для сайта, я и собираюсь рассказать. Именно по такой технологии сделаны меню навигации на моем сайте. Один пример в верхнем правом углу, второй внизу, в подвале сайта.

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

Хватит слов, перейдем к делу ;)

На самом деле такое меню для сайта делается очень просто. Тут нет никаких секретов или тайн. Я просто предоставлю Вам готовый код и добавлю к нему свои комментарии, чтобы Вам было проще его отредактировать под свои запросы.

Этот код помещается в каскадную таблицу стилей (CSS). Если Вы еще не в курсе, что это такое, прочитайте книгу «Блочная Верстка» из содержания которой почерпнете массу полезной информации.

Вернемся к меню для сайта и его коду.

Вот собственно и все, как видите, ничего сложного. Осталось лишь рассказать про параметр «background-position» и зачем он нужен. Вообще, можно обойтись без него, а просто прописать «background» и путь к картинке (или цвет), на которую должен будет меняться фон при наведении курсора. Но в таком случае, если у пользователя слабая скорость Интернета, при наведении курсора будет происходить торможение: сначала фон пропадет вовсе, потом, когда только загрузится новая картинка, он изменится на нужный.

Дабы такого не происходило, нужно нарисовать оба фона на одной картинке: сверху тот, который будет у кнопки в неактивном состоянии, ниже, который появится при наведении курсора. В зависимости от того, какой высоты кнопка, мы и указываем, на сколько пикселей нужно поднять фон.

Чтобы показать меню на сайте, в код страницы нужно добавить такой кусок:

Если Вы делаете шаблон для WordPress, то код должен выглядеть так:

Все. Думаю, эта заметка поможет Вам при создании меню для Вашего сайта. Если что-то не понятно, есть что добавить или обсудить, милости прошу отметиться в комментариях :)

  • Святослав

    Доброго дня, возник вопрос: Как сделать чтобы после клика на каком-то определенном пункте меню, он оставался выбранным? (т.е. не менял свое изображение/вид)(например делался как-бы подчеркнутым или вроде-того)

    спасибо заранее