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


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

1508
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 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    204
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 6
    Гостей: 6
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: