Информативное меню

Сегодня я опишу способ создания css меню, в котором при наведении на любой из пунктов, будет появляться краткое описание этого пункта.

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

Само меню представляет из себя список, а описание обрамляется тегом <span>, который появляется при наведении курсора появляется или остаётся, соответственно, в ином случае скрытым. Описание простое, код тоже.

HTML

Структура html части кода выглядит примерно таким образом:

Исходный код

<ul class="sidenav">
 <li>
  <a href="#">Пункт меню
  <span>Описание пункта меню.</span>
  </a>
 </li>
 <li>
  <a href="#">2 Пункт меню
  <span>Описание второго пункта меню.</span>
  </a>
 </li>
</ul>

CSS

Стили меню:

Исходный код

ul.sidenav {
background:none repeat scroll 0 0 #fff;
float:left;
font-size:1.2em;
list-style:none outside none;
margin:0;
padding:0;
width:200px;
}
ul.sidenav li a {
color:#333;
display:block;
padding:10px 10px 10px 35px;
text-decoration:none;
width:155px;
}
ul.sidenav li a:hover {
background:#fff;
color:#000;
}
ul.sidenav li span {
display:none;
}
ul.sidenav li a:hover span {
display:block;
font-size:0.8em;
padding:10px 0;
}

Или (второй вариант) так:

Исходный код

ul.sidenav {
background:none repeat scroll 0 0 #737373;
border-bottom:1px solid #ссс;
float:left;
font-size:1.2em;
list-style:none outside none;
margin:0;
padding:0;
width:200px;
}
ul.sidenav li a {
background:url("sidenav_a.gif") no-repeat scroll 5px 7px transparent;
border-bottom:1px solid #404040;
border-top:1px solid #AFAFAF;
color:#FFFFFF;
display:block;
padding:10px 10px 10px 35px;
text-decoration:none;
width:155px;
}
ul.sidenav li a:hover {
background:url("sidenav_a.gif") no-repeat scroll 5px 7px #333333;
border-top:1px solid #1C1C1C;
}
ul.sidenav li span {
display:none;
}
ul.sidenav li a:hover span {
display:block;
font-size:0.8em;
padding:10px 0;
}

В итоге, вы получаете то, что в можно увидеть на этой странице или второй вариант здесь.

Казалось бы, довольно простое меню и зачем о нём писать. Мне кажется, это меню смотрится гораздо интересней и симпатичней, чем то, что мы видим на большинстве блогов – простой список категорий/рубрик, описание которых, храниться в <title>.

Думаю летом купить себе ноутбук, поставить на него Linux, и забыть о Windows, как о страшном сне, но прекрасно понимаю, что это утопия и как минимум ради WebMoney придётся ставить виртуальную машину с виндой. Скорей всего, всё же поставлю семёрку, когда она только появилась, протестировал, понравилось, сейчас думаю ещё лучше (у меня была урезанная копия), благо программы для windows 7 есть

Успехов и удачи вам в ваших делах и начинаниях