ZorNet.Ru — сайт для вебмастера » Меню для сайта » Адаптивное горизонтальное меню сайта CSS

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

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

Ставят его как на блог или на форум, просто содержать информацию можно содержать в меню и удобно для пользователя. Что по гамме цвета, то здесь нет не одной ссылки, что означает, вы можете выставить свой цвет, который отлично подойдет на ваш интернет ресурс. Все редактируется не сложно, и здесь поставлено 3 запроса, что для кого то мало и можете добавить, то количество, которое нужно.

Так идет по умолчанию:

Основной код вверх сайта в самый низ можно поставить.

Код

<nav>
  <a class="active" href="#">Главная zornet.ru<b></b></a>
  <a href="#">Форум zornet.ru<b></b></a>
  <a href="#">Каталог файлов zornet.ru<b></b></a>
</nav>

CSS:

Код

nav {
  background: indianred;
  background-image: -webkit-linear-gradient(hsl(0, 53%, 48%) 20%, hsl(0, 53%, 28%));
  background-image: -o-linear-gradient(hsl(0, 53%, 48%) 20%, hsl(0, 53%, 28%));
  background-image: -moz-linear-gradient(hsl(0, 53%, 48%) 20%, hsl(0, 53%, 28%));
  background-image: -ms-linear-gradient(hsl(0, 53%, 48%) 20%, hsl(0, 53%, 28%));
  background-image: linear-gradient(hsl(0, 53%, 48%) 20%, hsl(0, 53%, 28%));
  text-align: center;
  font-size: 0.9em;
}

nav a {
  display: inline-block;
  padding: 0.5em 2em;
  color: hsl(0, 53%, 90%);
  font-weight: 100;
  text-decoration: none;
  line-height: 1.5em;
  text-shadow: 0 1px #715415;
  position: relative;
  z-index: 1;
}

nav a b {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: khaki;
  background-image: -webkit-linear-gradient(#f4de8e, #715415 80%, #f4de8e 90%, #715415);
  background-image: -o-linear-gradient(#f4de8e, #715415 80%, #f4de8e 90%, #715415);
  background-image: -moz-linear-gradient(#f4de8e, #715415 80%, #f4de8e 90%, #715415);
  background-image: -ms-linear-gradient(#f4de8e, #715415 80%, #f4de8e 90%, #715415);
  background-image: linear-gradient(#f4de8e, #715415 80%, #f4de8e 90%, #715415);
  z-index: -1;
  opacity: 0;
  content: "";
  -webkit-transition: opacity 1s;
}

nav a:hover b,
nav a.active b {
  opacity: 1;
}

@media only screen and (max-width: 800px) {
  nav a {
  margin: 0.5em;
  border-radius: 0.25em;
  border: 1px solid hsl(0, 53%, 40%);
  box-shadow: 0 0 5px 0px hsl(0, 53%, 40%) inset;
  }

  nav a:hover { box-shadow: 0; }
}

@media only screen and (max-width: 400px) {
  nav a {
  margin: 0;
  border-radius: 0;
  border-bottom: 1px solid hsl(0, 53%, 30%);
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  display: block;
  }
}

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

27 Апреля 2017 Просмотров: 4724 Комментариев: (4)

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

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

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 4
Порядок вывода комментариев: Марковичь 27 Апреля 2017 01:58¹ 0 Красиво сделано, не когда не думал, что такие цвета будут друг друга дополнять. tsakonter 27 Апреля 2017 22:17² 0 Полностью переделал, чисто посмотреть как оно получится, есть большое преимущество по смени дизайн и можно от оригинала сделать совершенно не похоже и остается адаптация. FeStemBer 27 Апреля 2017 23:01³ 0 Но а что здесь менять, в идеале темный сделать стиль, просто редко такой дизайн встретишь, чтоб такой стиль подошел. Kolinkor 28 Апреля 2017 07:45⁴ 0 Можно переделать под другой дизайн, но так отлично, вот подарок сайту.)