[Статья] Меню в стиле Windows Vista

03-11-2012, 11:43 PM

Иногда необходимо добавить на форум, ну или на сайт, дополнительное или основное меню.

Попробую рассказать как сделать меню в стиле Windows Vista.

Вот так оно будет выглядеть:

Ну и сразу ссылочка на живой образец того, что мы будем делать.

Для начала создадим само меню с помощью списка, применяя тег <ul>. Каждый элемент <li> будет отдельной кнопкой. Если нам понадобится добавить новую кнопку, внутри <ul> просто добавим еще один <li>. Список поместим внутрь дива и пропишем ему id, чтоб можно было установить для него свой стиль.

Базовый код имеем следующего вида:

HTML Code:

<div id="vista_toolbar">
<ul>
 <li>...</li>
 <li>...</li>
</ul>
</div>

Для создания самой полосы меню мы будем использовать картинку back.gif которую размножим на нужную длинну, а для создания кнопок используем 2 картинки
left.png и right.png

Вот так они выглядят:

и

Их мы пропишем в стиле, но об этом ниже.

Теперь создаём сами кнопки:

HTML Code:

<li>
<a href="#">
<span>
<img align="left" src="add.gif" alt="add new"/>Add New
</span>
</a>
</li>

Здесь я думаю всем понятно, что # заменяем на ссылку назначения кнопки,
а с помощью img мы вставляем в кнопку картинку-иконку. Если она не нужна, то просто удаляем эту строку.
Обращаем внимание на пути к картинке и не забываем указать свои ;)

В итоге для нашего примера мы получаем вот такой вот код меню:

HTML Code:

<div id="vista_toolbar">
<ul>
<li><a href="#"><span><img align="left" src="add.gif"
alt="add new" />Новое</span></a></li>
<li><a href="#"><span><img align="left" src=
"mail.gif" alt="check mail" />Сообщения</span></a></li>
<li><a href="#"><span><img align="left" src=
"chart.gif" alt=
"statistic" />Статистика</span></a></li>
<li><a href="#"><span><img align="left" src=
"mona.gif" alt="my pictures" />Мои рисунки</span></a></li>
<li><a class="right" href="#"><span><img align="left" src=
"sos.gif" alt="help" />Помощь</span></a></li>
</ul>
</div>

Остаётся прописать стили:

HTML Code:

#vista_toolbar {
    float: left;
    font: 12px 'Trebuchet MS',Arial;
    margin: 0;
    padding: 0;
}
#vista_toolbar ul {
    background-image: url("back.gif");
    background-repeat: repeat-x;
    float: left;
    line-height: 32px;
    list-style: none outside none;
    margin: 0;
    padding: 0 10px;
    width: 500px;
}
#vista_toolbar li {
    display: inline;
    padding: 0;
}
#vista_toolbar a {
    color: #FFFFFF;
    float: left;
    padding: 0 3px;
    text-decoration: none;
}
#vista_toolbar a span {
    display: block;
    float: none;
    padding: 0 10px 0 7px;
}
#vista_toolbar a span img {
    border: medium none;
    margin: 8px 4px 0 0;
}
#vista_toolbar a:hover {
    background: url("left.png") no-repeat scroll left center transparent;
}
#vista_toolbar a:hover span {
    background: url("right.png") no-repeat scroll right center transparent;
}
#vista_toolbar a.right {
    float: right;
}

Тут вроде всё понятно ;)
В #vista_toolbar стиль нашего дива, в частности используемые шрифты
Размеры, отступы и фон меню задаём в #vista_toolbar ul
Ну и далее мы видим что будет происходить при наведении на ссылку.
Рекомендую читать вот эту сказку ;) узнаете много интересного ;)

Чуть не забыл

Код меню вставляем в необходимое место, например в шаблон navbar, при необходимости используем таблицу.
Например в таком виде:

HTML Code:

<table width="100%" border="0">
  <tr>
    <td>
код меню
</td>
  </tr>
</table>

А код стиля меню добавляем в дополнительные определения CSS, во второе окошко.

Ну вот вроде и всё ;) В архиве картинки-исходники нашего образца меню.