На портале уже 695 , зарегистрировано 9845 и написано 803 .
Иконки групп для Uco...
Новый мини-чат для U...
Мини профиль
Гостевая книга
Требуется персонал!
Главная страница Архив всех материалов Меню для uCoz сайта - uCoz menu Горизонтально - выпадающее меню с использованием Transsition CSS3

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

  • Добавил: hi7emka
  • Дата: 2024-03-29, 11:51 AM
  • Комментариев: 3
  • Просмотров: 2857
Скриншот материала «Горизонтально - выпадающее меню с использованием Transsition CSS3»
В наше время для веб мастера доступно почти все что ему нужно, теперь на CSS3 можно написать очень красивое и оригинальное меню для сайта. Можно так же использовать: тень, анимацию и много других элементов.. сегодня я вам представляю меню написанное на CSS3 с применением анимации... а так же будет добавлена форма поиска для сайта.

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

Установка:

Установим данный HTML код где хотим видеть само меню:
Код
<div class="menu_container">  
  <nav class="menu">  
  <ul>  
  <li><a href="#" class="selected">Главная</a>  
  <ul class="visible">  
  <li><a href="#">Пункт 1</a></li>  
  <li><a href="#">Пункт 2</a></li>  
  <li><a href="#">Пункт 3</a></li>  
  <li><a href="#">Пункт 4</a></li>  
  <li><a href="#">Пункт 5</a></li>  
  <li><a href="#">Пункт 6</a></li>  
  </ul>  
  </li>  
  <li><a href="#">Форум</a>  
  <ul>  
  <li><a href="#">Пункт 1</a></li>  
  <li><a href="#">Пункт 2</a></li>  
  <li><a href="#">Пункт 3</a></li>  
  <li><a href="#">Пункт 4</a></li>  
  <li><a href="#">Пункт 5</a></li>  
  <li><a href="#">Пункт 6</a></li>  
  </ul>  
  </li>  
  <li><a href="#">Новости</a>  
  <ul>  
  <li><a href="#">Пункт 1</a></li>  
  <li><a href="#">Пункт 2</a></li>  
  <li><a href="#">Пункт 3</a></li>  
  <li><a href="#">Пункт 4</a></li>  
  <li><a href="#">Пункт 5</a></li>  
  <li><a href="#">Пункт 6</a></li>  
  </ul>  
  </li>  
  <li><a href="#">Блог</a>  
  <ul>  
  <li><a href="#">Пункт 1</a></li>  
  <li><a href="#">Пункт 2</a></li>  
  <li><a href="#">Пункт 3</a></li>  
  <li><a href="#">Пункт 4</a></li>  
  <li><a href="#">Пункт 5</a></li>  
  <li><a href="#">Пункт 6</a></li>  
  </ul>  
  </li>  
  <li><a href="#">О нас</a>  
  <ul>  
  <li><a href="#">Пункт 1</a></li>  
  <li><a href="#">Пункт 2</a></li>  
  <li><a href="#">Пункт 3</a></li>  
  <li><a href="#">Пункт 4</a></li>  
  <li><a href="#">Пункт 5</a></li>  
  <li><a href="#">Пункт 6</a></li>  
  </ul>  
  </li>  
  <li><a href="#">Портфолио</a>  
  <ul>  
  <li><a href="#">Пункт 1</a></li>  
  <li><a href="#">Пункт 2</a></li>  
  <li><a href="#">Пункт 3</a></li>  
  <li><a href="#">Пункт 4</a></li>  
  <li><a href="#">Пункт 5</a></li>  
  <li><a href="#">Пункт 6</a></li>  
  </ul>  
  </li>  
  <li><a href="#">Контакты</a>  
  <ul>  
  <li><a href="#">Пункт 1</a></li>  
  <li><a href="#">Пункт 2</a></li>  
  <li><a href="#">Пункт 3</a></li>  
  <li><a href="#">Пункт 4</a></li>  
  <li><a href="#">Пункт 5</a></li>  
  <li><a href="#">Пункт 6</a></li>  
  </ul>  
  </li>  
  </ul>  
  <form class="search">  
  <input type="text" class="search_field" name="search" placeholder="Поиск...">  
  <input type="submit" class="button" value="" >  
  </form>  
  </nav>  
  </div>


