« Выпадающее меню с 3D эффектом для uCoz »

Описание материала:

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

Установка:
1.CSS
Вставьте в Таблицу стилей CSS.

Код
  #container {  
  position: relative;  
  width: 940px;  
  }  

  #container:after {  
  content: "";  
  display: block;  
  clear: both;  
  height: 0;  
  }  

  #menu {  
  position: relative;  
  float: left;  
  width: 100%;  
  padding: 0 20px;  
  border-radius: 3px;  
  box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15);  
  background: #ccc;  
  }  

  #menu, #menu ul {  
  list-style: none;  
  }  

  #menu > li {  
  float: left;  
  position: relative;  
  border-right: 1px solid rgba(0,0,0,.1);  
  box-shadow: 1px 0 0 rgba(255,255,255,.25);  
  perspective: 1000px;  
   
  }  

  #menu > li:first-child {  
  border-left: 1px solid rgba(255,255,255,.25);  
  box-shadow: -1px 0 0 rgba(0,0,0,.1), 1px 0 0 rgba(255,255,255,.25);  
  }  

  #menu a {  
  display: block;  
  position: relative;  
  z-index: 10;  
  padding: 13px 20px 13px 20px;  
  text-decoration: none;  
  color: rgba(75,75,75,1);  
  line-height: 1;  
  font-weight: 600;  
  font-size: 12px;  
  letter-spacing: -.05em;  
  background: transparent;  
  text-shadow: 0 1px 1px rgba(255,255,255,.9);  
  transition: all .25s ease-in-out;  
   
  }  

  #menu > li:hover > a {  
  background: #333;  
  color: rgba(0,223,252,1);  
  text-shadow: none;  
  }  

  #menu li ul {  
  position: absolute;  
  left: 0;  
  z-index: 1;  
  width: 200px;  
  padding: 0;  
  opacity: 0;  
  visibility: hidden;  
  border-bottom-left-radius: 4px;  
  border-bottom-right-radius: 4px;  
  background: transparent;  
  overflow: hidden;  
  transform-origin: 50% 0%;  
  }  

  #menu li:hover ul {  
   
  padding: 15px 0;  
  background: #333;  
  opacity: 1;  
  visibility: visible;  
  box-shadow: 1px 1px 7px rgba(0,0,0,.5);  
  animation-name: swingdown;  
  animation-duration: 1s;  
  animation-timing-function: ease;  

  }  

  @keyframes swingdown {  
  0% {  
  opacity: .99999;  
  transform: rotateX(90deg);  
  }  

  30% {  
  transform: rotateX(-20deg) rotateY(5deg);  
  animation-timing-function: ease-in-out;  
  }  

  65% {  
  transform: rotateX(20deg) rotateY(-3deg);  
  animation-timing-function: ease-in-out;  
  }  

  100% {  
  transform: rotateX(0);  
  animation-timing-function: ease-in-out;  
  }  
  }  

  #menu li li a {  
  padding-left: 15px;  
  font-weight: 400;  
  color: #ddd;  
  text-shadow: none;  
  border-top: dotted 1px transparent;  
  border-bottom: dotted 1px transparent;  
  transition: all .15s linear;  
  }  

  #menu li li a:hover {  
  color: rgba(0,223,252,1);  
  border-top: dotted 1px rgba(255,255,255,.15);  
  border-bottom: dotted 1px rgba(255,255,255,.15);  
  background: rgba(0,223,252,.02);  
  }


2.HTML
Вставляем по месту.
Код
<div id="container">
<ul id="menu">
  <li><a href="#">О нас</a>
  <ul>
  <li><a href="#">InternetEmpire.Ru</a></li>
  <li><a href="#">InternetEmpire.Ru</a></li>
  <li><a href="#">InternetEmpire.Ru</a></li>
  </ul>
  </li>
  <li><a href="#">Портфолио</a>
  <ul>
  <li><a href="#">InternetEmpire.Ru</a></li>
  <li><a href="#">InternetEmpire.Ru</a></li>
  <li><a href="#">InternetEmpire.Ru</a></li>
  <li><a href="#">InternetEmpire.Ru</a></li>
  <li><a href="#">InternetEmpire.Ru</a></li>
  <li><a href="#">InternetEmpire.Ru</a></li>
  </ul>
  </li>
  <li><a href="#">Клиенты</a>
  <ul>
  <li><a href="#">InternetEmpire.Ru</a></li>
  <li><a href="#">InternetEmpire.Ru</a></li>
  <li><a href="#">InternetEmpire.Ru</a></li>
  </ul>
  </li>
  <li><a href="#">Контакты</a>
  <ul>
  <li><a href="#">InternetEmpire.Ru</a></li>
  <li><a href="#">InternetEmpire.Ru</a></li>
  <li><a href="#">InternetEmpire.Ru</a></li>
  </ul>
  </li>
  <li><a href="#">Поддержка</a></li>
</ul>
</div>

Вот и все. Готово!


Демонстрация

Демонстративная страница или сайт материала

Установка материала

Мы поможем установить данный материал к Вам на сайт


Добавил: maksim | Категория: Скрипты для uCoz | Просмотров: 578 | Загрузок: 1

Теги к материалу: для, ucoz, эффектом, меню, 3D, выпадающее

Поделиться в соц. сетях:
Комментариев к материалу: 1
Анатолий 10.01.2016 в 21:26Спам
Информативное описание))
0
avatar