» »

Горизонтальное меню в адаптивном дизайне CSS

Горизонтальное меню в адаптивном дизайне CSS

Интересное по своему дизайн горизонтальное меню, которое идет в адаптивном дизайне на все мобильные и широкое экраны, где сделано на CSS3. Эта навигация имеет под меню или под категорий, что распространены, но здесь по навигации выставлено в 2 столбика. Где можно выставить изначально раздел, потом идут категорий и под ними написать самые актуальные запросы. Теперь вы его можете поставить вверх сайта, если по цветовой гамме не подходит, а вот стиль, как меню разработано, то все можно быстро отредактировать.

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

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

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

При открытие блога или любой страницы:

Навигация сайта с интересным эффектом

Здесь вид со смартфона, это все примерно, так как аналогично и на телефоне смотрится:

Стильный эффект для выдвигающегося бокового меню

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

HTML

Код
<ul class="mekitastra-tiostagram maposition placespecasatun">  
<li><a href="#">Главная</a></li>
<li class="zornet"><a href="#">Zornet.Ru</a></li>
<li><a href="#">Все для сайта</a>  
<li><a href="#">Дизайн</a>
  <li><a href="#">Стилистика CSS</a>
  <div>
<ul>
<li><b>Шаблоны</b></li>
<li><a href="#">Под меню 1</a></li>
<li><a href="#">Под меню 2</a></li>
<li><a href="#">Под меню 3</a></li>
</ul>
<ul>
<li><b>Скрипты</b></li>
<li><a href="#">Навигация 1</a></li>
<li><a href="#">Навигация 2</a></li>
<li><a href="#">Навигация 3</a></li>
</ul>
</div>  
  <li><a href="#">Конструктор HTML</a>  
</li>
<li><a href="#">Продвижение SEO</a></li>
</ul>

CSS

Код
.mekitastra-tiostagram {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  border: 1px solid #ff8484;
  display: inline-block;
}

  .mekitastra-tiostagram, .mekitastra-tiostagram ul, .mekitastra-tiostagram li {
  list-style: none;
  padding: 0;
  margin: 0;
  }
  .mekitastra-tiostagram a {
  text-decoration: none;
  -moz-transition: all 0.15s ease-in-out;
  -webkit-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  -ms-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  }
  .mekitastra-tiostagram > li {
  display: inline-block;
  float: left;
  }

