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

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

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

А на остальном месте, вы можете создать описание или поставить информер. И, также экран пользовательского устройства меньше размера рабочего стола, на странице будет отображаться тег ввода и метки. В противном случае он не отображается на смартфоне или планшете, а только на рабочем столе. При наведении присутствует приятный эффект скольжения с богатым современным дизайном, а точнее будет меняться палитра цвета. Навигация поддерживает все устройства, где еще отлично выводится, как на экране, так и на мониторе.

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

Для начало рассмотрим, как будет по умолчанию:

Здесь вызвали навигацию, плюс в ней запросы:

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

HTML

Код

<body>
  <ul class="mailzamarketing">
  <li class="withoutresamug"><a href="#">ZORNET.RU</a></li>
  <li class="withoutresamug"><a href="#">Шаблоны</a></li>
  <li class="withoutresamug"><a href="#">Скрипты</a></li>
  <li class="withoutresamug"><a href="#">Блог</a></li>
  <li class="withoutresamug"><a href="#">Дизайн</a></li>
  </ul>
  <input type="checkbox" id="nav_optimized" class="nav_optimized" alt="zornet.ru">
  <label for="nav_optimized"><span class="menu"></span></label>
  <section class="foundation_gtunib">
  <section class="trafowilabe_leeting">
  <div>
  <h1>ZorNet: Создание сайта на uCoz</h1>
  </div>
  <div>
  Как только ваш сайт подготовлен к увеличению трафика, вы должны начать движение к нему! Вы узнаете, как это сделать с уникальными стратегиями в социальных сетях, которые мы опишем.</p>
  </div>
  </section>
  <div class="content_optimized">
  <div class="gafront_udiences"></div>
  <div>
  <footer>
  </footer>

CSS

Код

