CSS меню для начинающих

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

Фон для меню

Для начала создадим background, я конечно не мастер PhotoShop’a, но вот что у меня получилось за пару минут:

Графические кнопочки

Создаем изображения которые у нас будут использовать как ссылки в меню. Для этого воспользуемся PhotoShop’ом:

Создаем новый файл размером этак 144x58px. (размер ссылки для первого элемента в меню)
Наполняем графическим содержимым сей пункт меню (у меня это лишь надпись выполненная забавным шрифтом):
Далее увеличим размер полотна (canvas size) в два раза:
И дорисуем внешний вид элемента меню для реализации события hover

Как сия конструкция будет работать? Да очень просто – ссылке мы явно указываем размер 144x58px, а но событие mouseover перемещаем фоновое изображение вверх:
Создадим новый файл с произвольным размером и текстом – это будет наша подсказка к ссылке
Повторим все предыдущие пункты для создания всех пунктов меню, в результате анаших манипуляций у нас должен получиться вот такой набор изображений:

HTML код

Закончили строить из себя дизайнеров, пора начинать кодить – создадим не нумерованный список – <ul>:

элементу <ul> присвоеим id=”menu”
каждой ссылке <a> присвоим уникальное имя класса
Внутрь тэга <a> закинем пустой тэг <span> (понадобиться для реализации подсказок к ссылкам)

<ul id="menu">
    <li><a href="#" class="home">Home <span></span></a></li>
    <li><a href="#" class="about">About <span></span></a></li>
    <li><a href="#" class="rss">RSS <span></span></a></li>
</ul>

CSS код

#menu
Для начала убираем padding и margin у меню, list-style выставляем в none, position указываем как relative . Указываем высоту и ширину меню (см. размеры menu-bg.jpg). Добавляем фоновое изображение.

#menu {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 774px;
    height: 210px;
    background: url(images/menu-bg.jpg) no-repeat;
    position: relative;
}

#menu span
Для элементов span параметр display выставляем в none (по умолчанию не будут отображаться). Так же выставляем position как absolute.

#menu span {
    display: none;
    position: absolute;
}

#menu a
Для ссылок нам необходимо спрятать текст, для этого параметру text-indent присваиваем негативное значение (-900%), и текст будет скрыт.

#menu a {
    display: block;
    text-indent: -900%;
    position: absolute;
    outline: none;
}

#menu a:hover
Теперь мы хотим сдвинуть картинку на линке по событию mouseover, для этого добавим в CSS следующий код:

#menu a:hover {
    background-position: left bottom;
}

#menu a:hover span
Так же по событию mouseover необходимо отобразить подсказку

#menu a:hover span {
    display: block;
}

#menu .home
Теперь нам необходимо правильно расставить элементы меню. Для начала укажем размер элемента и фоновое изображение, а затем займемся позиционированием, будем изменять параметры left и top пока не почувствуем морального удовлетворения от внешнего вида меню:

#menu .home {
    width: 144px;
    height: 58px;
    background: url(images/home.gif) no-repeat;
    left: 96px;
    top: 96px;
}

#menu .home span
Теперь проведем подобную операцию для всплывающей подсказки

#menu .home span {
    width: 86px;
    height: 14px;
    background: url(images/home-over.gif) no-repeat;
    left: 28px;
    top: -20px;
}

#menu .about

Копируем всё что мы сделали для элемента .home и переименовываем в .about. Подгоняем размер и расположение, так же заменяем фон.

#menu .about {
    width: 131px;
    height: 51px;
    background: url(images/about.gif) no-repeat;
    left: 338px;
    top: 97px;
}
#menu .about span {
    width: 40px;
    height: 12px;
    background: url(images/about-over.gif) no-repeat;
    left: 44px;
    top: 54px;
}

#menu .rss

Повторим для .rss

#menu .rss {
    width: 112px;
    height: 47px;
    background: url(images/rss.gif) no-repeat;
    left: 588px;
    top: 94px;
}
#menu .rss span {
    width: 92px;
    height: 20px;
    background: url(images/rss-over.gif) no-repeat;
    left: 26px;
    top: -20px;
}

Всё в одном

