Я что-то плохонепонял

Меню вертикальное делаем сами с помощью css и уже знакомых нам методов работы с меню.

Очень часто или даже постоянно на сайтах используют вертикальные меню, так как они очень удобны, практичны и просты в создании. Вот и я решил написать в этой заметке урок по созданию вертикального меню, которое безотказно работает во многих браузерах. Когда вы научитесь создавать такие меню, то потом вполне очень быстро будете создавать совершенно другие, более сложные меню на основе этой, так сказать технологии.

Итак, для создания меню необходимо записать пункты меню в маркированный упорядоченный список вот таким образом:

<ul>
<li><a href="#">Партнеры</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Товары</a></li>
<li><a href="#">Люди</a></li>
<li><a href="#">Новости</a></li>
</ul>

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

Обнуляем поля и отступы и скрываем квадратики не нумерованного списка перед пунктами меню.

ul {
margin:0;
padding:0;
list-style-type:none;}

Вообще -то предварительно необходимо нарисовать кое-какую картинку для имитации кнопки меню, но для первого раза можете воспользоваться моей.

Сразу хочу обратить внимание на то, что эта картинка в два раза больше по ширине, чем наше будущее меню. Сделано это для того, что бы изменять цвет кнопочки при наведении. Смотрим код css для ссылок меню, находящихся между тегами ul:

ul a {
display:block;
width:200px;
height:40px;
line-height:40px;
color:#000;
text-decoration:none;
text-indent:45px;
background-image:url (vert-menu-bg.gif);
background-repeat:no-repeat;}

Ширина 200 пикселей, высота 40 пикселей (ширина картинки 400 и высота 40), высоту строки так же устанавливаем 40 пикселей, цвет ссылки делаем черный и убираем подчеркивание. Согласно изображению стрелки на нашей кнопочке необходимо сделать отступ текста на 45 пикселей. Последние две строки добавляют нашу картинку бекграундом и запрещают ее повторение по икс и игрек.

Меню почти готово, осталось поработать над кодом, которые определяет правила при наведении курсора мышки на ссылку.

a:hover {
background-position:right;
color:#fff;}

Как видно код простейший. Первая строка определяет положение бекграунда начиная с правой стороны, тем самым при наведении куросра пункт меню подсвечивается зеленым цветом. Вторая строка определяет цвет наведенной ссылки. Поумолчанию она остается подчеркнутой.

Вот и все. Для создания вертикального меню теперь у Вас будет уходить не более 15 минут (зависит от Ваших способностей в фотошопе и фантазии). Самое главное изучить и понять оснуву, а дальше дело техники и полет фантазии. Например при наведении можно сделать сдивг текста на два пикселя вправо, чем симитировать «живое меню».

Недавно наш начальник решил устроить корпоративный вечер и как ни странно все это происходило на природе. Многие из нашей компашки задумались почему не в ресторане, а я совершенно случайно наткнулся на сайт проведение корпоративных праздников на природе и узнал наконец-то почему мы гуляли не как обычно в ресторане. С тех пор частенько отдыхаем на природе.