Среда, 27.01.2021, 22:56
Главная  Форум Регистрация Блог RSS
Приветствую Вас, Гость
Меню сайта

Наш опрос
Как вы к нам зашли?


Всего ответов: 2019

установить такой вид опроса
Статистика
Яндекс.Метрика
Онлайн всего: 2
Гостей: 2
Пользователей: 0


Зарегистрировано 31033 (сегодня + 0 новых, вчера + 1 новых), В каталоге файлов 1130 материала(ов), Оставлено 5155 комментариев, На форуме создано тем и ответов.

установить такую статистику

Блок CW результаты

Победы
Победы(10)

Поражения
Поражения(5)


Установить CW блок на свой сайт
Внимание!
Наш сайт адаптирован под браузер Mozilla Firefox
скрипты для uCoz
Скачать/Download
В остальных браузерах наш сайт может отображаться некорректно! (IE,Opera,Google Chrome и т.д)

установить такой блок
Поиск



установить такую кнопку twitter
или такую
красивая кнопка Twitter

Расскажи Друзьям!
Топ комментаторов

установить такой информер
VKONTAKTE

FACEBOOK
Главная страница » Помощь Вебмастеру » Категория Меню для uCoz сайта » Добавлено [22.11.2013, 06:03]

Стильное тёмное выпадающее меню для uCoz

Войти или Зарегистрироваться [скачивать файлы могут только зарегистрированные пользователи!]

Мы тут все собрались, и не только сегодня, любители стильных и простых светлых элементов дизайна. Согласитесь - они отлично смотрятся и подходят под тематику большинства сайтов, даже если вы пишите там про какой-нибудь инвестиционный анализ или нейролингвистическое программирование.

Но, ведь печеньки-то на темной стороне силы! Поэтому, ради исключения, хотим похвастаться найденным очень красивым и стильным темным дизайном выпадающих окон меню. А в темном меню сегодня печеньки. Ну это шутка, конечно, но меню и правда заслуживает вашего внимания - сделано с любовью на CSS для вашего темного сайта. Кстати, для автомобильной или игровой тематики вот прямо отлично. Работает четко и отлажено, в код встраивается скрипт просто и много места не занимает. Цвета, не то что бы черные, но приятно темно-серые, с градиентом. Меню переключается очень плавно, но быстро. Причем эффекты смены цвета при активизации клавиш меню тоже очень хорошо продуманы. Да, постарались люди, делая эту стильную штучку. Берите себе, устанавливайте и пробуйте. А мы от вас хотели бы получить отзыв.

Установка:

В самый низ вашего css вставляйте:

/*------------------------------------------*/
/*--------- Dark Menu Styles Begin ---------*/
/*------------------------------------------*/

/* Main Dark Menu Unordered List First Level Style */
ul.dark_menu {
list-style: none;
padding: 0;
font-family: Arial;
font-size: 14px;
line-height: 14px;
}

/* Clears all floated List Items */
ul.dark_menu:after {
content: "";
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}

/* First Level List Items Style */
ul.dark_menu li {
float: left;
margin: 0 0 0 10px;
position: relative;
}

/* First List Item in First Level Style */
ul.dark_menu li:first-child {
margin: 0;
}