* {
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.images div img {
  width: 100%;
  height: auto;
  margin-bottom: 15px;
}

footer {
  background-color: #54a44d;
  width: 100%;
  height: auto;
}

@media only screen and (min-width: 901px) {
  body {
  margin: 0;
  font-family: 'Junge', serif;
  font-size: 14px;
  overflow-x: hidden;
  }
  header {
  width: 100%;
  background-color: #014421;
  height: auto;
  position: relative;
  }
  .mailzamarketing {
  /* style to your own liking */
  list-style: none;
  background: #014421;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  margin: 0;
  }
  .mailzamarketing li {
  position: relative;
  width: 100%;
  float: right;
  }
  /* mailzamarketing Menu - List items */
  .withoutresamug {
  /* Setting a width of 200px */
  width: 200px;
  }
  /* non-critical appearance styles */
  .withoutresamug a {
  text-align: left;
  text-transform: uppercase;
  display: block;
  padding: 1em;
  color: #ffffff;
  text-decoration: none;
  font-size: 1.2em;
  float: right;
  }
  .withoutresamug a:hover {
  color: #54a44d;
  }

  .foundation_gtunib {
  min-width: 100%;
  min-height: 100%;
  background-color: #014421;
  position: relative;
  top: 0;
  bottom: 100%;
  right: 0;
  z-index: 1;
  padding: 4em;
  background-size: 200%;
  }

  .nav_optimized {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  }
  li.withoutresamug {
  margin: 0;
  }
  label[for="nav_optimized"] {
  position: fixed;
  right: 15px;
  top: 15px;
  z-index: 2;
  width: 30px;
  height: 30px;
  cursor: pointer;
  }
  /* Make the Magic Happen */
  .nav_optimized + label,
  .foundation_gtunib {
  transition: right 0.2s;
  }
  .nav_optimized:checked + label {
  right: 215px;
  }
  .nav_optimized:checked ~ .foundation_gtunib {
  right: 200px;
  }

  .menu {
  width: 30px;
  height: 20px;
  position: relative;
  display: inline-block;
  border-top: 4px solid #fff;
  }
  .menu:after,
  .menu:before {
  content: '';
  width: 100%;
  height: 4px;
  background-color: #fff;
  position: absolute;
  }
  .menu:after {
  bottom: 0px;
  left: 0;
  }
  .menu:before {
  top: 4px;
  left: 0;
  }

  .logo {
  height: auto;
  position: relative;
  text-align: center;
  }
  .business_header {
  width: 100%;
  height: auto;
  }
  .business_header img {
  width: 100%;
  height: auto;
  margin: 0;
  }
  .trafowilabe_leeting {
  color: #fff;
  padding-top: 20px;
  }
  .trafowilabe_leeting h1 {
  font-family: 'Calligraffitti', cursive;
  font-size: 36px;
  padding: 10px;
  text-align: center;
  }
  .trafowilabe_leeting div {
  font-size: 30px;
  text-align: center;
  }
  .massage {
  width: 100%;
  }
  .benefits {
  width: 100%;
  }
  .services {
  width: 100%;
  }
  .h3content_optimized {
  font-family: 'Calligraffitti', cursive;
  padding-top: 10px;
  padding-bottom: 5px;
  text-align: center;
  font-size: 24px;
  line-height: 1.0;
  }
  .h4content_optimized {
  font-family: 'Calligraffitti', cursive;
  padding-top: 10px;
  padding-bottom: 5px;
  text-align: center;
  font-size: 18px;
  line-height: 1.0;
  }
  .contact li {
  padding-left: 15px;
  padding-right: 10px;
  vertical-align: middle;
  }
  /*Images Div Home Page*/
  .images div {
  width: 33.3333%;
  height: auto;
  float: left;
  }
  /*End of Images Div Styling*/
  /*Column Styling*/
  .gafront_udiences img {
  width: 100%;
  height: auto;
  float: left;
  padding: 20px;
  }
  .content_optimized {
  background-color: #C7B299;
  width: 100%;
  height: auto;
  }
  .content_optimized div {
  color: #fff;
  line-height: 1.5em;
  width: 30%;
  height: auto;
  float: left;
  margin: 0% 1%;
  padding-bottom: 10px;
  }
  .content_optimized ol,
  .content_optimized ul {
  line-height: 1.5em;
  padding-top: 10px;
  padding-right: 25px;
  padding-bottom: 10px;
  padding-left: 25px;
  }
  .content_optimized li {
  line-height: 1.5em;
  }
  .content_optimized a {
  text-decoration: none;
  color: #111111;
  }
  .content_optimized a:hover {
  color: #001B42;
  text-decoration: underline #001B42;
  }
  iframe {
  width: 100%;
  height: 450px;
  }
  .appointment ul {
  list-style: none;
  vertical-align: middle;
  }
  .appointment li {
  vertical-align: middle;
  padding-bottom: 20px;
  display: block;
  }
  .appointment a {
  text-align: right;
  padding-bottom: 20px;
  margin-left: 30px;
  }
  .appointment a:hover {
  color: blue;
  }
  .order_form div {
  float: left;
  width: 100%;
  height: auto;
  }
  .order_form form {
  width: 100%;
  height: auto;
  float: left;
  text-transform: uppercase;
  padding: 25px;
  }
  input {
  padding: 5px;
  }
  legend {
  padding-right: 5px;
  padding-left: 5px;
  text-transform: uppercase;
  }
  input[type=submit] {
  width: 10em;
  height: 2em;
  text-transform: uppercase;
  }
  input[type=submit]:hover {
  width: 10em;
  height: 2em;
  text-transform: uppercase;
  background-color: #000;
  color: #fff;
  }
  .form_labels {
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 0px;
  }
  .form_labels_submit {
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 10px;
  }
  .submit {
  padding: 2px;
  }
  /* End of Column Styling */
  /*Footer Styling*/
  footer {
  clear: both;
  width: 100%;
  background-color: #014421;
  height: auto;
  /*position: relative;*/
  }
  footer ul {
  list-style: none;
  margin: 0;
  padding-left: 50px;
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: center;
  /*position: relative;*/
  }
  footer li {
  color: #fff;
  display: inline-block;
  margin-right: 25px;
  }
  footer li:last-child {
  margin-right: 0;
  }
  footer a {
  color: #fff;
  font-size: 12px;
  font-weight: 100;
  text-decoration: none;
  text-transform: uppercase;
  }
  footer li a i:hover {
  color: #C7B299;
  -webkit-transition: 1s;
  transition: 1s;
  -webkit-transform: rotate(0deg);
  transform: rotate(360deg);
  -moz-transition: 1s;
  -moz-transform: rotate(0deg);
  transform: rotate(360deg);
  text-decoration: none;
  }
  footer pre {
  padding-bottom: 15px;
  padding-top: 15px;
  text-align: center;
  color: #fff;
  border-top: 3px solid #fff;
  }
  footer .contact {
  background-color: #54a44d;
  }
  footer .contact ul {
  list-style: none;
  padding-left: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  position: relative;
  background-color: #54a44d;
  text-decoration: none;
  }
  footer .contact li {
  color: #fff;
  display: inline-block;
  padding-left: 5px;
  padding-top: 10px;
  padding-bottom: 30px;
  background-color: #54a44d;
  margin-bottom: 10px;
  }
}

@media only screen and (max-width: 900px) {
  body {
  background-color: #C7B299;
  margin: 0 auto;
  font-family: 'Junge', serif;
  overflow-x: hidden;
  }

  .logo img {
  width: 100%;
  height: 100%;
  float: none;
  /*padding: 10px;*/
  margin: 0;
  position: relative;
  }
  .mailzamarketing {
  list-style: none;
  background: #014421;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  margin: 0;
  }
  .mailzamarketing li {
  position: relative;
  width: 100%;
  float: right;
  }
  .withoutresamug {
  width: 200px;
  }
  .withoutresamug a {
  text-align: left;
  text-transform: uppercase;
  display: block;
  padding: 1em;
  color: #ffffff;
  text-decoration: none;
  font-size: 1.2em;
  float: right;
  }
  .withoutresamug a:hover {
  color: #54a44d;
  }
  .socialNav a i {
  display: block;
  padding: 1em;
  color: #ffffff;
  text-decoration: none;
  font-size: 1.2em;
  float: right;
  }
  .socialNav a i:hover {
  color: #ffddd4;
  }
  .foundation_gtunib {
  min-width: 100%;
  min-height: 100%;
  background-color: #014421;
  position: relative;
  top: 0;
  bottom: 100%;
  right: 0;
  z-index: 1;
  padding: 8em;
  background-size: 150%;
  }
  .nav_optimized {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  }
  li.withoutresamug {
  margin: 0;
  }
  label[for="nav_optimized"] {
  position: fixed;
  right: 75px;
  top: 15px;
  z-index: 2;
  width: 30px;
  height: 30px;
  cursor: pointer;
  }

  .menu {
  width: 30px;
  height: 20px;
  position: relative;
  display: inline-block;
  border-top: 4px solid #fff;
  }
  .menu:after,
  .menu:before {
  content: '';
  width: 100%;
  height: 4px;
  background-color: #fff;
  position: absolute;
  }
  .menu:after {
  bottom: 0px;
  left: 0;
  }
  .menu:before {
  top: 4px;
  left: 0;
  }
  .nav_optimized + label,
  .foundation_gtunib {
  transition: right 0.2s;
  }

  .nav_optimized:checked + label {
  right: 200px;
  }
  .nav_optimized:checked ~ .foundation_gtunib {
  right: 215px;
  }

  .contact li {
  font-size: small;
  padding-right: 5px;
  vertical-align: middle;
  text-align: center;
  }
  .business_header {
  margin: 0;
  width: 100%;
  height: auto;
  }
  .business_header img {
  width: 100%;
  height: auto;
  }
  .trafowilabe_leeting {
  background-color: #C7B299;
  text-align: center;
  }
  .gafront_udiences img {
  width: 100%;
  height: auto;
  }
  .content_optimized div {
  background-color: #C7B299;
  line-height: 1.25em;
  padding-top: 0px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
  width: 100%;
  float: none;
  }
  .content_optimized ol,
  .content_optimized ul {
  line-height: 1.5em;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 30px;
  }
  iframe {
  width: 100%;
  height: auto;
  }
  .appointment ul {
  list-style: none;
  vertical-align: middle;
  }
  .appointment li {
  vertical-align: middle;
  padding-bottom: 20px;
  display: block;
  }
  .appointment a {
  vertical-align: middle;
  text-align: right;
  padding-top: 0px;
  padding-bottom: 20px;
  padding-left: 20px;
  margin: 10px auto;
  color: #000;
  }
  .appointment a:hover {
  color: blue;
  }
  .order_form div {
  float: left;
  width: 100%;
  height: auto;
  padding: 10px;
  margin-bottom: 15px;
  }
  .order_form form {
  width: 100%;
  height: auto;
  float: left;
  }
  .form_labels {
  padding: 10px;
  }
  input[type=submit] {
  width: 5em;
  height: 2em;
  text-transform: uppercase;
  margin-bottom: 10px;
  margin-left: 10px;
  }
  input[type=submit]:hover {
  width: 5em;
  height: 2em;
  text-transform: uppercase;
  background-color: #000;
  color: #fff;
  margin-left: 10px;
  }
  .trafowilabe_leeting h1 {
  font-family: 'Calligraffitti', cursive;
  font-size: 24px;
  padding: 10px;
  text-align: center;
  }
  .massage {
  width: 100%;
  }
  .benefits {
  width: 100%;
  }
  .services {
  width: 100%;
  }
  .h3content_optimized {
  font-family: 'Calligraffitti', cursive;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  line-height: 1.0;
  }
  .h4content_optimized {
  font-family: 'Calligraffitti', cursive;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  line-height: 1.0;
  }
  footer {
  height: auto;
  float: none;
  width: 100%;
  background-color: #54a44d;
  /* position: relative;*/
  }
  footer ul {
  padding-top: 5px;
  list-style: none;
  margin: 0;
  padding-left: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  /*position: relative;*/
  }
  footer li {
  font-weight: bold;
  padding-bottom: 5px;
  color: #004d0d;
  display: inline-block;
  margin-right: 25px;
  }
  footer li:last-child {
  margin-right: 0;
  }
  footer a {
  color: #004d0d;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  }
  footer a:hover {
  text-decoration: none;
  }
  footer pre {
  background-color: #54a44d;
  padding-bottom: 0px;
  padding-top: 5px;
  text-align: center;
  color: #000;
  position: relative;
  }
  footer .footer_contact {
  background-color: #54a44d;
  }
  footer .footer_contact ul {
  list-style: none;
  margin: 0;
  text-align: center;
  position: relative;
  background-color: #54a44d;
  }
  footer .footer_contact li {
  color: #000;
  display: inline-block;
  margin: 0;
  text-align: center;
  padding-left: 0px;
  padding-top: 10px;
  padding-right: 40px;
  padding-bottom: 10px;
  background-color: #54a44d;
  }
  footer .footer_contact li i {
  padding-right: 20px;
  }
}

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

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

25 Апреля 2018 Просмотров: 1692 Комментариев: (0)

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

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

Kosten

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