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

Создать простое адаптивное меню с помощью CSS

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

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

1. Идет по умолчанию, только одни запросы.

2. Здесь уже вид на узком экране и появляется надпись, что можно развернуть.

3. Вот по клику развернули, и эти категорий уже не по горизонталь, а по вертикале стоят.

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

Вверх сайта:

Код

<nav tabindex="0"><div tabindex="0"><a href="#">ZORNET.RU</a><a href="#">ZORNET.RU №2</a><a href="#">ZORNET.RU №3</a><a href="#">ZORNET.RU №4</a></div></nav>

CSS:

Код

nav a, nav:before, nav div:before {
  display: inline-block;
  padding: 20px 0;
  color: #fff;
  text-align: center;
  cursor: pointer; /* курсор в виде руки, обязателен для Opera Mini */
  background: rgb(28, 82, 111); /* цвет фона кнопки "меню" */
}
nav a {
  width: 25%; /* 4 пункта меню, то есть 100%/4 */
  background: rgb(46,95,122); /* фон пунктов меню */
  text-decoration: none;
}
nav a:hover {
  background: rgb(96,145,172); /* фон пунктов при наведении */
}
@media (max-width: 800px) { /* для экранов, меньше 800px */
  nav a, nav:before, nav div:before {
  width: 100%; /* пункты меню растягиваются на всю ширину блока */
  }
  nav:before {
  content: "меню";
  }
  nav:focus:before {
  content: none;
  }
  nav:focus div:before {
  content: "свернуть меню";
  }
  nav:not(:focus) div:not(:active) { /* магия кнопки "меню", благодаря чему навигация скрывается/появляется по щелчку */
  display: none;
  }
}

В стилях все подробно описано, что отвечает и за какие функций, так как материал видно идет как учебный.

Источник его, что можете перейти и ознакомиться по этой ссылке, где подробно описано и предоставлено еще в комментариях материал.

08 Мая 2017 Просмотров: 3332 Комментариев: (5)

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

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

Kosten

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

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

Комментарии: 5
Порядок вывода комментариев: Сопрано 08 Мая 2017 04:04¹ 0 Это повтор, уже было это меню, вот здесь оно расположено. Но здесь интереснее на источнике. Scheme 08 Мая 2017 04:09² 0 Как видно просто сама основа представлена, а там дальше можно что то самому придумать, или просто для навигаций, если оно под мобильный настроено. Kosten 08 Мая 2017 04:11³ 0 Делаю изображение к материалу и думаю, что то мне эта картинка знакома, просто там драл материал с демонстрация, а здесь с источника, что думаю и материал и сам источник для веб мастера будет просто полезен, так считаю. ucozmental 09 Мая 2017 07:43⁴ 0 Мне так кажется это просто идет как основа под какой то урок, что нужно так делать. Если переделывать, то вот уже есть основа и видно, если шири будите его строить, то надписи автоматически по центру установятся. Сафрон 09 Мая 2017 07:55⁵ 0 Но почему не подойдет, возможно есть какой то дизайн, где как закладки и даже по вверх горизонтального или в низ под шапку поставить, видно что по адаптаций хорошо смотрится.