/* List Items Links Style */
ul.dark_menu li a, ul.dark_menu li a:link {
color: #161312;
text-decoration: none;
display: block;
padding: 10px 26px;

/* Text Shadow */
text-shadow: 0 1px 0 #4b433e;

/* Gradient Background */
background: #362f2c; /* Old browsers */
background: -moz-linear-gradient(top, #362f2c 0%, #282321 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#362f2c), color-stop(100%,#282321)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #362f2c 0%,#282321 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #362f2c 0%,#282321 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #362f2c 0%,#282321 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#362f2c', endColorstr='#282321',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #362f2c 0%,#282321 100%); /* W3C */

/* Border Radius */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

/* Box Shadows */
-webkit-box-shadow: inset 0 1px 0 #564b46,
0 1px 1px #181514;
-moz-box-shadow: inset 0 1px 0 #564b46,
0 1px 1px #181514;
box-shadow: inset 0 1px 0 #564b46,
0 1px 1px #181514;

/* Transition Effect */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

/* List Items Links Hover State Style */
ul.dark_menu li a:hover {
color: #73635e;

/* Text Shadow */
text-shadow: 0 1px 1px #000;

/* Gradient Background */
background: #282321; /* Old browsers */
background: -moz-linear-gradient(top, #282321 0%, #362f2c 99%, #362f2c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#282321), color-stop(99%,#362f2c), color-stop(100%,#362f2c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282321', endColorstr='#362f2c',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); /* W3C */

/* Transition Effect */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

/* List Items Links Active and Selected State Style */
ul.dark_menu li a.selected, ul.dark_menu li a:active {
color: #73635e;
background: #282321;

/* Text Shadow */
text-shadow: 0 1px 1px #000;

/* Box Shadows */
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),
0 1px 0 #5e524f;
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),
0 1px 0 #5e524f;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),
0 1px 0 #5e524f;

/* Transition Effect */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

/* Sub Menu Unordered List Second Level Style */
ul.dark_menu li ul {
display: none;
}

/* Before Second Level Unordered List Style */
ul.dark_menu li ul:before {
content: " ";
position: absolute;
display: block;
z-index: 1500;
left: 0;
top: -10px;
height: 10px;
width: 100%;
}

/* Sub Menu Unordered List Second Level Style
When Parent List Item is Hovered */
ul.dark_menu li:hover ul {
position: absolute;
display: block;
z-index: 1000;
left: 0;
top: 44px;
padding: 5px 0;
list-style: none;
background: #282321;

/* Box Shadows */
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),
0 1px 0 #5e524f;
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),
0 1px 0 #5e524f;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),
0 1px 0 #5e524f;

/* Border Radius */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

/* Second Level Menu List Items Style */
ul.dark_menu li ul li {
float: none;
margin: 0 10px;
border-bottom: 1px solid #191614;
border-top: 1px solid #3a3230;
}

/* First List Item in Second Level Menu Style */
ul.dark_menu li ul li:first-child {
margin: 0 10px;
border-top: 0 none;
}

/* Last List Item in Second Level Menu Style */
ul.dark_menu li ul li:last-child {
border-bottom: 0 none;
}

/* Second Level List Items Links Style */
ul.dark_menu li ul li a, ul.dark_menu li ul li a:link {
color: #73635e;
display: block;
background: transparent none;
padding: 10px 20px 10px 5px;
white-space: nowrap;

/* Text Shadow */
text-shadow: 0 1px 2px #000;

/* Box Shadows */
-webkit-box-shadow: 0 0 0 rgba(0,0,0,0);
-moz-box-shadow: 0 0 0 rgba(0,0,0,0);
box-shadow: 0 0 0 rgba(0,0,0,0);

/* Border Radius */
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}

/* Second Level List Items Links Hover State Style */
ul.dark_menu li ul li a:hover {
text-decoration: underline;
background: #2a2523;
}

/*----------------------------------------*/
/*--------- Dark Menu Styles End ---------*/
/*----------------------------------------*/


В то место, где должно быть меню, вставляйте:

<ul class="dark_menu">
<li><a href="#" class="selected">Home</a></li>
<li>
<a href="#">Portfolio</a>
<!-- Sub Menu Begin -->
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Donec lorem</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Donec lorem</a></li>
</ul>
<!-- Sub Menu End -->
</li>
<li>
<a href="#">Blog</a>
<!-- Sub Menu Begin -->
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Donec lorem</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Donec lorem</a></li>
</ul>
<!-- Sub Menu End -->
</li>
<li><a href="#">Contact</a></li>
</ul>


При копирование материалов с сайта необходимо указать активную ссылку источника - Скрипты для uCoz 2013 и Стильное тёмное выпадающее меню для uCoz



Расскажи друзьям интересные новости:


- Установить на свой сайт блок социальных закладок
Категория: Меню для uCoz сайта | Добавил: scripts_for_ucoz | Теги: стильное, Тёмное, uCoz, меню, выпадающее
Просмотров: 3372 | Загрузок: 4 | Рейтинг: 0.0/0


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

Хостинг от uCoz