Вертикальное меню с боку сайта
 | |
| Вертикальное меню которое будит располагаться с боке сайта. Оно разноцветное и каждый цвет можно сделать под некий ваш раздел сайта. При наведение меню немного выезжает, сто дает понять что вы туда навели куда хотели. Меню по своему дизайну яркое и каждый раздел окрашен в свой яркий цвет. Меню будит стоять с боку сайта а с какой стороны решать вам. Меню оригинальное редко где встретишь такое. Так же можно из этого меню сделать просто разделы модулей, к примеру новости, файлы и остальные разделы модуля которые у вас есть на сайте. Код устанавливаем вверх сайта: Код <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="http://zornet.ru/l" 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> | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |