15.09.08 в рубрике Улучшить Блог
Пришло то время, дорогие друзья, когда я на практике расскажу, как сделать красивое меню для сайта. У меня есть уроки Photoshop, в которых я показывал, как рисуются отдельные кнопки для веб сайтов и целое меню для сайта. Но, нарисовать – это только половина задачи, а нужно еще и уметь сделать из своего рисунка реально работающую кнопку. Да так, чтобы это было максимально удобно для пользователя и максимально выгодно для Вашего сайта.
Радует то, что это почти всегда одно и тоже. Исключение, пожалуй, один случай: когда на сайте выпадающее меню. К примеру, есть кнопка «уроки», наводя на которую, выпадает целый список: «уроки photoshop», «уроки flash», «уроки 3D Max» и т.д. Для пользователя такое меню на сайте очень удобное, но для поисковых систем такая конструкция усложнит и замедлит индексацию.
Плохой вариант для поисковиков, когда меню для сайта делается с помощью flash-технологий. Для пользователей это тоже не всегда удобно. Такая же ситуация и с кнопками, которые выполнены в виде графических элементов.
Лучший вариант – это обыкновенная гиперссылка. Но ведь хочется, чтобы меню выглядело красиво, чтобы кнопки менялись при наведении курсора, правильно? И я с Вами согласен. О том, как создать такое меню для сайта, я и собираюсь рассказать. Именно по такой технологии сделаны меню навигации на моем сайте. Один пример в верхнем правом углу, второй внизу, в подвале сайта.
Но сегодняшний урок будет на примере меню, которое вместе с остальным дизайном, я сделал для другого сайта. Пока не могу сказать, что этот сайт еще один козырь в колоде моих работ. Но надеюсь, что владелец таки займется его наполнением и это не будет очередной мертвый проект, а я со временем смогу гордиться, что приложил к нему руку.
Хватит слов, перейдем к делу 
На самом деле такое меню для сайта делается очень просто. Тут нет никаких секретов или тайн. Я просто предоставлю Вам готовый код и добавлю к нему свои комментарии, чтобы Вам было проще его отредактировать под свои запросы.
Этот код помещается в каскадную таблицу стилей (CSS). Если Вы еще не в курсе, что это такое, прочитайте книгу «Блочная Верстка» из содержания которой почерпнете массу полезной информации.
Вернемся к меню для сайта и его коду.
-
#nav {
width: 990px;/*ширина всего меню навигации */
height: 50px;
/*и, разумеется, его высота*/
background: url (img/nav.jpg) no-repeat #374f37;
/*тут мы задаем параметры фона; сразу прописываем путь к картинке, котороая будет служить фоном, после указываем, что эта картинка не повторяется и в конце указываем цвет меню, на случай, если пользователь отключит графику*/
font-size: 18px;
/*размер шрифта */
float:left;
/*делает так, что наш блок с меню располагается справа; на самом деле меню растягивается на всю длину сайта и нам это вроде не нужно, но этот параметр понадобятся, чтобы не «косячил» макет, чтобы меню «дружило» с остальными блоками */
}
-
#nav ul {
margin:4px 0 0 25px;/*меняя эти параметры, я «двигаю» кнопки относительно фона */
list-style:none;
/*меню создается в виде списка, а команда «none» указывает на то, что у строк этого списка не будет указателе в виде цифр или маркеров; чтобы лучше уяснить, что я имею ввиду, удалите эту строку, когда будете делать свое меню для сайта и увидите, что из этого получится; когда посмотрите – вернете строку на место*/
}
-
#nav li {
display:inline;/*чтобы наши кнопки выстраивались в линию, а не столбцом */
}
-
#nav a {
float:left;/*указывает, что кнопки должны выстраиваться слева направо */
display:block;
/*этот параметр нам нужен, чтобы у нас была не просто ссылка, а ссылка с «каркасом», который и будет создавать иллюзию кнопки */
width: 98px;
/*длина этого «каркаса» */
height: 50px;
/*и… правильно! */
background:url («img/key.png») no-repeat;
/*тут все, как и в случае с фоном для меню; кто не уяснил, пускай вернется чуть выше и повторит */
text-align : center;
/*положение текста внутри «каркаса» */
text-decoration: none;
/*делаем, чтобы текст был чистый, без всяких подчеркиваний, которые в меню навигации нам не нужны совершенно*/
padding:10px 2px 10px 0px;
/*этими циферками можно подправить положение надписи внутри «каркаса», если нас что-то не устраивает: подвинуть, опустить и т.д. */
color:#FFF;
/*цвет надписи, когда кнопка не активна */
}
-
#nav a:hover {
background-position:0% -50px;/*здесь мы указываем, на сколько пикселей нужно поднять фон; подробнее опишу чуть ниже */
color:#66ff66;
/*цвет текста, когда на кнопку наведен курсор */
}
Вот собственно и все, как видите, ничего сложного. Осталось лишь рассказать про параметр «background-position» и зачем он нужен. Вообще, можно обойтись без него, а просто прописать «background» и путь к картинке (или цвет), на которую должен будет меняться фон при наведении курсора. Но в таком случае, если у пользователя слабая скорость Интернета, при наведении курсора будет происходить торможение: сначала фон пропадет вовсе, потом, когда только загрузится новая картинка, он изменится на нужный.
Дабы такого не происходило, нужно нарисовать оба фона на одной картинке: сверху тот, который будет у кнопки в неактивном состоянии, ниже, который появится при наведении курсора. В зависимости от того, какой высоты кнопка, мы и указываем, на сколько пикселей нужно поднять фон.
Чтобы показать меню на сайте, в код страницы нужно добавить такой кусок:
- <div id="nav">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О Сайте</a></li>
<li><a href="#">Combats</a></li>
<li><a href="#">Linux</a></li>
<li><a href="#">Windows</a></li>
</ul>
</div>
Если Вы делаете шаблон для WordPress, то код должен выглядеть так:
- <div id="nav">
<ul>
<li class="<?php echo $highlight; ?>«><a href=»<?php echo get_settings ('home'); ?>"><?php _e ('Home','wp_multiflex'); ?></a></li>
<?php wp_list_pages ('sort_column=menu_order&depth=1&title_li=' ); ?>
</ul>
</div>
Все. Думаю, эта заметка поможет Вам при создании меню для Вашего сайта. Если что-то не понятно, есть что добавить или обсудить, милости прошу отметиться в комментариях 
Popularity: 1%
Когда веб-мастер хочет, чтобы его сайт имел высокую посещаемость, он задумывается о том, чтобы создать не один, а сразу несколько источников для притока посетителей. И чем таких источников больше, тем лучше для сайта. Как говорится, с миру по нитке — голому рубаха.