Вертикальное меню с помощью CSS

Как вы понимаете без меню ссылок на сайте ни как нельзя обойтись и поэтому возникает вопрос, «а как лучше, качественней и красивее его сделать?», а лучше сделать это с помощью CSS и в этом уроке я вам наглядно продемонстрирую, как сделать вертикальное CSS меню.

Итак давайте сразу посмотрим то, к чему будем идти на протяжении всего урока:

Как вы поняли, это меню из шести ссылок при наведении мышью на какой-либо пункт, ссылка меняется как в «Пример 3», как мне кажется это достаточно интересный вариант реализации меню, не сложный и очень эффектный. Давайте для начала обратимся к html и посмотрим, как это будет выглядеть:

<div class="menu">
<ul>
<li><a href="#">Пример 1</a></li>
<li><a href="#">Пример 2</a></li>
<li><a href="#">Пример 3</a></li>
<li><a href="#">Пример 4</a></li>
<li><a href="#">Пример 5</a></li>
<li><a href="#">Пример 6</a></li>
</ul>
</div>

Для тех кто не все понял кратко поясню, мы создали блок <div> и присвоили ему класс menu (который мы далее опишем), после этого открываем список <ul> и перечисляем пункты с ссылками <li><a href="#"> … здесь я думаю все должно быть предельно ясно.

Идем дальше пора посмотреть самую суть, а именно CSS код:

<style type="text/css">
.menu {
font-size:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.menu ul {
list-style: none;
}
.menu li {
background:url(bg.png) no-repeat;
border-top: 1px solid #000000;
width: 200px;
}
.menu li a{
color:#FFFFFF;
text-decoration: none;
}
.menu li a:hover {
background:url(bg1.png) no-repeat;
display: block;
}
</style>

Разбираем все по пунктам и так классу menu мы задали только размер шрифта font-size:14px;, и тип шрифтов font-family:Verdana, Arial, Helvetica, sans-serif; затем мы отменили точки для тега <ul>, параметром list-style: none;

Теперь самое интересное, сами пункты меню <li> для них мы задаем фоновый рисунок background:url(bg.png) и указываем необязательный параметр no-repeat; который отменяет повторение фонового рисунка. Далее для визуального разграничения пунктов меню мы делаем верхнее подчеркивание каждого пункта полосой в один пиксель, черного цвета border-top: 1px solid #000000; и задаем ширину width: 200px;

Следующее, что мы делаем это присваиваем ссылкам цвет, так как когда текст у нас обозначается как гиперссылка цвет у нас меняется и появляется подчеркивание, мы от этого избавляемся задаем цвет текста белый color:#FFFFFF; и убираем подчеркивание text-decoration: none;

Ну и последнее (a: hover) этот параметр указывает на то как изменятся условия для пункта меню с ссылкой если на него будет наведен курсор мыши, и соответственно у нас должен измениться фоновый рисунок background:url(bg1.png) no-repeat; и мы должны отобразить изменение не только по текстом а на весь пункт для этого пишем display: block; что в свою очередь показывает весь блок.

Это достаточное простое и очень эффективное решение в котором я думаю сможет разобраться любой и я в свою очередь пытался как можно подробнее объяснить каждый пункт как сделать css меню вертикальное. Будут вопросы пишите всегда рад ответить…

Дата публикации:2010-03-22

Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!