Наша кнопка
Скачать красивые рипы сайтов ucoz и на заказ


Реклама на UC
]]> ]]>
Популярные статьи
Архив новостей
Июнь 2014 (1)
Декабрь 2012 (7)
Ноябрь 2012 (11)
Октябрь 2012 (7)
Сентябрь 2012 (1)
Июль 2012 (1)
 Все категории:
Опрос
Оцените новый шаблон!
 
Это интересно
]]>
загрузка...
]]>
РЕКЛАМА
]]> ]]>
ИНТЕРЕСНОЕ
ПОСЛЕДНИЕ ОТВЕТЫ С ФОРУМА
Скрипты для Ucoz на UCOZ-COPY.RU

Интересное

]]>
загрузка...
]]>
Распечатать

Выпадающее меню на CSS3 скачать бесплатно

 

Выпадающее меню на CSS3

 

Уникальное в своем роде, выпадающее, горизонтальное меню на основе CSS3. Все субменю, которые выпадают, эффектно выглядят, оснащенны приятной анимацией. Это выпадающее меню, отлично подойдет, для сайтов любой тематики. Ни каких сложных скриптов, все команды, и яркие эффекты меню, работают, на основе CSS, что, конечно же, не грузит сайт.

 

Приступим к установке меню:

Устанавливаем, этот код скрипта, в то место, где будит стоять оно, обычно, это верхняя часть сайта:

 <ul class="nav"> 
  <li><a href="#">Главная</a></li>
  <li><a href="#">Уроки</a>
  <ul class="subs">
  <li><a href="#">HTML / CSS</a></li>
  <li><a href="#">JS / jQuery</a></li>
  <li><a href="#">PHP</a></li>
  <li><a href="#">MySQL</a></li>
  <li><a href="#">XSLT</a></li>
  <li><a href="#">Ajax</a></li>
  <li><a href="#">HTML / CSS</a></li>
  </ul>
  </li>
  <li><a href="#/">Ресурсы</a>
  <ul class="subs">
  <li><a href="#">PHP</a></li>
  <li><a href="#">MySQL</a></li>
  <li><a href="#">XSLT</a></li>
  <li><a href="#">Ajax</a></li>
  <li><a href="#">HTML / CSS</a></li>
  </ul>
  </li>
  <li><a href="http://ucoz-copy.ru">UCOZ-COPY.RU</a></li>
  </ul>
  <div style="clear:both">
</div>

 

Этот код, добавляем в ваш CSS:

 .nav,.nav ul { 
  list-style:none;
  margin:0;
  padding:0;
}

.nav {
  position:relative;
}

.nav ul {
  height:0;
  left:0;
  overflow:hidden;
  position:absolute;
  top:46px;
}

.nav li {
  float:left;
  position:relative;
}

.nav li a {
  -moz-transition:0.5s;
  -o-transition:0.5s;
  -webkit-transition:0.5s;
  background-color:#7770B4;
  border:1px solid #6E67A6;
  color:#FFF;
  display:block;
  font-size:16px;
  line-height:35px;
  padding:5px 20px;
  text-decoration:none;
  transition:0.5s;
}

.nav li:hover > a {
  background:#8CCA33;
  border-color:#6E67A6;
  color:#fff;
}

.nav li:hover ul.subs {
  height:auto;
  width:180px;
}

.nav ul li {
  -moz-transition:0.5s;
  -o-transition:0.5s;
  -webkit-transition:0.5s;
  opacity:0;
  transition:0.5s;
  width:100%;
}

.nav li ul li {
  -moz-transition-delay:0s;
  -o-transition-delay:0s;
  -webkit-transition-delay:0s;
  transition-delay:0s;
}

.nav li:hover ul li {
  opacity:1;
  -moz-transition-delay:0.5s;
  -o-transition-delay:0.5s;
  -webkit-transition-delay:0.5s;
  transition-delay:0.5s;
}

.nav ul li a {
  background:#7770B4;
  border-color:#6E67A6;
  color:#fff;
  line-height:1px;
  -moz-transition:1.5s;
  -o-transition:1.5s;
  -webkit-transition:1.5s;
  transition:1.5s;
}

.nav li:hover ul li a {
  line-height:35px;
}

.nav ul li a:hover {
  background:#8CCA33;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
  background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  background-image: -o-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,25,0));
}

 

Вот и все, меню готово.

 

