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

Выпадающее вертикальное меню с CSS + JQuery

Очень много можно заметить на сайтах, что пользуются материалом, как выпадающее меню, которое появляется по клику и помощью CSS3 и JQuery. Что безусловно на любой интернет площадке навигация становится намного лучше, так как в этом меню можно разместить намного больше актуальных запросов, которые находятся на главной страницы. Полюс в том, что почти не чего по месту занимать, так как только появится само обозначение, чтоб можно его вызвать, но и аналогичным способом по клику его закрыть, где нажав на крестик, весь каркас заедет, как был по умолчанию.

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

Все проверено на тестовой площадке, где был добавлен фон, что идет также в стилистике в самом низу и в HTML, что также в самый низ помещенный.

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

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

HTML

Код

<div class="motempladern">
  <div class="icon-close">
  <img src="http://zornet.ru/ABVUN/Anisa/close.png">
  </div>
  <ul class="taplasadesign-motempladern">
  <li>
  <div class="mailchimposubs">
  <a href="#">
  <i class="fa fa-home" aria-hidden="true"></i>Главная
  </a>
  </div>
  </li>
  <li>
  <div class="mailchimposubs">
  <a href="#">
  <i class="fa fa-user" aria-hidden="true"></i>Скрипты
  </a>
  </div>
  </li>
  <li class="verypekyou-busines">
  <div class="mailchimposubs">
  <a href="#">
  <i class="fa fa-suitcase" aria-hidden="true"></i>SEO
  <i class="plus fa fa-plus " aria-hidden="true"></i>
  </a>
  </div>
  <ul class="submotempladernItems">
  <li><a href="#">Стили</a></li>
  <li><a href="#">Градиент</a></li>
  <li><a href="#">Web студия</a></li>
  <li><a href="#">Адаптивность</a></li>
  </ul>
  </li>
  <li>
  <div class="mailchimposubs">
  <a href="#">
  <i class="fa fa-envelope" aria-hidden="true"></i>Контакты
  </a>
  </div>
  </li>
  </ul>
  </div>

  <div class="ameleautgusaul">
<div class="icon-motempladern">
  <i class="fa fa-bars"></i>
  menu
  </div>
  <div class="gunlkomitedop">ZorNet.Ru</div>
  <footer>Интересные решения вебмастеру для создания качественного</footer>
  </div>

CSS

Код

.motempladern{
  background: #2c3e50;
  position: fixed;
  left: -285px; /* start off behind the scenes */
  width: 285px;
  height: 100%;
  color:#fff;
}

.taplasadesign-motempladern{
  width: 100%;
}

.mailchimposubs {
  cursor: pointer;
  display: block;
  padding: 3px 0px 3px 20px;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 45px;
  color: #fff;
  position: relative;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

.mailchimposubs:hover{
  background: #415161;
}

.mailchimposubs i{
  font-size:18px;
  padding-right:15px;
}

.submotempladernItems{
  background-color: #2574A9;
  line-height: 45px;
}

.submotempladernItems li{
  padding-left:15px;
  border:1px solid #216898;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

.submotempladernItems li:last-child{
  border: none;
}

.submotempladernItems li:hover{
  background-color: #6BB9F0;
}

.submotempladernItems a{
  display:block;
  padding: 5px 0px 5px 45px;
}

.icon-close {
  cursor: pointer;
  padding-left: 10px;
  padding-top: 10px;
}

.icon-motempladern {
  width: 80px;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  padding-bottom: 25px;
  padding-left: 25px;
  padding-top: 25px;
  text-decoration: none;
  text-transform: uppercase;
}

.icon-motempladern i {
  margin-right: 5px;
}

.plus{
  margin-left: 117px;
  font-size: 12px;
}

.gunlkomitedop, footer{
  text-align: center;
  position: relative;
}

.gunlkomitedop{
  font-size:75px;
  color: white;
  text-shadow:1px 2px 2px black;
  top:100px;
}

footer{
  font-size:14px;
  top:100px;
  color:#fff;
  letter-spacing:0.1em;
  text-transform:lowercase;
}

footer a:hover{
  color:yellowgreen;
}

/* ameleautgusaul */
.ameleautgusaul {
  background: url(http://zornet.ru/ABVUN/Anisa/furtuna_4.jpg) no-repeat center center fixed;
  height: 100vh;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position:center;
  position:relative;
}

Код

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

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

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

06 Ноября 2018 Просмотров: 1096 Комментариев: (0)

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

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

Kosten

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