#menu {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 774px;
    height: 210px;
    background: url(images/menu-bg.jpg) no-repeat;
    position: relative;
}
#menu span {
    display: none;
    position: absolute;
}
#menu a {
    display: block;
    text-indent: -900%;
    position: absolute;
    outline: none;
}
#menu a:hover {
    background-position: left bottom;
}
#menu a:hover span {
    display: block;
}
#menu .home {
    width: 144px;
    height: 58px;
    background: url(images/home.gif) no-repeat;
    left: 96px;
    top: 73px;
}
#menu .home span {
    width: 86px;
    height: 14px;
    background: url(images/home-over.gif) no-repeat;
    left: 28px;
    top: -20px;
}
#menu .about {
    width: 131px;
    height: 51px;
    background: url(images/about.gif) no-repeat;
    left: 338px;
    top: 97px;
}
#menu .about span {
    width: 40px;
    height: 12px;
    background: url(images/about-over.gif) no-repeat;
    left: 44px;
    top: 54px;
}
#menu .rss {
    width: 112px;
    height: 47px;
    background: url(images/rss.gif) no-repeat;
    left: 588px;
    top: 94px;
}
#menu .rss span {
    width: 92px;
    height: 20px;
    background: url(images/rss-over.gif) no-repeat;
    left: 26px;
    top: -20px;
}

Это всё, протестировать меню можете тут, а скачать пример тут.

Вольный перевод : http://www.webdesignerwall.com/tutorials/advanced-css-menu/

65 thoughts on “CSS меню для начинающих”

xxxYURAxxx says:

2008-02-22 at 22:59

неплохо бы добавить еще объединение всех картинок в одну
и смещать ее с помощью CSS

надо приучать людей правильным азам

Reply
Pingback: CSS меню для начинающих | Записки маленького юниксоида
Pingback: гигантский туториал по Gmail « ² Malevi4a
Pingback: CSS меню для начинающих | Взгляды из реального мира
eros says:

2008-02-25 at 13:41

Еще бы хотелось чтобы это меню было видно при отключенных картинках

Reply
Владислав says:

2008-02-25 at 14:57

Здравствуйте!
Скажите, пожалуйста, а как сделан блокнотик с закладками, справа на Вашем сайте?
Спасибо.

Reply
Anton Shevchuk says:

2008-02-25 at 15:49

to Владислав:
Данный “блокнот” использует JavaScript для переключения между закладками, т.е. каждый лист блокнота – отдельный див, по нажатию на закладку, див привязанный к ней (см. id элементов в сорцах страницы) отображается, все остальные скрываются…
Закладка представляется из себя див с фоновой картинкой, к примеру этой, при активации закладки – фон смещается (аналогично как в данной статье)…

Reply
max says:

2008-02-25 at 18:24

как то некрасиво что картинки выехали из бокса

Reply
Anton Shevchuk says:

2008-02-25 at 18:27

to max:
Из какого бокса?

Reply
ACID Jesus says:

2008-02-26 at 09:53

Симпатично, но картинки действительно лучше было в виде одного спрайта сделать, а фон зациклить просто кусок – тоже чтобы уменьшить размер 8-)

Reply
Pingback: Наутилус - дом морская ракушка « ² Malevi4a
fanat says:

2008-03-11 at 23:05

А при помощи не судьба сделать? я всю жизнь делал на div и не парился

Reply
Girder says:

2008-04-19 at 16:00

А как сделать посередине такую страницу белую как у вас с помощю ссs. Подскажите пожалуйста

Reply
Anton Shevchuk says:

2008-04-19 at 16:09

@Girder:
Вам лучше всего будет взглянуть на примеры версток страниц по адресу http://blog.html.it/layoutgala/

Reply
Girder says:

2008-04-19 at 16:16

Спасибо!

Reply
Ivan says:

2008-05-11 at 13:18

Нашол баг в ie … тэги span не отображаються

Reply
ilya says:

2008-06-29 at 05:35

при отображении в IE6 появляется неприятное свойство. картинки меняются не бысто, а как-то в замедленном темпе что-ли. наводишь на пункт меню, картинка пропадает на полсекунды, и потом появляется ее вторая часть. Отводишь мышку и картинка опять пропадает на пол секунды и потом появляется первая часть. Вот даже не знаю из-за чего. А в варианте http://www.webdesignerwall.com/tutorials/advanced-css-menu/ такого бага нет, хотя код тот-же.

Reply
HtmlVerstka says:

2008-09-08 at 21:10

Ой что-то мудреное, я бы сделал проще, задал бы для <a href свойства
a {
display:block
width:по ширине картинки
height:по высоте
background: картинка 1
}
а при наведении на ссылку подменил бы бекграунд
a:hover {
background: картинка 2
}
+ позиционирование в стилях, марафет )) и все

Reply
Alex says:

2008-09-10 at 14:30

Это я видел на уроках Евгения Попова, это его урок. А менюшка действительно классная.

Reply
Anton Shevchuk says:

2008-09-10 at 14:33

@Alex:
Ну данная статья является лишь переводом, кстати можете скинуть ссылку на урок?

Reply
Denis says:

2008-09-29 at 19:10

