Многим интересно как сделать на сайте неплохое блочное меню на основе html и css, просмотрев этот мини-урок вы научитесь это делать
Что же, для начала надо сделать на хтмл скрипт самого меню, который будет контролироваться через таблицу стилей CSS, для этого возьмем тег span и прибавим ему класс menu: <span class="menu"> <a href="/">Главная</a> <a href="/gb">Гостевая</a> <a href="/load">Файлы</a> <a href="/publ">Статьи</a> <a href="/forum">Форум</a></span> Между <a href=""> и </a> пишем название пункта меню, а в самом <a href="тут"> пишем ссылку, на страницу при нажатии на кнопку, добавлять можно сколько угодно пунктов меню. Все это добавляем в нужное место на странице. Далее займемся стилями CSS, которые мы назначим в тег <span class="menu"> — добавляем следующий скрипт в таблицу стилей:
.menu {height:20px;width:170px;font:400 11px Arial,Helvetica,sans-serif;text-align:left;} .menu a:link, .menu a:visited {background:#222;color:#ffb119;text-decoration:none;padding-left:16px;line-height:20px;display:block;font-weight:400;border:1px solid #444;text-align:left;} .menu a:hover {background:#222;color:#ffb119;text-decoration:underline;padding-left:16px;line-height:20px;display:block;font-weight:400;border:1px solid #444;text-align:left;}
где .menu означает общий стиль меню .menu a:link, menu a:visited — стиль меню в стандартном состоянии в виде ссылке (как и должно быть) .menu a:hover — стиль меню при наведении на него мышкой
начнем с .menu — height:*** — высота каждого пункта меню width — ширина font — параметры шрифта (толщина размер шрифт) text-align — в какую сторону выравнивать текст (left,right,center,justify)
Далее идем к .menu a:link, menu a:visited, где background отвечает за цвет фона {можно поставить и фоновое изображение типа "background:url(‘ссылка на изображение’);"} color — цвет шрифта text-decoration — декорация шрифта (напр. стандартный или подчеркнутый) padding-left — расстояние между началом текста и левым краем меню (можно убрать) line-height — высота отдельного блока меню display:block; — этот тег делает меню блоком (и авт. переносит следующие пункты меню вниз как тег br) border: 1px solid #444; — размер рамки каждого пункта меню, ее стиль (solid) и цвет хтмл
Содержание .menu a:hover может быть пустым или вообще не назначенным — таким образом меню никак не будет меняться при наведении на него, но можно и поэкспериментировать назначив в .menu a:link (visited) и .menu a:hover разные значения цвета фона, текста, размер текста и прочее, что сделает ваше меню достаточно интересным. Спасибо за внимание, надеюсь вам помогла эта статья — все вопросы пишите в комментариях
