В этой статье я расскажу как создавать меню на CSS. Такое меню, например, я сделал на этом блоге.

Если же вам нужно выпадающее меню, то познакомтесь со статьей «Выпадающее меню».

HTML основа меню

Я рекомендую делать меню основанное на списке:

<ul>
   <li><a href="ссылка">Элемент 1</a></li>
   <li><a href="ссылка">Элемент 2</a></li>
   ...
   <li><a href="ссылка">Элемент N</a></li>
</ul>

Но его я помещаю в блок <div> и применяю к этому блоку стиль. В итоге код получается такой:

<div id="mainmenu">
   <ul>
      <li><a href="#">Элемент 1</a></li>
      <li><a href="#">Элемент 2</a></li>
      <li><a href="#">Элемент 3</a></li>
   </ul>
</div>

Я не буду заострять внимание на структуре, на синтаксисе и правилах написания CSS кода.

Вертикальное меню

Итак, начнем с вертикального меню. HTML код уже готов, осталось написать стили. Будем делать меню не просто как ссылки, а покрасивее, с выделением фона при наведении мыши.

Напишем стиль для div’a:

#mainmenu{
   float: left;
   width: 200px;
   background: #F5F5F5;
}

Тут все просто: указываем, что блок будет слева, шириной в 200 пикселей, а фон у него будет цвета #F5F5F5.Далее, нужно определить стиль тега ul, но не любого, а только тех которые внутри тега у которого ID = mainmenu. Для этого будем описывать стиль следующим образом:

#mainmenu ul {
   padding: 0;
   margin: 0;
}

«#mainmenu ul» означает, что стиль применится к ul который находится внутри mainmenu.

Дальше напишем стиль для li точно по такой же схеме.

#mainmenu ul li {
   float: left;
   list-style: none;
   width: 200px;
   border-bottom: 1px solid #E0E0E0;
}

В отличии от стиля UL, который применяется ко всем элементам списка, этот стиль для конкретного элемента меню.

Если вы заметили, список ul обычно маркируется жирными точками перед каждой строчкой текста. Атрибут list-style позволяет задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера. В нашем случае мы вообще убираем маркер.

Ну и осталось описать стиль тега a:

#mainmenu ul li a {
   display: block;
   color: black;
   height: 20px;
   line-height: 20px;
   text-decoration: none;
   text-indent: 5px;
}

Атрибут display определяет, как элемент должен быть показан в документе. Сложно описать, как он будет себя вести при значении block, проще посмотреть, как будет выглядеть меню без него. Но не спешите убирать его, потому что ничего не изменится, так как элементы меню еще не выделяются при наведении.

Text-indent устанавливает отступ текста от левого края меню. А text-decoration указывает, что текст не будет подчеркиваться.

На данном этапе элементы меню еще не выделяются при наведении мыши на них. Этим и займемся:

#mainmenu ul li a:hover {
   background: #AC0102;
   color:white;
   text-decoration: none;
}

«:hover» означает, что этот стиль будет использоваться для визуализации тега <a> в случае, если над ним находится курсор мыши. Таким образом, этот стиль просто переопределяет стиль «#mainmenu ul li a». Тоесть параметры, которые определены в основном стиле не изменится при наведении мыши, если только они небыли переопределены. Например, отступ (text-indent) не изменится при наведении мыши. Но если в стиль (a:hover) добавить

text-indent: 10px;

то отступ увеличится (в данном случае) при наведении мыши.

Полный код стиля

Весь код стиля меню выглядит так:

#mainmenu{
   float: left;
   width: 200px;
   background: #F5F5F5;
}

#mainmenu ul {
   padding: 0;
   margin: 0;
}

#mainmenu ul li {
   float: left;
   list-style: none;
   width: 200px;
   border-bottom: 1px solid #E0E0E0;
}

#mainmenu ul li a {
   display: block;
   color: black;
   height: 20px;
   line-height: 20px;
   text-decoration: none;
   text-indent: 5px;
}

#mainmenu ul li a:hover {
   background: #AC0102;
   color:white;
   text-decoration: none;
}

Горизонтальное меню

Из вертикального меню сделать горизонтальное не так сложно. Достаточно изменить ширину «#mainmenu» на большую (например, 1000px). Я специально не сделал у «#mainmenu ul li» атрибут width = 100% для того, чтобы было проще рассказать, как сделать горизонтальное меню из вертикального. Т. е. для вертикального меню ширину лучше сделать 100%, хотя это не так важно.

Заключение

Вот так просто делается меню с неплохим эффектом при наведении. Но это не прямое указание, что делать его нужно только так, с такими эффектами, размерами и прочими параметрами. Это только обучающий пример, все остальное дело вашей фантазии. Лично я, в некоторых дизайнах, делал выделения не просто однотонным цветом, а с картинкой на фоне (например, градиент, или какая-либо другая декоративная картинка). Пример такого подхода вы можете увидеть на этом блоге, как в верхнем меню так и в правом.

Также в некоторых случаях необходимо сделать стиль первого элемента меню отличным от остальных. Об этом я расскажу в одной из следующих статей.