Меню с помощью CSS

Сделаем меню с изменяющимся фоном (фоновым рисунком) при наведении курсора на пункт меню. Меню будет вертикальным, и состоять из текста на каком-либо фоне. Также можно сделать и горизонтальное меню.
Для начала заключим меню в блок div, который обозначим уникальным идентификатором "menu", по которому будет понятно, что этот блок содержит меню. Далее, просто указать размеры элементу <a> (то есть ссылке) нельзя в браузерах Opera и Firefox, но можно в браузере Internet Explorer, что не является правильным. Поступим следующим образом: поместим в каждый элемент <a> (то есть в ссылку) элемент div, которому-то можно задавать необходимые размеры. Соответственно получим HTML-код меню с несколькими пунктами

Код

<div id="menu">
<a href="#"><div>Пункт 1</div></a>
<a href="#"><div>Пункт 2</div></a>
<a href="#"><div>Пункт 3</div></a>
<a href="#"><div>Пункт 4</div></a>
<a href="#"><div>Пункт 5</div></a>
</div>

Зададим блоку с меню ширину, например, 100px и другие необходимые свойства. Пусть каждый пункт меню будет в прямоугольной рамке, для этого блоку "menu" зададим свойство border для трех сторон: верней, левой и правой частей. А нижнюю часть прямоугольной рамки каждого пункта мы сделаем позже.

Код

#menu { width:100px; background:#80E4EA; text-align:center; border:solid 1px #000; border-bottom:none; }

Можно придать первоначальный вид тексту ссылок, например, убрать подчеркивание

Код

#menu a { text-decoration:none; }

Также нужно указать свойства и блоку div

Код

#menu div { width:100%; cursor:pointer; border-bottom:solid 1px #000; }

Свойство width:100% нужно для корректного отображения пункта меню. Свойство "cursor: pointer" нужно для браузера Internet Explorer, чтобы курсор принимал вид указателя находящегося над ссылкой. Также свойством border-bottom задаем нижнюю черту у пункта меню.
Теперь можно указать свойства, которые будут определять вид наших пунктов меню при наведении на них курсора. И тут есть одна особенность. Нужно указывать одинаковые свойства для селектора "#menu a:hover" и для селектора "#menu a:hover div"

Код

#menu a:hover { background:#0080FF; color:#FFFFFF; }
 #menu a:hover div { background:#0080FF; color:#FFFFFF;}

В целом наш код будет выглядеть следующим образом

Код

<html>

<head>
  <title>Меню на CSS</title>
  <style>
  
  body { font-family: verdana, sans-serif; font-size:13px; }
  #menu { width:100px; background:#80E4EA; text-align:center; border:solid 1px #000; border-bottom:none;}
  #menu a { text-decoration:none; }
  #menu div { width:100%; cursor:pointer; border-bottom:solid 1px #000; }
  #menu a:hover { background:#0080FF; color:#FFFFFF; }
  #menu a:hover div { background:#0080FF; color:#FFFFFF;}
  
  </style>
</head>
<body>
<h1>Меню с помощью CSS</h1>
<div id="menu">
<a href="#"><div>Пункт 1</div></a>
<a href="#"><div>Пункт 2</div></a>
<a href="#"><div>Пункт 3</div></a>
<a href="#"><div>Пункт 4</div></a>
<a href="#"><div>Пункт 5</div></a>
</div>

</body>
</html>

Просмотреть работу данного меню можно на страничке с "примером". Можно в качестве фона задать также и какой-либо рисунок (в свойстве background). Это уже несложно.
Можно сделать меню, состоящее только из рисунков (то есть пункты меню без текста). Но надо помнить, что поисковые машины не различают текст на рисунках, и пользователи могут отключать отображение рисунков в браузере. Для меню состоящего из рисунков надо будет указать для каждого элемента <a> (то есть ссылки) свой уникальный класс, и прописать фоновый рисунок для случаев когда курсор не находится над пунктом и находится над пунктом. Например

Код

<html>

