• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Горизонтальное меню стиль серебренный (Для сайта на системе ucoz)
Горизонтальное меню стиль серебренный
Kosten
Среда, 01 Января 2014 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44355
Награды: 70
Очень даже не чего по своему дизайну горизонтальное меню. Которое создано на чистом CSS и установка у него не сложная.
Просто вверх сайта заходит и в самом низу прописываем сам код в котором уже прописаны стили. Так же меню очень функциональное и есть у него под меню.
Если вам цвет не подходит, то вы просто можете создать свой оттенок цвета прописав его в стилях.



Сам код со стилями как установить написал в верхнем поте этого материала.
Код
<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="#">ZORNET.Ru 1</a></li>
<li><a href="#">ZORNET.Ru 2</a></li>
<li><a href="#">ZORNET.Ru 3</a></li>
<li><a href="#">ZORNET.Ru 4</a></li>
</ul>
</li>
<li><a href="#">ZORNET.Ru</a></li>
<ul>
<li><a href="#">ZORNET.Ru 1</a></li>
<li><a href="#">ZORNET.Ru 2</a></li>
<li><a href="#">ZORNET.Ru 3</a></li>
<li><a href="#">ZORNET.Ru 4</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

Хочу заметить что в скрипте нет не одной ссылке, разве что только для меню.
Прикрепления: 3570442.jpg (23.3 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Горизонтальное меню стиль серебренный (Для сайта на системе ucoz)
  • Страница 1 из 1
  • 1
Поиск: