Приморско-Ахтарск - Мой город Приморско-Ахтарск! - Обзор

Регистрация

Вход
Четверг, 16.01.2025, 08:23
Открой город для себя!               Мой город Приморско-Ахтарск!
PDA версия сайта | ОднаКнопка |Приветствую Вас Гость | RSS
Категории раздела
Всё для uCoz [155]
Скрипты, слайдеры, украшательства
Новости из мира софта [1]
О релизах новых продуктов и версий, а также о значительных событиях из мира софта.
Продвижение сайтов [19]
Продвижение молодых сайтов


Реклама

САЛОН КРАСОТЫ "КЛЕОПАТРА"
kleo

Наш опрос
Какой отдых предпочтительней ?
Всего ответов: 501
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Форма входа
Главная » 2013 » Октябрь » 28 » Вертикальное разноцветное меню на CSS3
15:10
Вертикальное разноцветное меню на CSS3
Меню лёгкое и не будет нагружать страницы Вашего сайта. Для установки на страницу просто отредактируйте содержимое названий и ссылок. Можно устанавливать весь код в Верхней части сайта. Если Вам не понятна работа тегов или свойств, воспользуйтесь поиском сайта. Основные свойства в примере кода выделены ссылками,посмотрите материал чтобы быть в курсе.


Код
<style>  
.menuHolder2 {position: relative; margin-left:10px; float:left; overflow:hidden; width:150px; height:400px; font:normal bold 11px/35px verdana, sans-serif;}  
.menuHolder2 .shadow {width:10px; height:90%; top:5%; left:-9px; position:absolute; z-index:100; background:#888;  
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);  
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);  
-o-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);  
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);  
}  
ul.menu2 {margin:0 0 0 1px; list-style: none; display:block; width: 150px; position:relative; padding:60px 0;}  
ul.menu2 li {margin:5px 0 0 0;}  
ul.menu2 li a {background:#aaa; color:#ddd; padding:0 15px; width:90px; display:block; text-decoration:none;  
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);  
-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);  
-o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);  
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);  
-webkit-border-top-right-radius: 10px;  
-webkit-border-bottom-right-radius: 10px;  
-moz-border-radius:0 10px 10px 0;  
-o-border-radius:0 10px 10px 0;  
border-radius:0 10px 10px 0;  
-webkit-transition: all 0.3s ease-in-out;  
-moz-transition: all 0.3s ease-in-out;  
-o-transition: all 0.3s ease-in-out;  
transition: all 0.3s ease-in-out;  
}  
ul.menu2 li a.red {background:#a00;}  
ul.menu2 li a.orange {background:#da0;}  
ul.menu2 li a.yellow {background:#aa0;}  
ul.menu2 li a.green {background:#060;}  
ul.menu2 li a.blue {background:#00a;}  
ul.menu2 li a.indigo {background:#2b0062;}  
ul.menu2 li a.violet {background:#682bc2;}  
ul.menu2 li a:hover {background:#aaa; color:#fff; padding:0 15px 0 40px;}  
ul.menu2 li a.red:hover {background:#c00;}  
ul.menu2 li a.orange:hover {background:#fc0;}  
ul.menu2 li a.yellow:hover {background:#cc0;}  
ul.menu2 li a.green:hover {background:#080;}  
ul.menu2 li a.blue:hover {background:#00c;}  
ul.menu2 li a.indigo:hover {background:#5b1092;}  
ul.menu2 li a.violet:hover {background:#8a2be2;}  
</style>  
<div class="menuHolder2">  
<ul class="menu2">  
<li><a href="#url" class="red">М Е Н Ю 1</a></li>  
<li><a href="#url" class="orange">М Е Н Ю 2</a></li>  
<li><a href="#url" class="yellow">М Е Н Ю 3</a></li>  
<li><a href="#url" class="green">М Е Н Ю 4</a></li>  
<li><a href="#url" class="blue">М Е Н Ю 5</a></li>  
<li><a href="#url" class="indigo">М Е Н Ю 6</a></li>  
<li><a href="#url" class="violet">М Е Н Ю 7</a></li>  
</ul>  
<div class="shadow"></div>  
</div>
Категория: Всё для uCoz | Просмотров: 783 | Добавил: primahtarsk | Рейтинг: 5.0/1
Поиск