<head>
  <title>Меню на CSS</title>
  <style>
  
  body { font-family: verdana, sans-serif; font-size:13px; }
  
  #menu_graf { width:100px; background:#0000FF;}
  #menu_graf a { text-decoration:none; }
  #menu_graf div { width:100px; height:30px; cursor:pointer; }
  #menu_graf a.knopka1 { background: url("images/button_1.gif") no-repeat; }
  #menu_graf a.knopka1 div { background: url("images/button_1.gif") no-repeat; }
  #menu_graf a.knopka1:hover { background: url("images/button_1_hover.gif") no-repeat; }
  #menu_graf a.knopka1:hover div { background: url("images/button_1_hover.gif") no-repeat; }
  
  #menu_graf a.knopka2 { background: url("images/button_2.gif") no-repeat; }
  #menu_graf a.knopka2 div { background: url("images/button_2.gif") no-repeat; }
  #menu_graf a.knopka2:hover { background: url("images/button_2_hover.gif") no-repeat; }
  #menu_graf a.knopka2:hover div { background: url("images/button_2_hover.gif") no-repeat; }
  
  #menu_graf a.knopka3 { background: url("images/button_3.gif") no-repeat; }
  #menu_graf a.knopka3 div { background: url("images/button_3.gif") no-repeat; }
  #menu_graf a.knopka3:hover { background: url("images/button_3_hover.gif") no-repeat; }
  #menu_graf a.knopka3:hover div { background: url("images/button_3_hover.gif") no-repeat; }
  
  #menu_graf a.knopka4 { background: url("images/button_4.gif") no-repeat; }
  #menu_graf a.knopka4 div { background: url("images/button_4.gif") no-repeat; }
  #menu_graf a.knopka4:hover { background: url("images/button_4_hover.gif") no-repeat; }
  #menu_graf a.knopka4:hover div { background: url("images/button_4_hover.gif") no-repeat; }
  
  </style>
</head>
<body>

<div id="menu_graf">
<a class="knopka1" href="#"><div>&nbsp;</div></a>
<a class="knopka2" href="#"><div>&nbsp;</div></a>
<a class="knopka3" href="#"><div>&nbsp;</div></a>
<a class="knopka4" href="#"><div>&nbsp;</div></a>
</div>

</body>
</html>

Статью добавил пользователь

admin
Все статьи пользователя (45) »»
Категория

CSS / Примеры с CSS
Дата размещения 02.07.2008, просмотров 11704

Еще статьи из данной категории

Предыдущие статьи

Верстка блоками DIV

Следующие статьи

Всплывающая подсказка

Комментарии к публикации

Всего комментариев: 3

У вас в браузере отключен JavaScript! Пожалуйста, включите JavaScript для возможности оставлять комментарии.

прохожий: Мечник | 26.08.2010, 07:03 #

Довольно стандартное меню, но полезное. Можно так же горизонтальное сделать.

Ответить

прохожий: Помогите | 09.09.2010, 07:30 #

Почему у меня в браузере Мозиле шрифт показывается без сглаживания, а в эксплорере сглаженный?

Ответить

Автор статьи: admin | 09.09.2010, 20:14 #

Обратитесь к разработчикам браузеров с этим вопросом! ;)

Ответить

Добавить комментарий

У вас в браузере отключен JavaScript! Пожалуйста, включите JavaScript для возможности оставлять комментарии.

Новости сайта

 05.05.2022

Наш сайт переехал с домена linedmk.com на домен web2-site.ru

Уважаемые пользователи, наш сайт переехал на новый домен, но все материалы останутся без изменений.
 06.04.2020

Обновление нашего сайта

Уважаемые пользователи, сегодня был обновлен наш сайт www.linedmk.com – сделан новый адаптивный дизайн, улучшена навигация по сайту и улучшен поиск по статьям.
 12.10.2012

Официальное прекращение поддержки CMS linedmk.com

С сегодняшнего дня официально прекращена поддержка продуктов реализованных на CMS linedmk.com.

Последние публикации в каталоге статей

Партнеры сайта

Современный бесплатный скрипт интернет-магазина на CMS boxcode.ru.

Доска бесплатных объявлений Краснодара и каталог фирм, магазинов, компаний и организаций Краснодарского края.

Наш сайт переехал с сайта www.linedmk.com на web2-site.ru

Работает на
CMS boxcode.ru