Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Меню с выпадающим списком на CSS3

Дата добавления: 31.05.2015 - 04:23
Добавил: Buger
Количество просмотров: 663
Количество комментариев: 0
Рейтинг материала: 0.0 / 0
Меню с выпадающим списком на CSS3
БЕСПЛАТНО
Для скачивания файлов, необходима авторизация или регистрация на нашем ресурсе.
рейтинг 0.0
/
голосов 0
Вертикальные аккордеоны на сайте весьма удобная вещь, ведь они позволяют сэкономить достаточно много места, при этом сохраняя всю необходимую информацию, наши читатели постоянно интересуются такими плюшками для сайта.

В данном уроке мы рассмотрим как создать аккордеон с автоматическим выпадающим списком при наведении на курсором не желаемый подпункт, при этом происходит плавная анимация разворота, аккордеон выполнен в темных тонах, и красиво будет смотреться на сайте.

Шаг 1. HTML
Для начала нам необходимо создать контейнер в котором будут размещаться классы, для главной мы добавим соответственно класс "home", для выпадающих подпунктов нам необходимо добавить div с классом "gallery-wrapper":
Код
<div id="container">
  <nav>
  <ul>
  <li class="home"><a href="">Главная</a><span>3</span></li>
  <div class="gallery-wrapper">
  <li class="gallery"><a href="">Галерея</a></li>
  <ul>
  <li><a href="">Фото</a></li>
  <li><a href="">Картины</a></li>
  <li><a href="">Проекты</a></li>
  </ul>
  </div>
  <li class="logout"><a href="">Выйти</a></li>
  </ul>
  </nav>
  </div>


Шаг 2. CSS
Для начала в стили мы добавим общий параметр сброса, мы не стали приводить его в примере, он находится в исходниках. Мы определяем общие параметры контейнера, устанавливаем цветовой оттенок для текста, создаем градиентную заливку для списка, следует заметить, что мы добавили несколько градиентов для кроссбраузерности. Установим время для разворота списка на 3ms.
Код
.clearfix:after{
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
body{
  background:#fff;
  font:13px tahoma, arial, sans-serif;
}
#container{
  width:400px;
  height:270px;
  padding-top:30px;
  margin:0 auto;
}
nav{
  width:200px;
  margin:0 auto;
  border:1px solid #25272b;
  border-radius:3px;
  box-shadow:rgba(0,0,0,0.15) 0 0 5px, rgba(0,0,0,0.2) 0 1px 0;
}
nav ul li a{
  display:block;
  height:40px;
  line-height:40px;
  padding-left:40px;
  text-decoration:none;
  color:#d9ddea;
  text-shadow:rgba(0,0,0,0.25) 0 1px 0;
}
nav ul li{
  background: -webkit-linear-gradient(top, rgba(75,78,88,1) 0%,rgba(63,66,74,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(75,78,88,1) 0%,rgba(63,66,74,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(75,78,88,1) 0%,rgba(63,66,74,1) 100%); /* IE10+ */
  background: linear-gradient(to bottom, rgba(75,78,88,1) 0%,rgba(63,66,74,1) 100%); /* W3C */
  box-shadow:rgba(255,255,255,0.1) 1px 1px 0 inset;
  border-bottom:#292b30 1px solid;
}
.gallery{
  position:relative;
}
.gallery-wrapper{
  height:41px;
  overflow:hidden;
  -webkit-transition:height linear .3s;
  -moz-transition:height linear .3s;
  -o-transition:height linear .3s;
  transition:height linear .3s;
}
.gallery-wrapper:hover{
  height:164px;
}
.gallery-wrapper ul li{
  background:#32353b;
  box-shadow:#3a3c42 0 1px 0 inset;
}
.gallery-wrapper ul li:nth-of-type(1){
  box-shadow:rgba(0,0,0,0.1) 0 2px 2px inset;
}
.gallery-wrapper ul li:nth-of-type(3){
  box-shadow:rgba(0,0,0,0.1) 0 -2px 2px inset, #3a3c42 0 1px 0 inset;
}

.gallery-wrapper ul li:hover{
  background: -webkit-linear-gradient(top, rgba(58,96,209,1) 0%,rgba(44,72,194,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(58,96,209,1) 0%,rgba(44,72,194,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(58,96,209,1) 0%,rgba(44,72,194,1) 100%); /* IE10+ */
  background: linear-gradient(to bottom, rgba(58,96,209,1) 0%,rgba(44,72,194,1) 100%); /* W3C */
  box-shadow:#5173d5 1px 1px 0 inset;
}
.home a:hover{
  background-position:-200px 0;
}
.home {
  position:relative;
  border-radius:3px 3px 0 0;
}
.home span{
  position:absolute;
  right:23px;
  top:12px;
  color:#d9ddea;
  text-shadow:rgba(0,0,0,0.25) 0 1px 0;
}
.gallery>a{
  background-position:0 -40px;
}
.gallery>a:hover{
  background-position:-200px -40px;
}
.logout{
border-radius:0 0 3px 3px;
}
.logout a{
  background-position:0 -120px;
}
.logout a:hover{
  background-position:-200px -120px;
}
.gallery-wrapper ul li a{
  background-position:0 -80px;
}
.gallery-wrapper ul li a:hover{
  background-position:-200px -80px;
}

Готово!!!

Источник: Не указан
Добавлять комментарии могут только зарегистрированные пользователи.