« Анимированное, вертикальное CSS3 меню для сайта на uCoz »

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

Очень интересная навигация для вашего сайта. По умолчанию в меню будет десять пунктов. При желании ненужные пункты можно удалить, переименовать их или добавить свои. Каждый пункт меню оформляется в виде иконки, в тёмных тонах на светлом фоне. Фон, размер и цвет самих иконок также можно изменять. При наведении курсора мыши каждый пункт будет окрашиваться в отдельный цвет, с появлением подписей и эффектом анимации. Меню будет располагаться с левой стороны.

Установка:
1. Заходим в Панель управления → Управление дизайном → Верхняя часть сайта и вставляем код:

Код

<div id='snav' class='en'>  
<ul>  
<li>  
<a href="$HOME_PAGE_LINK$">  
<i class="fa fa-home"></i>  
<span>Главная</span>  
</a>  
</li>  
<li>  
<a href="/news/">  
<i class="fa fa-file-text"></i>  
<span>Новости</span>  
</a>  
</li>  
<li>  
<a href="/photo/">  
<i class="fa fa-camera"></i>  
<span>Фотографии</span>  
</a>  
</li>  
<li>  
<a href="/load/">  
<i class="fa fa-download"></i>  
<span>Файлы</span>  
</a>  
</li>  
<li>  
<a href="/index/0-3">  
<i class="fa fa-envelope"></i>  
<span>Контакты</span>  
</a>  
</li>  
<li>  
<a href="/video/">  
<i class="fa fa-video-camera"></i>  
<span>Видео</span>  
</a>  
</li>  
<li>  
<a href="/faq/">  
<i class="fa fa-comments-o"></i>  
<span>FAQ</span>  
</a>  
</li>  
<li>  
<a href="/news/rss">  
<i class="fa fa-rss"></i>  
<span>RSS</span>  
</a>  
</li>  
<li>  
<a href="/forum/">  
<i class="fa fa-bullhorn"></i>  
<span>Форум</span>  
</a>  
</li>  
<li>  
<a href="/shop/">  
<i class="fa fa-shopping-cart"></i>  
<span>Магазин</span>  
</a>  
</li>  
</ul>  
</div>

2. Заходим в Панель управления → Управление дизайном → Таблица стилей (CSS) и вставляем код:
Код

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");  
#snav.en {  
  left: 0;  
  text-align: left;  
}  
#snav.en li span {  
  left: -100px;  
}  
#snav.en li a:hover span {  
  left: 35px;  
}  

/* Настройка навигации */  
#snav {  
  position: fixed;  
  top:20%;  
  z-index: 9999;  
  font-size: 18px;  
  font-family: 'Open Sans', sans-serif;  
}  
#snav ul {  
  list-style: none;  
}  
#snav * {  
  margin: 0;  
  padding: 0;  
  outline: 0;  
  transition: all .5s ease;  
  -webkit-transition: all .5s ease;  
  -moz-transition: all .5s ease;  
  -o-transition: all .5s ease;  
  -webkit-box-sizing: border-box;  
  -moz-box-sizing: border-box;  
  box-sizing: border-box;  
}  
#snav li a {  
  text-decoration: none;  
  color: #fff;  
  display: block;  
  position: relative;  
}  
#snav .fa {  
  vertical-align: middle;  
  font-size: 18px;  
  width: 35px;  
  height: 35px;  
  line-height: 35px;  
  text-align: center;  
  position: relative;  
  z-index: 4;  
}  
#snav li span {  
  font-size: 15px;  
  vertical-align: middle;  
  height: 35px;  
  line-height: 35px;  
  width: auto;  
  white-space: nowrap;  
  overflow: hidden;  
  display: block;  
  padding: 0 15px;  
  position: absolute;  
  top: 0;  
  visibility: hidden;  
  z-index: 3;  
}  
#snav li a:hover .fa {  
  transform: rotate(720deg);  
}  
#snav li a:hover span {  
  visibility: visible;  
}  

/*Цветовые настройки */  
/* Параметры для браузера который поддерживает :nth-child */  
#snav li span {  
  background-color: #555;  
}  

/* Цвет фона за иконкой*/  
#snav li .fa {  
  background-color: #EEE;  
  color: #555  
}  

/* Цвет иконки */  
#snav li a:hover .fa {  
  color: #fff;  
}  
#snav li:nth-child(10n+1) span, #snav li:nth-child(10n+1) a:hover .fa {  
  background-color: #8350DD;  
}  
#snav li:nth-child(10n+2) span, #snav li:nth-child(10n+2) a:hover .fa {  
  background-color: #4EC5DB;  
}  
#snav li:nth-child(10n+3) span, #snav li:nth-child(10n+3) a:hover .fa {  
  background-color: #3DC25D;  
}  
#snav li:nth-child(10n+4) span, #snav li:nth-child(10n+4) a:hover .fa {  
  background-color: #99BE24;  
}  
#snav li:nth-child(10n+5) span, #snav li:nth-child(10n+5) a:hover .fa {  
  background-color: #38c;  
}  
#snav li:nth-child(10n+6) span, #snav li:nth-child(10n+6) a:hover .fa {  
  background-color: #ff0000;  
}  
#snav li:nth-child(10n+7) span, #snav li:nth-child(10n+7) a:hover .fa {  
  background-color: #000;  
}  
#snav li:nth-child(10n+8) span, #snav li:nth-child(10n+8) a:hover .fa {  
  background-color: #F1A111;  
}  
#snav li:nth-child(10n+9) span, #snav li:nth-child(10n+9) a:hover .fa {  
  background-color: #777;  
}  
#snav li:nth-child(10n+10) span, #snav li:nth-child(10n+10) a:hover .fa {  
  background-color: #30555C;  
}

Готово!


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

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

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

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


Добавил: LAnOFF | Категория: Скрипты для uCoz | Просмотров: 675


Поделиться в соц. сетях:
Комментариев к материалу: 2
Александр 20.02.2016 в 23:59Спам
Меню шикарное
1
Виктор Ягодин 20.02.2016 в 15:53
Отличное меню) Спасибо за материал)
1
avatar