Лого сайта
Веб-компас сайтостроителей
web2-site.ru
Войти
Вход в аккаунт
Восстановить пароль
Регистрация на сайте
Регистрация
Закрыть
HTML CSS JavaScript PHP Еще Разное
Искать статьи
Примеры с CSS
/ Все статьи / CSS / Примеры с CSS / Меню с помощью CSS

Меню с помощью 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>
Еще статьи из данной категории
Комментарии
Всего комментариев: 3
Мечник | 26.08.2010, 07:03
Довольно стандартное меню, но полезное. Можно так же горизонтальное сделать.
Ответить
Помогите | 09.09.2010, 07:30
Почему у меня в браузере Мозиле шрифт показывается без сглаживания, а в эксплорере сглаженный?
Ответить
admin (Автор статьи) | 09.09.2010, 20:14
Обратитесь к разработчикам браузеров с этим вопросом! ;)
Ответить
Добавить комментарий
Новости сайта
Последние публикации в каталоге статей
© web2-site.ru - Веб-компас сайтостроителей
Наш сайт переехал с сайта www.linedmk.com на web2-site.ru
Работает на
CMS boxcode.ru