Архив рубрики «HTML и CSS»

В этой статье я расскажу как создавать меню на 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. Прочитать остальную часть записи »