Теперь перейдем к установке стилей для меню , стили устанавливаем в CSS:
Код
.menu_container{  
  width:980px;  
  height:77px;  
  margin:40px auto 0 auto;  
  background:#09f;  
  overflow:hidden;  
  -webkit-box-shadow:0 0 7px #888;  
  -moz-box-shadow:0 0 7px #888;  
  box-shadow:0 0 7px #888;  
}  

.menu{  
  height:41px;  
  background:#333;  
}  

.menu ul{  
  position:relative;  
  float:left;  
}  

.menu ul li{  
  float:left;  
}  

.menu ul li a{  
  display:block;  
  height:41px;  
  padding:0 20px;  
  font-size:15px;  
  color:#777;  
  line-height:45px;  
  -webkit-transition:all .2s linear;  
  -moz-transition:all .2s linear;  
  -ms-transition:all .2s linear;  
  -o-transition:all .2s linear;  
  transition:all .2s linear;  
}  

.menu ul li:hover a,  
.menu ul li a.selected{  
  background:#09f;  
  color:#fff;  
}  

.menu ul li a:active{  
  color:#ccc;  
}  

.menu ul:hover li a.selected{  
  background:#333;  
  color:#777;  
}  

.menu ul li:hover a.selected{  
  background:#09f;  
  color:#fff;  
}  

.menu ul li a:active.selected{  
  color:#ccc;  
}  

.menu ul ul{  
  width:980px;  
  height:36px;  
  position:absolute;  
  left:0;  
  margin-left:8%;  
  filter:alpha(opacity=0);  
  opacity:0;  
  background:#09f;  
  -webkit-transition:all .4s ease-out .1s;  
  -moz-transition:all .4s ease-out .1s;  
  -ms-transition:all .4s ease-out .1s;  
  -o-transition:all .4s ease-out .1s;  
  transition:all .4s ease-out .1s;  
}  

.menu ul ul.visible{  
  z-index:1;  
  margin-left:0;  
  filter:alpha(opacity=100);  
  opacity:1;  
}  
.menu ul:hover ul.visible{  
  margin-left:8%;  
  filter:alpha(opacity=0);  
  opacity:0;  
}  
.menu ul li:hover ul.visible{  
  margin-left:0;  
  filter:alpha(opacity=100);  
  opacity:1;  
}  
.menu ul li:hover ul{  
  z-index:2;  
  margin-left:0;  
  filter:alpha(opacity=100);  
  opacity:1;  
}  
.menu ul ul li a{  
  height:36px;  
  padding:0 20px;  
  font-size:13px;  
  color:#fff;  
  text-transform:capitalize;  
  line-height:40px;  
  -webkit-transition:color .3s ease-in-out;  
  -moz-transition:color .3s ease-in-out;  
  -ms-transition:color .3s ease-in-out;  
  -o-transition:color .3s ease-in-out;  
  transition:color .3s ease-in-out;  
}  
.menu ul ul li:hover a{  
  color:#333;  
  text-shadow:1px 1px 5px #888;  
}  
.menu ul ul li a:active{  
  color:#666;  
}  
.search{  
  margin:3px 8px 0 0;  
  float:right;  
  border:solid 1px #555;  
}  
.search_field{  
  width:160px;  
  height:20px;  
  padding:6px 4px;  
  float:left;  
  color:#666;  
  font-size:13px;  
  line-height:20px;  
  background:#333;  
  -webkit-transition:color .2s linear;  
  -moz-transition:color .2s linear;  
  -ms-transition:color .2s linear;  
  -o-transition:color .2s linear;  
  transition:color .2s linear  
}  

.search_field:focus{  
  color:#999;  
}  

.button{  
  width:28px;  
  height:28px;  
  float:left;  
  background:#333 url(../img/search_icon.png) 0 3px;  
}


Скачиваем архив и заливаем в корень сайта!

Установка завершена! smile    


Будьте внимательны! Этот материал «Горизонтально - выпадающее меню с использованием Transsition CSS3» из раздела «Меню для uCoz сайта - uCoz menu» является уникальной собственностью проекта www.ucozzz.ru, поэтому, при частичном или полном копировании, Вы обязаны установить ссылку на наш портал, как источник материала.
№3 medion123 написал: 2013-12-03 в 3:28 PM Спам
удобная шкута
№2 Zhen093 написал: 2013-12-02 в 4:17 AM Спам
Zhen093
Поставил) все получилось) спасибо)
№1 vivaldi123 написал: 2013-11-27 в 11:36 AM Спам
я только учусь,но попробую
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]