вРазные полезности

Меню горизонтальное разноцветное на 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>

источник: zornet.ru

Похожие посты