» »

Горизонтальное меню сайта в цвете серебра


Горизонтальное меню сайта в цвете серебра

Меню сайта горизонтальное, в цветовом оттенке серебра, но а точнее сказать матовой гамме. Что мне в меню понравилось когда его проверял. Код идет сразу со стилями. А это означает вы быстро можете его подогнать под свой дизайн сайта если сам исходник не понравился. Еще у него надписи на стилях, а это значит у них просматривается тень, что очень редко на таком коде увидишь и вы сами можете делать больше и меньше. Идет под меню с разделами и при на видений становиться синем цветом. На этом меню можно много информация разместить и все будит на главной страницы что для портала это не мало важно. Чтоб пользователь или гость мог найти все не искать и не блудит по всему сайту, и как водится просто уходит.
Установка:
Ставим код где вам нужно, но основном в вверх сайта и идем в самый них и прописываем код. Чтоб меню было под шапкой.
Код
<style>  
#menu-bar {  
/* - Ширина меню установлена в 100% - */  
width:100%;  
margin: 0px 0px 0px 0px;  
padding: 6px 6px 0px 6px;  
/* - Высота меню - */  
height: 38px;  
line-height: 100%;  
/* - Округление краёв - */  
border-radius: 24px;  
-webkit-border-radius: 24px;  
-moz-border-radius: 24px;  
/* - Тени - */  
box-shadow: 2px 2px 3px #666666;  
-webkit-box-shadow: 2px 2px 3px #666666;  
-moz-box-shadow: 2px 2px 3px #666666;  
/* - Цвет фона - */  
background: #8B8B8B;  
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#A9A9A9, endColorstr=#7A7A7A);  
background: -webkit-gradient(linear, left top, left bottom, from(#A9A9A9), to(#7A7A7A));  
background: -moz-linear-gradient(top, #A9A9A9, #7A7A7A);  
/* - Бордюр,окаёмка - */  
border: solid 1px #6D6D6D;  
}  
#menu-bar li {  
margin: 0px 6px 0px 6px;  
padding: 0px 0px 6px 0px;  
float: left;  
position: relative;  
list-style: none;  
}  
#menu-bar a {  
/* - Величина шрифта - */  
font-weight: bold;  
/* - Семейство шрифта - */  
font-family: arial;  
/* - Стиль шрифта - */  
font-style: normal;  
/* - Размер шрифта - */  
font-size: 12px;  
/* - Цвет шрифта - */  
color: #E7E5E5;  
text-decoration: none;  
display: block;  
padding: 8px 20px 8px 20px;  
margin: 0;  
border-radius: 10px;  
-webkit-border-radius: 10px;  
-moz-border-radius: 10px;  
text-shadow: 2px 2px 3px #000000;  
}  
#menu-bar .current a, #menu-bar li:hover > a {  
background: #0399D4;  
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EBEBEB, endColorstr=#A1A1A1);  
background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#A1A1A1));  
background: -moz-linear-gradient(top, #EBEBEB, #A1A1A1);  
color: #444444;  
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);  
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);  
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);  
text-shadow: 2px 2px 3px #FFFFFF;  
}  
#menu-bar ul li:hover a, #menu-bar li:hover li a {  
background: none;  
border: none;  
color: #666;  
-box-shadow: none;  
-webkit-box-shadow: none;  
-moz-box-shadow: none;  
}  
#menu-bar ul a:hover {  
background: #0399D4 !important;  
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#04ACEC, endColorstr=#0186BA);  
background: -webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA)) !important;  
background: -moz-linear-gradient(top, #04ACEC, #0186BA) !important;  
color: #FFFFFF !important;  
border-radius: 0;  
-webkit-border-radius: 0;  
-moz-border-radius: 0;  
text-shadow: 2px 2px 2px #FFFFFF;  
}  
#menu-bar ul {  
background: #DDDDDD;  
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#CFCFCF);  
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));  
background: -moz-linear-gradient(top, #FFFFFF, #CFCFCF);  
display: none;  
margin: 0;  
padding: 0;  
width: 185px;  
position: absolute;  
top: 30px;  
left: 0;  
border: solid 1px #B4B4B4;  
border-radius: 10px;  
-webkit-border-radius: 10px;  
-moz-border-radius: 10px;  
-webkit-box-shadow: 2px 2px 3px #222222;  
-moz-box-shadow: 2px 2px 3px #222222;  
box-shadow: 2px 2px 3px #222222;  
}  
#menu-bar li:hover > ul {  
display: block;  
}  
#menu-bar ul li {  
float: none;  
margin: 0;  
padding: 0;  
}  
#menu-bar ul a {  
padding:10px 0px 10px 15px;  
color:#424242 !important;  
font-size:12px;  
font-style:normal;  
font-family:arial;  
font-weight: normal;  
text-shadow: 2px 2px 3px #FFFFFF;  
}  
#menu-bar ul li:first-child > a {  
border-top-left-radius: 10px;  
-webkit-border-top-left-radius: 10px;  
-moz-border-radius-topleft: 10px;  
border-top-right-radius: 10px;  
-webkit-border-top-right-radius: 10px;  
-moz-border-radius-topright: 10px;  
}  
#menu-bar ul li:last-child > a {  
border-bottom-left-radius: 10px;  
-webkit-border-bottom-left-radius: 10px;  
-moz-border-radius-bottomleft: 10px;  
border-bottom-right-radius: 10px;  
-webkit-border-bottom-right-radius: 10px;  
-moz-border-radius-bottomright: 10px;  
}  
#menu-bar:after {  
content: ".";  
display: block;  
clear: both;  
visibility: hidden;  
line-height: 0;  
height: 0;  
}  
#menu-bar {  
display: inline-block;  
}  
html[xmlns] #menu-bar {  
display: block;  
}  
* html #menu-bar {  
height: 1%;  
}  
</style>  
<ul id="menu-bar">  
<li class="current"><a href="#">Главная страница ZORNET.RU</a></li>  
<li><a href="#">ZORNET.RU</a>  
<ul>  
<li><a href="http://zornet.ru/_ld/2/43968886.jpg">ZORNET.RU</a></li>  
<li><a href="#">Products Sub Menu 2</a></li>  
<li><a href="#">Products Sub Menu 3</a></li>  
<li><a href="#">Products Sub Menu 4</a></li>  
</ul>  
</li>  
<li><a href="#">ZORNET.RU</a>  
<ul>  
<li><a href="http://zornet.ru/_ld/35/18535970.jpg">Services Sub Menu 1</a></li>  
<li><a href="#">Services Sub Menu 2</a></li>  
<li><a href="#">Services Sub Menu 3</a></li>  
<li><a href="#">Services Sub Menu 4</a></li>  
</ul>  
</li>  
<li><a href="http://zornet.ru/avatar/12/569149.jpg">ZORNET.RU</a></li>  
<li><a href="#">ZORNET.RU</a></li>  
</ul>
24.08.2013 Просмотров: 877 Комментарий: (0)

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

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

Комментарий: 0
avatar