Горизонтальное выпадающее серебристое меню - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Воскресенье, 11.12.2016
Скрипты для uCoz » Выпадающее меню для сайта uCoz » Горизонтальное выпадающее серебристое меню

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Горизонтальное выпадающее серебристое меню

Серебристое горизонтальное меню с выпадающими вкладками




Меню работает с применением свойств CSS3 без дополнительных скриптов,подойдёт для установки на любой сайт.Разумеется что все параметры могут быть переделаны по Вашему усмотрению,для изменения значений свойствам управления меню используйте редактор находящийся в нижней части материала.На сайте есть материалы по всем свойствам применяемым в этом меню,достаточно ввести в поиске сайта названия свойства.При наличии вопросов или предложений по материалу,используйте формы комментариев.




Пример кода меню для установки


<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="#">Home</a></li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Products Sub Menu 1</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="#">Services</a>
<ul>
<li><a href="#">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="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>



Проверьте пример кода меню в редакторе

Скопируйте код для установки в HTML редактор и проверьте.









Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 3145 | Добавил: IZOTOP | Рейтинг: 0.0/0

    Всего комментариев: 6
    0   Спам
    4 BUAutoParts   (11.11.2014 16:19)
    Аватар BUAutoParts Как сделать размещение пунктов меню по центру?

    +1  
    5 aTmpl   (11.11.2014 18:49)
    Аватар aTmpl По центру сделать можно, при условии что определена совокупная ширина пунктов. Для кода из примера достаточно 500px ширины, это добавить в стили:

    Код

    #menu-bar-center{margin:0 auto;width:500px;}


    Код будет выглядеть вот так:

    Код

    <ul id="menu-bar">
    <div id="menu-bar-center">

    Здесь пункты <li>

    </div>
    </ul>

    0   Спам
    6 BUAutoParts   (12.11.2014 11:23)
    Аватар BUAutoParts Большое спасибо, все получилось)))

    0   Спам
    3 Andrey7177   (06.06.2014 00:43)
    Аватар Andrey7177 Прекрасно сделано. Но вопрос такой: Не работает раскрывающееся меню в IOS, например, Ipod. Проблема на сколько понимаю в Hover. Какой код добавить для работоспосбности меню в IOS? Спасибо.
    cool

    0   Спам
    2 Балотелли   (24.02.2014 14:35)
    Аватар Балотелли Подскажите как сделать чтобы в горизонтальном меню подменю открывались под названиями в менюшке???

    0   Спам
    1 alurbur   (23.01.2013 22:54)
    Аватар alurbur Отлично сделано! И в настройках легко разобраться.


    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]