Красиво сделано вертикальное мню в стили минимализм для светлого сайта. Его нужно только поставить в контейнер и не каких блоков для него не предусмотрено. При наведение на категорию, то будет меняться оттенок самой стрелки и фон станет на нем светлее. Тематически, если рассудить, то оно общение, тут главное чтоб по дизайну подошло. Имеет в низу черту, под индивидуальные разделы, но если их нет, то можно просто снять. Также к дизайну относиться его черты, как 3 круга, которые вы можете сменить или просто сделать их разными по оттенку.
Так будет смотреться на простом сайте.
Переходим к установке:
Устанавливаем в контейнер, но как уже сказано, не в блок, как делают обычно.
Код <div id="w_menu_block"> <div id="w_menu_top"><b>Меню сайта</b> <div> <span style="background: #355C88;"></span> <span style="background: #355C88;"></span> <span style="background: #355C88;"></span> </div> </div> <ul> <li><a href="#"><i></i>Скрипты для uCoz</a></li> <li><a href="#"><i></i>Шаблоны для uCoz</a></li> <li><a href="#"><i></i>Заработок на uCoz</a></li> <li><a href="#"><i class="activ_ss"></i>Авторство</a></li> <li><a href="#"><i></i>Блог сайта</a></li> <li><a href="#"><i></i>Новости сайта</a></li> <li style="border-bottom: 1px solid #C3C8CB;margin-bottom:10px;padding-bottom:10px;"><a href="#"><i></i><b>Форум сайта</b></a></li> <li><a href="#"><i></i>Предоставляемые услуги</a></li> <li><a href="#"><i></i>Предложить материал</a></li> </ul> </div>
CSS:
Код #w_menu_block {
}
#w_menu_block ul { list-style: none; padding: 0px; margin: 3px 0 0; }
#w_menu_block ul li { }
#w_menu_block ul li a { display: block; padding: 0 10px; color: #797D7F; font:13px Tahoma,Arial,sans-serif; text-decoration: none; line-height: 30px; } #w_menu_block ul li a:hover { background: #FFF; border-radius: 5px; } #w_menu_block ul li a:hover i { border: 7px solid transparent; border-left: 9px solid #0074B8; }
#w_menu_block ul li i { float: left; border: 7px solid transparent; border-left: 9px solid #797D7F; margin-top: 9px; } #w_menu_block ul li i.activ_ss { border: 7px solid transparent; border-left: 9px solid #0074B8; }
#w_menu_block ul li span{ float: right; }
#w_menu_top { padding: 0 10px; font:17px Tahoma,Arial,sans-serif; color: #0D608A; line-height: 35px; } #w_menu_top div { float: right; margin-top: 13px; } #w_menu_top span { background: #000; float: left; margin-right: 3px; margin-top: center; display: block; width: 12px; height: 12px; border-radius: 50%; }
На этом установка закончена, все сохраняем. Автор: waaka Источник: http://boba.ucoz.com/ |