ZorNet.Ru — сайт для вебмастера » HTML и CSS » Вертикальное меню с появлением списков CSS

Вертикальное меню с появлением списков CSS

Это оригинальное меню, вертикальной навигаций, где идет со списками, что перекреплены стильные эффекты появление запроса при наведении курсора. Стили CSS3 позволяет вам анимировать практически любое свойство CSS, поэтому вместо того, чтобы переходить в свойство, браузер медленно превращается в новое значение. Это делается через свойство перехода на CSS3, которое поддерживается в IE10 +, FF3.5, плюс Chrome, также Safari и Opera десять. Что здесь точно не скажешь, что можно выставить под вертикальную навигацию, так как структура больше сделана на современный дизайн.

Но безусловно на простой стилистике аналогично его можно применить по прямому назначению. Где пользователи или гости, что попали на сайт, будут уделены, но здесь изначально показаны ключевые слова, что будут вылазит так оно и есть, по левой стороне. А когда только вы наведете на один из элементов, то появится анимация, виде увеличение. Сам дизайн построен так, что идет в алом оттенке, но по сторонам можно заметить небольшую темную гамму, что делает его по стилю уникальным видом.

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

Проверяя на работоспособность:

1. Так по умолчанию, где можно на отдельной странице сделать.

Вертикальное меню в наклонном виде CSS

2. Здесь уже наведенный курсор, и как видим, что идет движение.

Выпадающее меню на чистом CSS и HTML

Приступаем к установке:

HTML

Код

<ul class="danimated_vertical">
  <li><a href="http://zornet.ru/load/81">Скрипты</a></li>
  <li><a href="http://zornet.ru/load/142">Шаблоны</a></li>
  <li><a href="#">Дизайн сайта</a></li>
  <li><a href="http://zornet.ru/news/">Сайт Zornet.Ru</a></li>
  <li><a href="#">Стилистика CSS</a></li>
  <li><a href="#">Обратная связь сайта</a></li>
  </ul>

CSS

Код

ul.danimated_vertical {
  width: 312px;
  overflow: auto;
  margin: 0; padding: 0;
  padding-top: 7.3px;
  list-style-type: none; }
ul.danimated_vertical li {
  text-align: left; }

