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

1594
9 из 10
Проголосовало: 4






Установка:
1 шаг. Это ставим в Верхнюю часть сайта в нужное место:

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


2 шаг. Это ставим в CSS:

Code
.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));  
  }


Демо: Demo
Автор публикации: Загрузка
Загрузка
k43, это его n материал
Источник: http://ruseller.com
  • Оставить первым комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
  • waak написал:
  • и ещё забыл добавить что использую модуль каталог сайтов
  • waak написал:
  • Почему у меня он перелистывает в верх а не вниз и если это первая песня на стр то он её по кругу гоняет а не переходит к последней
    и как сделать стоп по клику на трек который играет?
  • Acht написал:
  • Тест
    Мда, у меня тоже не работает. Или нужно ждать обновление?
    Последние темы
    Опрос
    465
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 2
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: