» »

Адаптивное горизонтальное меню сайта 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.04.2017 Просмотров: 726 Комментарий: (4)

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

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

Комментарий: 4
Марковичь
Марковичь 27.04.2017 01:581
0
Красиво сделано, не когда не думал, что такие цвета будут друг друга дополнять.
tsakonter
tsakonter 27.04.2017 22:172
0
Полностью переделал, чисто посмотреть как оно получится, есть большое преимущество по смени дизайн и можно от оригинала сделать совершенно не похоже и остается адаптация.
FeStemBer
FeStemBer 27.04.2017 23:013
0
Но а что здесь менять, в идеале темный сделать стиль, просто редко такой дизайн встретишь, чтоб такой стиль подошел.
Kolinkor
Kolinkor 28.04.2017 07:454
0
Можно переделать под другой дизайн, но так отлично, вот подарок сайту.)

avatar