Выпадающее меню на CSS3

Быстрый поиск: меню, скрипт, субменю, CSS, эффекты ...
  Скрипты для Ucoz, Скрипты меню | Просмотров: 2406 | 17-10-2012, 23:16

Советуем скачать бесплатно


Если вы хотите что то добавить к статье «Выпадающее меню на CSS3» или просто поделиться своими впечатлениями о скачанном в общей категории «Скрипты для Ucoz, Скрипты меню», то можете это сделать в блоке "Комментарии" ниже.
Будьте пожалуйста предельно корректны и взаимовежливы. Спам на нашем сайте наказуем!

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Комментарии:



Добавление комментария

Имя:*
E-Mail:*
Вопрос:
2+2=
Ответ:*
Введите код: *


РЕКЛАМА
Профиль
Привет гость
noavatar
Логин:
Пароль:

Реклама на UC
]]> ]]>
Мини чат
Strict Standards: Only variables should be passed by reference in /var/www/ucoz/data/www/ucoz-copy.ru/engine/modules/iChat/build.php on line 57 Strict Standards: Only variables should be passed by reference in /var/www/ucoz/data/www/ucoz-copy.ru/engine/modules/iChat/build.php on line 57 Strict Standards: Only variables should be passed by reference in /var/www/ucoz/data/www/ucoz-copy.ru/engine/modules/iChat/build.php on line 57 Strict Standards: Only variables should be passed by reference in /var/www/ucoz/data/www/ucoz-copy.ru/engine/modules/iChat/build.php on line 57 Strict Standards: Only variables should be passed by reference in /var/www/ucoz/data/www/ucoz-copy.ru/engine/modules/iChat/build.php on line 57 Strict Standards: Only variables should be passed by reference in /var/www/ucoz/data/www/ucoz-copy.ru/engine/modules/iChat/build.php on line 57 Strict Standards: Only variables should be passed by reference in /var/www/ucoz/data/www/ucoz-copy.ru/engine/modules/iChat/build.php on line 57 Strict Standards: Only variables should be passed by reference in /var/www/ucoz/data/www/ucoz-copy.ru/engine/modules/iChat/build.php on line 57 Strict Standards: Only variables should be passed by reference in /var/www/ucoz/data/www/ucoz-copy.ru/engine/modules/iChat/build.php on line 57 Strict Standards: Only variables should be passed by reference in /var/www/ucoz/data/www/ucoz-copy.ru/engine/modules/iChat/build.php on line 57

Внимание, конкурс с денежным призовым фондом.
От вас требуется только активность. Игровой портал.
http://pyrexgo.tk/forum/5-10-1
Народ на хрена вы этот сайт держите? ДЛЯ ЗАРАБАТЫВАНИЯ ЛАВЭ НА РЕКЛАМЕ ? не чего скачать не получается ! научитесь делать сайты !!
Сайт падает?
ПРОЕКТ no-problems . ucoz . net
Раскрутка сайтов, общение, приятная команда, всё для ucoz'a советы и многое другое
Хосты 100+
ИДЕТ НАБОР В КОМАНДУ САЙТА!
Пишите мне на сайте пользователь Linus
no-problems . ucoz . net
Ни каких проблем со скачиванием нету!!! wassat
Как скачать шаблоны, пожалуйста, помогите
Всем привет)))
Привет
Приветствую всех! :)
Для добавления необходима авторизация.
Календарь
«    Январь 2015    »
Пн Вт Ср Чт Пт Сб Вс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
Топ пользователей
lelik 30 декабря 2010
ICQ: -Не указано-
Новостей: 316
Комментариев: 38
VizhiK 30 января 2012
ICQ: -Не указано-
Новостей: 157
Комментариев: 0
mozga-net 31 декабря 2010
ICQ: 607718372
Новостей: 141
Комментариев: 17
volnymixail 9 октября 2011
ICQ: 3859170
Новостей: 34
Комментариев: 0
INDIGO 30 декабря 2010
ICQ: 553555543
Новостей: 23
Комментариев: 20
Статистика
(0):
Юзеры
Гости: (1):
(0):
Боты
Всего на сайте: 1
]]>

]]>
Контакты
]]>

Администратор: mozga-net mozga.nett

Администратор: lelik 384-939-998

Администратор: mozga-net 607-718-372

email Rip@ucoz-copy.ru

]]>