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%
большое спасибо, всё понятно
Здравствуйте, Найкрис.
Вы просто читаете мои мысли.
Это как раз то, что мне сейчас очень нужно.
Написано всё очень ясно и понятно.
Огромное спасибо.
Ух ты, два комментария и две Ирины
Приятно, что удалось донести до читателей свои мысли, да еще и в понятной форме.
А давайте, чтобы я в следующий раз не читал Ваших мыслей (а то вдруг чего не то прочитаю
— шутка), Вы сами будете со мной делиться, о чем бы хотелось узнать? 
Спасибо. Получилось очень симпатично, но, если, находясь на страничке «Главная», убрать ссылку Главная (ссылка ведь тут не нужна), т.е. я пишу: Главная , то конструкция разрушается. У меня, во всяком случае. Объясните, пожалуйста, где я торможу.
Елена
Елена, это не Вы, это я стормозил
Не учел, что если один из пунктов не делать ссылкой, то все меню поедет.
Чтобы исправить это положение, код нужно немножко изменить. Вот так:
#nav li {
display:inline;
float:left;
display:block;
width: 98px;
height: 50px;
background:url («face/key.png») no-repeat;
padding:10px 2px 10px 0px;
color:#6f3;/*цвет кнопки — не ссылки */
text-align : center;
}
#nav a {
color:#FFF;
display:block;
padding:0px 2px 10px 0px;
background:url («face/key.png») no-repeat;
text-decoration: none;
}
Остальное без изменений
Здравствуйте, Найкрис. Большое спасибо вам за очень полезную статью. Это как раз то, что я долго искала в Интернете, и не могла найти. У меня к вам один вопрос по поводу меню. Я пользуюсь браузером Mozilla Firefox, и меню на моем сайте отображается очень хорошо. Но когда я захожу на сайт при помощи браузера Internet Explorer, меню отображается неправильно. Подскажите пожалуйста, как мне исправить положение???
Настя, я проверил Ваш код во всех браузерах у себя, везде отображается одинаково.
Может пришлите мне на почту свою таблицу стилей, хтмл страничку и картинки, дабы я увидел в целом Вашу задумку?
Спасибо Найкрис. Вы мне очень помогли. Я прочитала книгу которую вы мне порекомендовали, и поняла как мне решить мою проблему. Я сделала меню только при помощи стилей, без изображений. Вроде не плохо получилось, можете посмотреть
Поздравляю
и рад за Вас, что наконец-то добились своего
Вот только зачем два одинаковых меню навигации рядом? Одно стоит убрать
Я бы хотела попросить сделать бесплатно мне для моего сайта меню и прислать код меню на имейл. Зараннее спасибо
Думаю, Вы обратились не по адресу. Извините, но у меня нет на это времени
Большое спасибо вам за статью.Если есть время зайдите на мой сайт
Найкрис, я конечно все понимаю, но эта меню не для слабых умов, как мое.
Подскажите, мне нужно сделать простое меню, а еще конретнее слово-ссылку(которое я потом пихну в таблицу) и чтобы оно загоралась при наведении на нее мышью. Я уже несколько часов сижу.
И если возможно, пожалуйста, напишите как можно проще.
4 года назад писал уже менюшку, там при наведении мыши о фон менялся и цвет ссылки, без всяких скриптов. А теперь постарел я...
Поможете.
Достаточно чтобы вы объяснили как при наведении на один файл, он заменялся другим, а при нажатии соответственно осуществлялся переход. И все это происходило, если прописать все это в обычную табличную ячейку.
Заранее спасибо.
Просто супер
я не как не знал как поставить
Спасибо большое
Здравствуйте. Совершенно случайно наткнулся на ваш сайт в поиске уроков по анимации. Впринципе нашёл что нужно-за что вам огромное спасибо- и почитал остальную информацию на сайте. Оччень много полезного-особенно мне понравились статьи про горе-фрилансеров. Так как я навичёк в этом деле(самообучение по найденному в нэте), то я хотел бы попросить вас посмотреть мои сайты и вылить кучу негатива(а лучше просто критики
) на меня. Заранее спасибо.
Здраствуйте! Чтото я понять не могу, куда код CSS вкладывать... подскажите пожалуйсто!
Здравствуйте, Найкрис. У меня к вам один вопрос ( не совсем по теме, но всё же). Я сейчас делаю свой сайт в dreamweaver (я новичок в этом деле) и никак не могу разместить ракламные ссылки с так.ру туда куда мне нужно (не доходит). Может есть какие-нибудь специальные теги, которые определяют место расположение? Помогите пожалуйста.
Николай, вообще-то, да, по самому коду можно понять, где и что будет располагаться. Вы же в курсе, где у сайта футер, шапка и т.д.? В зависимости от того, в какую часть сайта хотите добавить ссылки, туда кусок кода и вставляете. Точно так же, как и вставляется код счетчика, картинка и все т.п.
Увы, но как подробнее объяснить, что-то не придумаю...
Вкурсе. У меня в коде что-то такое, что куда-бы я не вставил этот скрипт, он всё время появляется в одном и том же месте (внизу). Но мне даже это не нужно. А вот как задать точное расположение скрипта? Выше, правее или левее?. Я смотрел как сделано на wmmail.ru (wmlink сылки справа). Даже скопировал почти весь код сайта (включая css) и начал разбираться как там всё устроено. Там автор сайта, вместо того, чтобы вставлять скрипт сам написал название ссылок и «дал» им оригинальный адрес (как в скрипте). Поэтому ссылки там и никогда не сменяются
). Ну а уж тут всё проще...
Я только не уверен, что так можно
выше-левее — это с помощью стилей прописывается.
Не думаю, что автор указанного Вами сайта прописывал ссылки вручную. Скопируйте и мою страницу, получите чистый хтмл-код, хотя тут кругом скрипты используются
Да да да. Я это уже понял. Я прописываю с помощью div style . Спасибо. Когда сделаю свой первый сайт (каким бы он не был) дам ссылку вам, чтобы вы посмотрели и прокомментировали. ОК?
Ну а в коде wmmail и правда что-то есть странное... А может и браузер тупой, не так скопировал...
Аха, гляну
а по поводу браузера — так это любой так скопирует, он не тупой у Вас)
Найкрис, я попробывал сделать меню, как написано выше и у меня ничего не получилось
(хотя вроде делал всё правильно)... Получаются голые ссылки в столбик. А то, что я прописывал в css почему то не учитывается... Подскажите пжл в чём проблемма...
Est' ochen' bol'shoj minus eatogo menyu! Nel'zya smenit' fon stranitsy & trudno propisat' kaskadirovan'e stilevoj tablizy!
А как все картинки своей страницы прописать? Надо сохранять эти слои по оддельности или как? И куда вообще это всё пихать?
у Вас есть папка с файлом index.html, к примеру. В этой же папки и файл таблицы стилей. В этой же папке создаете еще одну папку (для удобства), в которую уже и помещаете картинки. У меня это папка «face», по этому и адрес такой: face/key.png
Спаси большое у меня все отлично работает.
У меня во всех браузерах, кроме Google Chrome, отображается нормально. Чё-то в Google Chrome много чего глючит со стилями.
Не знаю, я пользуюсь Хромом, как основным браузером, у меня все норм
Скажите пожалуйста, а как сделать не горизонтальное, а вертикальное меню?
Я новичок в этом деле, и всегда что-то нужно делать впервые! в принципе я ввел данный CSS-код, и подключил его к HTML. И вроде CSS код работает и форматирует содержимое div-тэга, но вставленные мною картинки не воспринимаются браузером! И выглядит это всё как пустая белая страница, с высвечивающимися ссылками при наведении! Не могли бы вы мне помочь разобраться!
Здраствуйте,не могли бы Вы мне помочь как убрать подчергивания гиперссылок, бо text-decoration: none не уберает подчеркивания...
Вот CSS:
#navbar{
width: 900px;
background: #A6886E;
height: 30px;
padding: 0px 20px;
}
#nav{
margin: 0px 5px;
width: 700px;
float:left;
}
#navbar #nav ul {
list-style: none;
text-align: left;
margin: 0px 5px; padding: 0;
}
#navbar #nav ul li {
display:inline;
margin: 0px; padding: 0;
}
#navbar #nav ul li a span, #navbar #nav ul li span span{
padding: 0px 10px 20px 10px;
color: #ECE0BA;
font: 15px/16px Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
}
#navbar #nav ul li a span:hover,
#navbar #nav ul li a span:active {
border: none;
color: #ECE0BA;
text-decoration: none;
background: url (.../images/menu_nuz_act.gif) 0% 90% no-repeat;
}
#navbar #nav ul li#current a span{
color: #E9C4A0;
}
Спасибо за статью. Я уже освоил дизайн кнопок, так что теперь умение делать меню продвинут мой скилл вэб-мастера еще выше!
Holla!
Здравствуйте, Найкрис!
Тут уже задавался такой вопрос, как сделать вертикальное меню а не горизонтальное? Мне понравилось как всё расписано! Но вот горизантальное меню мне не подходит. Если можете помогите пожалуйста!
Спасибо огромное за статью! Мне она очень помогла. Но теперь мне поставили задачу: сделать выпадающее меню с рисунком и текстом на одном большом рисунке, где реализована карта. Сижу вторую неделю, но толку нет, только еще больше запуталась. Скажите, это вообще возможно?=))
Заранее огромное спасибо=))
Доброго времени суток Найкрис
Должен согласиться с посетителями читавшими Вашу статью, написано действительно грамотно и доходчиво.
По сему, есть вопрос к Вам.
Редактирую сайт который написан на PHP.
И вот, я реши поменять то меню которое там было.
Меню то я вставил, но как подключить сам файл menu.php чтобы меню заработало не получается.
Пробовал перед кодом в шаблоне index.php ставить но что то не работает.
Сами страницы завёрстаны на html.
Может подскажете как правильно настроить меню.
Доброго времени суток, помогите выравнять меню так чтобы пункты меню были посередине вот кусок css
* {margin:0; padding:0}
body {font:14px Helvetica, sans-serif; font-weight:bold; background:#FFF}
.menu {position:relative; background:url (/images/bg.gif) repeat-x; height:35px;}
.menu ul {list-style:none; z-index:10; position:absolute; z-index:100; padding:9px 5px}
.menu li {float:left}
.menu a, .menu a:active, .menu a:visited, .menu a:hover {text-decoration:none; color:#FFF; padding:10px}
#slide {position:absolute; top:0px; height:35px; background:#89957a; z-index:10}
зарание спасиба!!!
Ваша статья помогла победить вертикальный список! Теперь у меня горизонтальное меню, спасибо!
Спасибо! Все отлично описано! Есть вопрос! как сделать красивое разделение элементов меню?
я попробовал добавить такие строки в цсс:
#mynav1 a {
........
border-left: 1px solid #999999;
border-right: 1px solid #ffa3a3;
}
вроде все получилось, но что-то мне не нравится. наверное есть способ пооригинальнее???
нормальный способ, я тоже так делаю
Ясно! Вы меня убедили... оставлю, как уже сделал! СПАСИБО!
Спасибо. Получается вроде.:)
Сейчас будем пробовать
>>>#nav li {
display:inline;
/*чтобы наши кнопки выстраивались в линию, а не столбцом */
}
А если надо столбцом?
Убираем эту строчку
А у меня вообще нет этой строки. Могу я Вам доступ, чтоб Вы глянули? Мне вообще надо вот такое меню: s03.radikal.ru/i176/1009/53/5731aead2d25.jpg
Такое меню делается при помощи скриптов. Методами, описанными в статье, такое не получится.
Вы помочь можете? Может кто-то может помочь?
Гугл =)
Уже перерыл не только гугл, но и яндекс... На форумах задавал вопрос, все молчат, как рыбы об лед!
Здравствуйте! Скажите пожалуйста где можно посмотреть пример донного меню?
К сожалению, сейчас нигде. На том сайте, для которого я его далал, меню уже изменилось. В ближайшее время планирую переписать статью и добавлю пример уже на свой сайт, чтобы не повторилась ситуация
Здравствуйте! Скажите, почему Chrome задваивает кнопки??? И как от этого избавиться? В других обозревателях все нормально.
не замечал такого
Здравствуйте!!! Скажите пожалйста как сделать горизонтальное меню?? Я новичок в CSS
сори за тупой вопрос
разобрался
а куда вставлять фоновое изображение?