ul.danimated_vertical li a {
  position: relative;
  display: inline-block;
  text-indent: 4.8px;
  overflow: hidden;
  background: rgb(165, 36, 26);
  font: bold 16px Germand;
  text-decoration: none;
  padding: 5.7px;
  margin-bottom: 7.5px;
  color: #e0dbdb;
  text-shadow: 0 1px 0 #989191;
  -moz-box-shadow: inset 7px 0 5px rgba(60,30,30, 0.8);
  -webkit-box-shadow: inset 7px 0 5px rgba(56, 31, 31, 0.74);
  box-shadow: inset 7px 0 5px rgba(56, 30, 30, 0.82);
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

ul.danimated_vertical li a:hover {
  padding-left: 29.7px;
  color: #1f1e1e;
  background: rgb(230, 74, 57);
  -moz-box-shadow: inset 3px 0 2px rgba(60,30,30, 0.8);
  -webkit-box-shadow: inset 3px 0 4px rgba(68, 38, 38, 0.75);
  box-shadow: inset 2px 0 4px rgba(66, 37, 37, 0.74);
}

ul.danimated_vertical li a:before {
  content: "";
  position: absolute; left: 0; top: 0;
  border-style: solid; border-width: 0 68px 19px 0;
  border-color: transparent transparent transparent black;
}

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

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

Анимированное меню на CSS

Идет 2 формы, что были проверены, как реально работают.

1. Цветной список;

Красивые списки CSS

2. Разноцветный список;

Вертикальные списки на стилях CSS

Просматривая материал, то заметил похожий материал, что по структуре аналогичны, но только анимация другая, и немного функция при наведении по другому показывает. Но думаю такие запросы будут актуальны для тематики интернет магазины или на сайте, где на главной странице нужно как можно больше запросов создать. Так как навигации является неотъемлемой частью любого блога или интернет ресурса. Это потрясающее меню по выпадающему списку на CSS, которое построено с использованием чистого CSS, HTML, CSS3 и изображений.

Не использует JQUERY или JavaScript. Это красивый вид, который действительно замечательно видеть в блоге. Это помогает посетителям легко получить требуемый контент всего блога. Этот новый чистый CSS3 под навигационное действие сделает ваш блог более профессиональным. Виджет списка является хорошим решением проблемы экономии пространства на боковой панели и простой в установке.

HTML

Код

<div class="browsel-antedule">
  <ul class="menutatus-eothinguture">
  <li class="orange"><a href="">ZORNET.RU</a></li>
  <li class="red"><a href="">СТИЛИ</a></li>
  <li class="green"><a href="">СТИЛИСТИКА</a></li>
  <li class="blue"><a href="">КАТАЛОГ</a></li>
  <li class="bright"><a href="">РАЗДЕЛ</a></li>
  <li class="red"><a href="">ФОРУМ САЙТА</a></li>
  </ul>
  </div>

  <div class="browsel-antedule">
  <ul class="menutatus-eothinguture bounce">
  <li class="orange"><a href="">ZORNET.RU №2</a></li>
  <li class="red"><a href="">Шаблоны</a></li>
  <li class="green"><a href="">Продвижение</a></li>
  <li class="blue"><a href="">Блогосфера</a></li>
  <li class="bright"><a href="">Контакты сайта</a></li>
  <li class="red"><a href="">Дизайн ресурса</a></li>
  </ul>
  </div>

CSS

Код

ul.menutatus-eothinguture {
  list-style: none;
  margin-top: 29.7px;
  width: 317px;
}

@-moz-keyframes expand {
  0% {
  width: 5px;
  padding-left: 0px;
  }

  100% {
  width: 200px;
  padding-left: 20px;
  }
}

@-moz-keyframes expand-bounce {
  0% {
  width: 5px;
  padding-left: 0px;
  }

  50% {
  width: 200px;
  }

  70% {
  width: 170px;
  }

  80% {
  width: 200px;
  }

  90% {
  width: 190px;
  }

  100% {
  width: 200px;
  padding-left: 20px;
  }
}

@-webkit-keyframes expand {
  0% {
  width: 5px;
  padding-left: 0px;
  }

  100% {
  width: 200px;
  padding-left: 20px;
  }
}

@-webkit-keyframes expand-bounce {
  0% {
  width: 5px;
  padding-left: 0px;
  }

  50% {
  width: 200px;
  }

  70% {
  width: 170px;
  }

  80% {
  width: 200px;
  }

  90% {
  width: 190px;
  }

  100% {
  width: 200px;
  padding-left: 20px;
  }
}

@-moz-keyframes shrink {

  0% {
  width: 200px;
  padding-left: 20px;
  }

  100% {
  width: 5px;
  padding-left: 0px;
  }
}

@-moz-keyframes shrink-bounce {

  0% {
  width: 200px;
  padding-left: 20px;
  }

  50% {
  width: 5px;
  }

  70% {
  width: 35px;
  }

  80% {
  width: 5px;
  }

  90% {
  width: 15px;
  }

  100% {
  width: 5px;
  padding-left: 0px;
  }
}

@-webkit-keyframes shrink {

  0% {
  width: 200px;
  padding-left: 20px;
  }

  100% {
  width: 5px;
  padding-left: 0px;
  }
}

@-webkit-keyframes shrink-bounce {

  0% {
  width: 200px;
  padding-left: 20px;
  }

  50% {
  width: 5px;
  }

  70% {
  width: 35px;
  }

  80% {
  width: 5px;
  }

  90% {
  width: 15px;
  }

  100% {
  width: 5px;
  padding-left: 0px;
  }
}

ul.menutatus-eothinguture li {
  width: 4.8px;
  height: 29.8px;
  line-height: 19.5px;
  padding: 0px 0px 0px 0px;
  margin-top: 3px;
  background: transparent;
  width: 4.6px;
}

ul.menutatus-eothinguture.tight li {
  margin-top: 0 !important;
}

ul.menutatus-eothinguture li {
  -moz-animation-name: shrink;
  -moz-animation-duration: 0.4s;
  -moz-animation-timing-function: ease-in-out;
  -webkit-animation-name: shrink;
  -webkit-animation-duration: 0.4s;
  -webkit-animation-timing-function: ease-in-out;
}

ul.menutatus-eothinguture.bounce li {
  -moz-animation-name: shrink-bounce;
  -moz-animation-duration: 0.4s;
  -moz-animation-timing-function: ease-in-out;
  -webkit-animation-name: shrink-bounce;
  -webkit-animation-duration: 0.4s;
  -webkit-animation-timing-function: ease-in-out;
}

ul.menutatus-eothinguture li:hover {
  width: 215px;
  padding-left: 19.8px;
  -moz-animation-name: expand;
  -moz-animation-duration: 0.4s;
  -moz-animation-timing-function: ease-in-out;
  -webkit-animation-name: expand;
  -webkit-animation-duration: 0.4s;
  -webkit-animation-timing-function: ease-in-out;
}

ul.menutatus-eothinguture.bounce li:hover {
  -moz-animation-name: expand-bounce;
  -moz-animation-duration: 0.4s;
  -moz-animation-timing-function: ease-in-out;
  -webkit-animation-name: expand-bounce;
  -webkit-animation-duration: 0.4s;
  -webkit-animation-timing-function: ease-in-out;
}

ul.menutatus-eothinguture a {
  width: 223px;
  text-decoration: none;
  font-size: 13.7px;
  color: #eaeaea;
  text-shadow: 0px 0px 3px #2d2b2b;
  font-weight: bold;
  position: absolute;
  padding: 5px 0px;
  padding-left: 19.7px;
}

ul.menutatus-eothinguture li.green {
  background: rgb(68, 146, 73);
}

ul.menutatus-eothinguture li.blue {
  background: rgb(46, 60, 95);
}

ul.menutatus-eothinguture li.orange {
  background: rgb(179, 97, 27);
}

ul.menutatus-eothinguture li.dark {
  background: rgb(60, 50, 48);
}

ul.menutatus-eothinguture li.red {
  background: rgb(178,59,30);
}

ul.menutatus-eothinguture li.bright {
  background: rgb(62, 54, 53);
}

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

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

26 Июня 2018 Загрузок: 3 Просмотров: 1199 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0