to ilya
Задержка происходит из-за того что картинка подгружается. Чем больше картинка, тем дольше она и будет грузиться.
На этом сайте при первом наведении на элемент навигации картинка с подсказкой появляется через 1-2сек. (подгружается), в последующие разы – отображается нормально, т.к. находится уже в кэше.
Для быстрого отображения сразу, такого рода изображения нужно подгружать предварительно перед загрузкой самой страницы.
Можно сделать при помощи JavaScript.
Ну, а при помощи CSS, точно не знаю, но в принципе тоже как то можно, например подгрузить нужное изображение поместив его в нижний слой под какойнить элемент страницы (Z-index: -1).
а сам Div в коде страницы разместить перед навигацией.

Reply
DomiNatoR says:

2008-10-13 at 12:09

ilya, зачем подгружать? Если использовать метод смещения, то картинка загружается сразу, а потом только смещается, тоесть никакой задержки

Reply
Corwin Celebdil says:

2008-11-05 at 09:29

В IE6 как всегда глюки :) Подсказки появляются, но не убираются.

Reply
1. dokk2018 says:
  
  2009-10-20 at 11:23
  
  разобрался как исправить??
  
  Reply
Oktolom says:

2008-11-17 at 07:14

Прикольно
Респект
Кстати в одну картинку все сливать не обязательно
:)
тк если поменять один пункт меню нужно менять все
и css тоже

——————————
форум верстальщиков http://html-css.com.ua

Reply
Pingback: С Новым Годом
Сергей says:

2009-01-28 at 17:51

Спасибо огромное за этот урок!!!
благодаря нему я смог сделать себе нормальную менюшку на сайте))… ну, разумеется я там много всего поменял…
У меня вообще была проблема с отступом в эксплорере из-за Списков… не умел делать так что бы отступа не было)… теперь умею, спасибо!!

Reply
1. dokk2018 says:
  
  2009-10-20 at 11:22
  
  …проблема с отступом в эксплорере из-за Списков… у меня тоже. Как убрать?
  
  Reply
Pingback: Креативный дизайн за 15 минут
ruslan says:

2009-08-04 at 17:44

А как сдлать чтобы при наведение менялась сама картинка линка, я пробывал но все равно оставалась изначальная картинка а новая появлялась поверх нее.

Reply
1. Senser says:
  
  2009-10-17 at 11:20
  
  Нужно сделать две картинки в одной,тогда с помощью background-position: bottom при наведении будет меняться картинка. Скачай готовый пример и всё поймёшь.
  
  Reply
Senser says:

2009-10-17 at 11:17

Спасибо! Полезный урок.

Reply
Oleg says:

2009-11-04 at 12:19

Посмотрите как выглядит єтот сайт в IE 6, и вы сильно удевитусь. И этот пареню учит CSS! :)

Reply
1. Anton Shevchuk says:
  
  2009-11-04 at 12:48
  
  IE6 – это что?
  
  Reply
Oleg says:

2009-11-04 at 13:54

Лично для тебя Internet Explorer 6. Знаеш есть такой браузер, которым пользуеть 60% людей во всем мире.

Reply
1. Anton Shevchuk says:
  
  2009-11-04 at 17:59
  
  Вы прикалываетесь или действительно так считаете? О_о
  
  Reply
Oleg says:

2009-11-04 at 23:10

Конешно же шучу.

Reply
Senser says:

2009-11-10 at 15:31

Да, в IE6 кнопки с отступом бОльшим чем в других броузерах. А я делал меню шаблона по этому уроку, прийдется разбираться.

Reply
Lero says:

2010-01-09 at 10:22

Здравствуйте я пишу сайт и у меня есть один вопрос в каком формате сохранять рисунки(просто gif-ухудшает немного качество и вместо плавного перехода одного цвета в другой получается переход построчный, bmp-тоже ухудшает, а мне надо прозрачные фоны очень часто, а jpg-не сохраняет прозрачности и делает фон белым? (заранее спасибо)

Reply
alexdandy says:

2010-01-10 at 16:23

используй gif, он единственный работает в IE, png работает в нормальных браузерах, но в IE не работает с прозрачностью

Reply
Danny says:

2010-02-04 at 03:39

у меня все работает… И .ПНГ в ИЕ тоже. Лучше использовать .ПНГ, он и полупрозрачности поддерживает и качества не портит… хотя, ГИФ тож полезен

Reply
Игорь says:

2010-03-22 at 11:21

Здравствуйте.
Подскажите как можно меню, сделанное в css вложить в таблицу созданную в html для шапки, меню и контента?

Reply
Pingback: 99 техник создания меню для сайта CSS и jQuery | SHEBEKO.COM
shebeko says:

2010-03-25 at 20:40

спасибо за переведенный урок взял его для своего сбьорника- 99 меню для сайта CSS и jQuery

Reply
Calipso says:

2010-05-09 at 13:13

Здравствуйте!
Я полный ноль в JS,но очень хочу такой же блокнот на своем сайте…скажите плиз как его сделать?про див я поняла что к чему,а вот JS для него сделать не могу…буду признательна за вашу помощь)))

