• Страница 1 из 1
  • 1
Форум Kentos311 » uCoz » Скрипты для сайта » Горизонтальное меню на CSS для uCoz (Красивое анимированное меню для uCoz)
Горизонтальное меню на CSS для uCoz
Kentos311Дата: Среда, 10.01.2018, 01:24 | Сообщение # 1
Сообщений: 472
Статус:

Сегодня вашему вниманию предоставляю отлично меню для системы uCoz. Это меню особенно сделана, в ней нету никаких JavaScript, она работает на чистом CSS что очень даже важно!. Отлично смотрится на светлом дизайне сайта. При наведении курсором на меню, снизу будет появляется красивый анимированный движуйщеся эффект. Хочу также добавить что в этом меню можно изменить цвет кнопок а также полоски, что очень даже удобно и хорошо.

В таблицу стилей CSS:
Код
ul {  
  display: flex;  
  list-style: none;  
  text-transform: uppercase;  
  width: 100%;  
  box-sizing: border-box;  
  padding: 0;  
  margin: 0;  
  position: relative;  
  background-color: #f1f1f1;  
  }  
   
  li {  
  flex: 1 1;  
  position: relative;  
  }  
   
  li:last-child::after {  
  content: "";  
  width: 100%;  
  height: 3px;  
  background-color: transparent;  
  display: block;  
  transition: .3s ease;  
  position: absolute;  
  left: 0;  
  top: 100%;  
  }  
   
  li:nth-child(1).current~li:last-child::after {  
  left: -500%;  
  background-color: #360033;  
  }  
   
  li:nth-child(2).current~li:last-child::after {  
  left: -400%;  
  background-color: #301441;  
  }  
   
  li:nth-child(3).current~li:last-child::after {  
  left: -300%;  
  background-color: #263357;  
  }  
   
  li:nth-child(4).current~li:last-child::after {  
  left: -200%;  
  background-color: #1b546f;  
  }  
   
  li:nth-child(5).current~li:last-child::after {  
  left: -100%;  
  background-color: #117385;  
  }  
   
  li:nth-child(6).current:last-child::after {  
  left: 0;  
  background-color: #0b8793;  
  }  
   
  li:nth-child(1):hover~li:last-child::after {  
  left: -500%;  
  background-color: #360033;  
  }  
   
  li:nth-child(2):hover~li:last-child::after {  
  left: -400%;  
  background-color: #301441;  
  }  
   
  li:nth-child(3):hover~li:last-child::after {  
  left: -300%;  
  background-color: #263357;  
  }  
   
  li:nth-child(4):hover~li:last-child::after {  
  left: -200%;  
  background-color: #1b546f;  
  }  
   
  li:nth-child(5):hover~li:last-child::after {  
  left: -100%;  
  background-color: #117385;  
  }  
   
  li:nth-child(6):last-child:last-child:hover::after {  
  left: 0;  
  background-color: #0b8793 !important;  
  }  
   
  li:nth-child(6):hover::after {  
  left: 0%;  
  background-color: #0b8793;  
  }  
   
  li:nth-child(1) a {  
  color: #360033;  
  }  
   
  li:nth-child(2) a {  
  color: #301441;  
  }  
   
  li:nth-child(3) a {  
  color: #263357;  
  }  
   
  li:nth-child(4) a {  
  color: #1b546f;  
  }  
   
  li:nth-child(5) a {  
  color: #117385;  
  }  
   
  li:nth-child(6) a {  
  color: #0b8793;  
  }  
   
  a {  
  padding: 1rem;  
  display: block;  
  text-align: center;  
  text-decoration: none;  
  color: #666;  
  }  
   
  @media (max-width: 320px) {  
  ul {  
  flex-direction: column;  
  }  
  li:last-child::after {  
  margin-top: -1.5px;  
  }  
  li:nth-child(1).current~li:last-child::after {  
  left: 0;  
  top: -400%;  
  }  
  li:nth-child(2).current~li:last-child::after {  
  left: 0;  
  top: -300%;  
  }  
  li:nth-child(3).current~li:last-child::after {  
  left: 0;  
  top: -200%;  
  }  
  li:nth-child(4).current~li:last-child::after {  
  left: 0;  
  top: -100%;  
  }  
  li:nth-child(5).current~li:last-child::after {  
  left: 0;  
  top: 0;  
  }  
  li:nth-child(6).current:last-child::after {  
  left: 0;  
  top: 100%;  
  }  
  li:last-child::after {  
  left: 0%;  
  top: 0%;  
  }  
  li:nth-child(1):hover~li:last-child::after {  
  left: 0;  
  top: -400%;  
  }  
  li:nth-child(2):hover~li:last-child::after {  
  left: 0;  
  top: -300%;  
  }  
  li:nth-child(3):hover~li:last-child::after {  
  left: 0;  
  top: -200%;  
  }  
  li:nth-child(4):hover~li:last-child::after {  
  left: 0;  
  top: -100%;  
  }  
  li:nth-child(5):hover~li:last-child::after {  
  left: 0;  
  top: 0;  
  }  
  li:nth-child(6):last-child:last-child:hover::after {  
  left: 0;  
  top: 100%;  
  }  
  }


Меню HTML
Код
<ul>  
  <li class="current"><a href="#">Главная</a></li>  
  <li><a href="#">О нас</a></li>  
  <li><a href="#">Проекты</a></li>  
  <li><a href="#">Блог</a></li>  
  <li><a href="#">Сервсы</a></li>  
  <li><a href="http://mir-hack.ru">Контакты</a></li>  
</ul>
Прикрепления: 7290656.gif(47.7 Kb)
 
Форум Kentos311 » uCoz » Скрипты для сайта » Горизонтальное меню на CSS для uCoz (Красивое анимированное меню для uCoz)
  • Страница 1 из 1
  • 1
Поиск: