» »

Меню горизонтальное разноцветное на CSS3


Меню горизонтальное разноцветное созданное на CSS3. Очень удобное на сайте, так как можно на каждом оттенке написать раздел или категорий и по гамме уже знать. Да и так сайт оно украсит своей оригинальностью, так как при наведение будет эффект.

Код
<style>
.menu1Holder {position:relative; float:left; overflow:hidden; font:normal bold 11px/35px verdana, sans-serif;margin:30px;}
.menu1Holder .shadow {height:10px; width:90%; left:5%; top:-9px; position:absolute; z-index:100; background:#888;
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
-o-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
}
ul.menu1 {margin:0; list-style:none; display:block; float:left; height:100px; position:relative; padding:0 60px;}
ul.menu1 li {margin:0 5px 0 0; float:left;}
ul.menu1 li a {color:#ddd; padding:0 10px; display:block; text-decoration:none;
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
-o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius: 0 0 10px 10px;
-o-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
ul.menu1 li a.red {background:#a00;}
ul.menu1 li a.orange {background:#da0;}
ul.menu1 li a.yellow {background:#aa0;}
ul.menu1 li a.green {background:#060;}
ul.menu1 li a.blue {background:#00a;}
ul.menu1 li a.indigo {background:#2b0062;}
ul.menu1 li a.violet {background:#682bc2;}
ul.menu1 li a:hover {background:#aaa; color:#fff; padding:10px 10px 0 10px;}
ul.menu1 li a.red:hover {background:#c00;}
ul.menu1 li a.orange:hover {background:#fc0;}
ul.menu1 li a.yellow:hover {background:#cc0;}
ul.menu1 li a.green:hover {background:#080;}
ul.menu1 li a.blue:hover {background:#00c;}
ul.menu1 li a.indigo:hover {background:#5b1092;}
ul.menu1 li a.violet:hover {background:#8a2be2;}
</style>
<div class="menu1Holder">
<ul class="menu1">
<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>
24.02.2016 Просмотров: 575 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
tsakonter
tsakonter 25.02.2016 00:281
0
Нормальное меню, ставил точно такое, но оно с боку только было.
Tergran
Tergran 25.02.2016 00:342
0
Такое меню, лучше на темный дизайн, если с боку будет, то на фон, просто чтоб теней так сильно видно не было, хотя и на светлом это меню стоит.
Maryges
Maryges 25.02.2016 00:363
0
Но лучше одним цветом сделать, серым или темным, чтоб можно было на светлый дизайн поставить, но смотря какой там второй оттенок.
Alex_L_X
Alex_L_X 25.02.2016 00:404
0
я для прикола делал его для форума вместо "ЛС"-"УЧАСТНИКИ"-"ПРАВИЛА" и т.д.
все одного цвета, черного.
1-е меню в списке было "сообщения"
когда было непрочитанное то оно становилось красным
Maryges
Maryges 26.02.2016 22:445
0
Здесь просто кому как нравиться, мне вот цветной не очень.
avatar