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

Адаптивная полная панель навигации на CSS

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

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

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

1. Материал проверен и так он выглядит после установки, где при открытии страницы или заходе на ресурс.

Горизонтальное меню для сайта на HTML+CSS

2. Здесь видим скрытую информацию, где до этого нажали на элемент кнопки.

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

Навигация для сайта

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

HTML

Код

<div class="udantiumgend">
  <div class="vetumil-dasetun">

  <div class="akopetun-lsagud">
  <p>ZorNet - для вебмастера</p>
  </div>

  <div class="midstab-molsamed">
  <div class="gaboriosam top"></div>
  <div class="gaboriosam center"></div>
  <div class="gaboriosam bottom"></div>
  </div>

  <div class="cusantium">
  <ul class="keptatum-saporibus">
  <li class="home"><a href="#">Главная сайта</a></li>
  <li class="diogsaceton"><a href="#">Скрипты для сайта</a></li>
  <li class="tonconsectetu"><a href="#">Шаблоны для uCoz</a></li>
  <li class="ntiumeligend"><a href="#">Стилистика сайта</a></li>
  <li class="nsequatu"><a href="#">Обратная связь</a></li>
  </ul>
  </div>
</div>

CSS

Код

.vetumil-dasetun {
  position: fixed;
  top: 0;
  height: 80px;
  width: 100%;
  background: #e2dddd;
  box-shadow: 0px 4px 10px rgba(86, 85, 85, 0.59), 0px 10px 30px -15px rgba(45, 43, 43, 0.34);
}

.akopetun-lsagud {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2a78a9;
  font-size: 27px;
  font-weight: bold;
}

.midstab-molsamed {
  position: fixed;
  top: 27px;
  left: 18px;
  cursor: pointer;
  z-index: 1002;
}

.midstab-molsamed .gaboriosam {
  background: #7b240f;
  width: 35px;
  height: 5px;
  margin-bottom: 5px;
  opacity: 1;
  border-radius: 3px;
  transition: all 0.2s ease;
}

.midstab-molsamed:hover .top{
  transform: translateY(-100%);
}

.midstab-molsamed:hover .bottom{
  transform: translateY(100%);
}

.cusantium{
  position: fixed;
  top: -250%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f9f7f7;
  opacity: 0.95;
  z-index: 1001;
  transition: all 0.7s ease;
}

.keptatum-saporibus{
  list-style: none;
  text-align: center;
  margin-top: 58px;
}

.keptatum-saporibus li {
  font-size: 35px;
  font-weight: bold;
  margin-top: 3px;
}

.keptatum-saporibus li.home a{
  color: #232121;
}

.keptatum-saporibus li.diogsaceton a{
  color: #266994;
}

.keptatum-saporibus li.tonconsectetu a{
  color: #6e4e92;
}

.keptatum-saporibus li.ntiumeligend a{
  color: #3a2d7d;
}

.keptatum-saporibus li.nsequatu a{
  color: #2d7d30;
}

.cusantium.cusantium-active{
  top: 0;
}

.midstab-molsamed .top.conseckotu-adipisicing{
  transform: translateY(200%) rotate(135deg);
}

.midstab-molsamed .bottom.hamburger-bottom{
  transform: translateY(-200%) rotate(-135deg);
}

.midstab-molsamed .center.hamburger-center{
  opacity: 0;
}

Код

$(".midstab-molsamed").click(function(){
  $(".cusantium").toggleClass("cusantium-active");
  $(".midstab-molsamed .top").toggleClass("conseckotu-adipisicing");
  $(".midstab-molsamed .bottom").toggleClass("hamburger-bottom");
  $(".midstab-molsamed .center").toggleClass("hamburger-center");
});

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

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

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

02 Декабря 2018 Загрузок: 1 Просмотров: 1652 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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