ZorNet.Ru — сайт для вебмастера » Меню для сайта » Выпадающее полноэкранное меню на CSS3

Выпадающее полноэкранное меню на CSS3

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

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

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

Этот снимок снят с тестового прогона, где Demo предоставлено ниже мануала.

Полноэкранные меню с эффектом наложения CSS

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

HTML

Код

<ul class="gunderlying_kardwaren">
  <li><a href="">Главная</a></li>
  <li><a href="">Скрипты</a></li>
  <li><a href="">Сайт Zornet.Ru</a></li>
  <li><a href="">Шаблоны сайта</a></li>
  <li><a href="">Контакты</a></li>
  <a class="gastreaming-topusames">×</a>
</ul>

<button class="button button_border" data-button="green" onclick="gunderlying_kardwaren('fade',document.getElementsByClassName('gunderlying_kardwaren')[0])">МЕНЮ</button><br/>

CSS

Код

ul.gunderlying_kardwaren {
  display: none;
  width: 100vw;
  height: 100vh;
  font-family: 'Roboto Slab', serif;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0;
  margin: 0;
  z-index: 10000000;
  opacity: 0;
  backface-visibility: hidden;
  background: rgba(8, 8, 8, 0.94);
}

ul.gunderlying_kardwaren li {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: block;
  text-align: center;
  height: 17vh;
  line-height: 25vh
}

ul.gunderlying_kardwaren li a {
  color: #fbfeff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 29px;
  display: inline-block;
  transition: all .5s;
}

ul.gunderlying_kardwaren li:hover a {
  -webkit-transform:scale(1.5);
  color: #44dbff;
}

ul.gunderlying_kardwaren .gastreaming-topusames {
  position: absolute;
  top: 0;
  right: 0;
  color: #fcfdfd;
  font-size: 38px;
  margin: 9px 18px;
  cursor: pointer;
}

ul.gunderlying_kardwaren .gastreaming-topusames:hover {
  color: #44b9f3
}

Код

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

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

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

22 Сентября 2018 Просмотров: 1207 Комментариев: (0)

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

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

Kosten

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