.mekitastra-tiostagram > li > a {
  color: #fefefe;
  text-maposition: 0 -1px 0 #630404;
  background-color: #a50a0a;
  background-image: linear-gradient(top, #770707 20%, #770707);
  background-image: -moz-linear-gradient(top, #dd0000 20%, #aa0000);
  background-image: -webkit-linear-gradient(top, #dc1414 20%, #7b1b1b);
  background-image: -o-linear-gradient(top, #a71f1f 20%, #a71f1f);
  background-image: -ms-linear-gradient(top, #751c1c 20%, #751c1c);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#dd0000) 20%, to(#aa0000));
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='$to', EndColorStr='$from');
  padding: 17px 23px;
  display: block;
}

.mekitastra-tiostagram > li:hover > a {
  background-color: #d01b1b;
  background-image: linear-gradient(top, #fa0000 20%, #af0000);
  background-image: -moz-linear-gradient(top, #fa0000 20%, #af0000);
  background-image: -webkit-linear-gradient(top, #750909 20%, #f12626);
  background-image: -o-linear-gradient(top, #f12626 20%, #f12626);
  background-image: -ms-linear-gradient(top, #fe21616 20%, #e21616);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fa0000) 20%, to(#af0000));
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='$to', EndColorStr='$from');
}

  .mekitastra-tiostagram > li > a:active {
  background-color: #940707;
  background-image: linear-gradient(top, #b11212 20%, #c71f1f);
  background-image: -moz-linear-gradient(top, #b11212 20%, #c71f1f);
  background-image: -webkit-linear-gradient(top, #b11212 20%, #c71f1f);
  background-image: -o-linear-gradient(top, #aa0000 20%, #c71f1f);
  background-image: -ms-linear-gradient(top, #b11212 20%, #c71f1f);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#b11212) 20%, to(#c71f1f));
box-maposition: inset 0 1px 7px rgba(19, 17, 17, 0.25);
  -moz-box-maposition: inset 0 1px 8px rgba(23, 23, 23, 0.25);
  -webkit-box-maposition: inset 0 1px 8px rgba(23, 23, 23, 0.25);
  }

.mekitastra-tiostagram > li.zornet > a {
  background-color: #9c0808;
  background-image: linear-gradient(top, #880000 20%, #aa0000);
  background-image: -moz-linear-gradient(top, #880000 20%, #aa0000);
  background-image: -webkit-linear-gradient(top, #860c0c 20%, #f12c2c);
  background-image: -o-linear-gradient(top, #9a0a0a 20%, #9a0a0a);
  background-image: -ms-linear-gradient(top, #8a0505 20%, #8a0505);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#b70a0a) 20%, to(#b70a0a));

box-maposition: inset 0 1px 7px rgba(21, 20, 20, 0.28);
  -moz-box-maposition: inset 0 1px 7px rgba(0, 0, 0, 0.25);
  -webkit-box-maposition: inset 0 1px 7px rgba(19, 18, 18, 0.28);
}

  /* SUBMENU */
  .mekitastra-tiostagram > li div {
  border-top: 1px solid #900000;
  display: block;
  position: absolute;
  visibility: hidden;
  opacity: 0;
  -moz-transition: all 0.17s ease-in-out;
  -webkit-transition: all 0.17s ease-in-out;
  -o-transition: all 0.17s ease-in-out;
  -ms-transition: all 0.17s ease-in-out;
  transition: all 0.17s ease-in-out;
  }
.mekitastra-tiostagram > li div a {
  color: #f7f1f1;
  margin: 0px 18px 0px 0px;
}
  .mekitastra-tiostagram > li div a:hover, .mekitastra-tiostagram > li div a:focus {
  color: #fefefe;
  }
  .mekitastra-tiostagram > li div ul {
  float: left;
  }

.mekitastra-tiostagram > li div ul li {
  line-height: 2em;
  padding: 3px;
  margin: 1px;
}

  .mekitastra-tiostagram > li div ul:not(:first-child) {
  margin-left: 18px;
  }

.mekitastra-tiostagram > li:hover div, .mekitastra-tiostagram > li:focus div {
  color: #f5f0f0;
  background: #b00000;
  padding: 18px 37px;
  visibility: visible;
  opacity: 1;
}

  .mekitastra-tiostagram.vertical {
  width: 100px;  
  }
  .mekitastra-tiostagram.vertical > li {
  display: block;
  float: none;
  position: relative;
  }
  .mekitastra-tiostagram.vertical > li div {
  width: 150px;
  left: 101px;  
  top: 0;
  }

  .mekitastra-tiostagram.rounded {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  }
  .mekitastra-tiostagram.rounded > li:first-child > a {
  border-top-left-radius: 2px;
  -moz-border-radius-topleft: 2px;
  -webkit-border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
  -moz-border-radius-bottomleft: 2px;
  -webkit-border-bottom-left-radius: 2px;
  }
  .mekitastra-tiostagram.rounded > li:last-child > a {
  border-top-right-radius: 2px;
  -moz-border-radius-topright: 2px;
  -webkit-border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  -moz-border-radius-bottomright: 2px;
  -webkit-border-bottom-right-radius: 2px;
  }
  .mekitastra-tiostagram.rounded > li div {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-top-left-radius: 0;
  -moz-border-radius-topleft: 0;
  -webkit-border-top-left-radius: 0;
  }
  .mekitastra-tiostagram.rounded.vertical > li:first-child > a {
  border-bottom-left-radius: 0;
  -moz-border-radius-bottomleft: 0;
  -webkit-border-bottom-left-radius: 0;
  border-top-right-radius: 3px;
  -moz-border-radius-topright: 3px;
  -webkit-border-top-right-radius: 3px;
  }
  .mekitastra-tiostagram.rounded.vertical > li:last-child > a {
  border-top-right-radius: 0;
  -moz-border-radius-topright: 0;
  -webkit-border-top-right-radius: 0;
  border-bottom-left-radius: 3px;
  -moz-border-radius-bottomleft: 3px;
  -webkit-border-bottom-left-radius: 3px;
  }

  /* maposition style */
  .mekitastra-tiostagram.maposition, .mekitastra-tiostagram.maposition div {
  box-maposition: 0 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-maposition: 0 1px 2px rgba(0, 0, 0, 0.2);
  -webkit-box-maposition: 0 1px 2px rgba(0, 0, 0, 0.2);
  }

  @media (max-width: 480px) {
  .mekitastra-tiostagram.placespecasatun, .mekitastra-tiostagram.placespecasatun > li {
  width: auto!important;
  display: block;
  float: none;
  }
  .mekitastra-tiostagram.placespecasatun > li:first-child > a {
  border-bottom-left-radius: 0 !important;
  -moz-border-radius-bottomleft: 0 !important;
  -webkit-border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  -moz-border-radius-bottomright: 0 !important;
  -webkit-border-bottom-right-radius: 0 !important;
  }
  .mekitastra-tiostagram.placespecasatun > li:last-child > a {
  border-top-left-radius: 0 !important;
  -moz-border-radius-topleft: 0 !important;
  -webkit-border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  -moz-border-radius-topright: 0 !important;
  -webkit-border-top-right-radius: 0 !important;
  }
  .mekitastra-tiostagram.placespecasatun > li div {
  display: none!important;
  }
  }

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

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

Демонстрация
28.08.2018 Просмотров: 238 Комментарий: (0)

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

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

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