Reply
webdevel says:

2010-06-05 at 19:06

Хочу предложить вариант красивого меню на ксс без использования изображений, но без поддержки ИЕ, так что кому это не столь важно:

http://webdevel.pp.ua/archives/36

Reply
RRRoman says:

2010-07-23 at 13:21

Доброго времени суток, прежде всего спасибо большое за статью! но нашел проблему: в IE6 при отображении подсказки она назад не скрывается, сам никак не смог ее спрятать, помогите пожалуйста.

Reply
1. Anton Shevchuk says:
  
  2010-07-23 at 14:37
  
  Советую не использовать IE6, да и помочь с ним не могу – т.к. у меня его нет, и никакого решения я предложить не смогу…
  
  Reply

Люди помогите!я ток недавно в css полез…как правильно вставить код чтобы он работал?

<html>
<head>
<style type="text/css">
css код меню "Всё в одном"
</style>
</head>
<body>
<ul id="menu">
    <li><a href="#" class="home">Home <span></span></a></li>
    <li><a href="#" class="about">About <span></span></a></li>
    <li><a href="#" class="rss">RSS <span></span></a></li>
    </ul>
</body>
</html>

Arvi says:

2010-10-08 at 22:56

Да вот мне кое что тоже интересно..а вот тут показан пример трёх кнопочек…а вот мне к примеру надо сделать 4 ,у меня что то не выходит помогите

Reply
kvins says:

2010-12-01 at 10:03

спс хороший урок тока хотел спросить а как сделать ссылку на другую страницу из кнопки
если там и так все занято?? или можно снаружи еще один <a> поставить

Reply
kvins says:

2010-12-01 at 10:15

а все спс вместо # поставил ссылку сайта тогда у мя 1 вопрос # для чего нужна там?? или чтоб место пустым не оставалось??? просто недавно начал учить и я незнал что можно span так использовать
кстати очень хочется понять а для чего вот ето display: block; за что оно отвечает?

Reply
1. kvins says:
  
  2010-12-01 at 13:23
  
  вот сижу разбираюсь почему именни так написано в стилях ну и изменяя по ходу и обновляю страницу когда я удаляю и потом смотрю что не так и так понимаю зачем она тут и вот у меня возникают вопросы по некоторым тегам
  на примере
  
  }
  #menu a {
  display: block; ????? удаляю а css пофиг работает как работал тогда вопрос зачем он тут???? просто не понимаю зачем ставить тогда лишнее и нерабочее
  text-indent: -900%; если удалить то будет видна ссылка (название)
  position: absolute; отвечает за отступ от родителя
  outline: none; скрывает рамку ссылки
  }
  жду ответа так как тока учусь и нехочу как бот прописывать не понимая о чем пишется)))
  
  вот еще
  
  #menu {
  list-style: none; скрывает квадраты 3 ( не пойму ето что он считает какие 3 картинки?? )
  padding: 0; УДАЛЯЕШЬ И НЕЧЕ НЕ ИЗМЕНЯЕТСЯ (внутрение отступы)
  margin: 0; УДАЛЯЕШЬ И НЕЧЕ НЕ ИЗМЕНЯЕТСЯ (внешние отступы)
  width: 774px; размер задний план
  height: 210px; размер задний план
  background: url(images/menu-bg.jpg) no-repeat; ну ето задний план
  position: relative; для дочерних чтоб отступали от рамки
  left:140px; для рилейтив отступ от края браузера
  top:220px; для рилейтив отступ от края браузера
  }
  
  ето я просто так написал если вопросы у кого то будут как у меня)))))))
  }
  #menu span { для исчезновение если не наведено
  display: none; если удалить то подсказка не прячится
  position: absolute; дает для всех позиций span отступ от родителя а не от браузера
  }
  
  Reply
Andrey says:

2011-01-13 at 13:56

Красивое меню, спасибо.

Reply
Mr.Kot says:

2011-01-24 at 16:34

В IE не отображается. Сам не пользуюсь, но посетители сайта, судя по статистике, (ливинтернет) – 30 процентов браузеров. WTF?!!)

Reply
Pingback: 99 техник создания меню для сайта CSS и jQuery | статей,статьи,статьи рф,кодекс статьи,статьи ук,статьи ук рф,скачать статью,уголовные статьи,бесп
Игорек says:

2011-02-25 at 13:27

Спасибо!!!!

Reply

Фон для меню

Графические кнопочки

HTML код

CSS код

65 thoughts on “CSS меню для начинающих”

Leave a Reply Cancel reply