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

Адаптивное меню с установкой на чистом CSS

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

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

Адаптивная панель навигации с эффектом в HTML и CSS

Это все изображение при проверках сделаны по работоспособности.

1. На широком мониторе;

Создание адаптивной панели навигации на CSS

2. Автоматически панель переходит под мобильные устройства;

Адаптивных меню используются решений CSS

3.Клик по кнопке для вызова окна с аналогичными запросами под ссылками;

Адаптивное выпадающее меню на HTML-разметке

Установка:

Чтоб появились знаки, то нужно в HEAD прописать шрифтовой стиль, если ранее не устанавливали.

Код

HTML

Код

<div class="navigation">
  <input type="checkbox" id="seveka">
  <div class="nasvanu"><a href="#">ZORNET.RU</a></div>
  <ul>
  <label class="btn kigadu" for="seveka"><i class="fas fa-times"></i></label>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Форумt</a></li>
  <li><a href="#">Блог</a></li>
  <li><a href="#">Статья</a></li>
  <li><a href="#">Контакты</a></li>
  </ul>
  <label for="seveka" class="btn bars"><i class="fas fa-bars"></i></label>
  </div>

  </nav>

CSS

Код

nav{
  width: 100%;
  padding: 12px 0;
  background: #ecf0f3;
  box-shadow: -3px -3px 7px #ffffff,
  3px 3px 5px #ceced1,
  inset -3px -3px 7px #ffffff,
  inset 3px 3px 5px #ceced1;
}
nav .navigation{
  max-width: 1270px;
  margin: auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.navigation .nasvanu a{
  font-size: 28px;
  font-weight: 600;
  text-decoration: none;
  color: #31344b;
}
.navigation ul{
  list-style: none;
  display: flex;
}
.navigation ul a{
  margin:0 8px;
  text-decoration: none;
  font-size: 18px;
  color: #31344b;
  font-weight: 400;
  display: inline-flex;
  padding: 10px 12px;
  box-shadow: -3px -3px 7px #ffffff,
  3px 3px 5px #ceced1;
  position: relative;
  transition: all 0.3s ease;
}
.navigation ul a:hover:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset -3px -3px 7px #ffffff,
  inset 3px 3px 5px #ceced1;
}

.navigation ul a:hover{
  color: #3498db;
}
nav label.btn{
  color: #31344b;
  font-size: 18px;
  cursor: pointer;
  display: none;
}
nav label.kigadu{
  position: absolute;
  top: 25px;
  right: 30px;
}
#seveka{
  display: none;
}
@media (max-width:940px) {
  .navigation ul{
  display: block;
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  max-width: 400px;
  padding-top: 45px;
  height: 100%;
  background: #ecf0f3;
  box-shadow: 0 5px 10px #b0b0b5;
  z-index: 12;
  transition: all 0.3s ease;
  }
  .navigation ul a{
  display: block;
  font-size: 23px;
  width: 100%;
  margin-top: 30px;
  box-shadow: none;
  text-align: center;
  }
  .navigation ul a:hover:before{
  box-shadow: none;
  }
  nav label.bars{
  display: block;
  }
  #seveka:checked ~ label.bars{
  display: none;
  }
  #seveka:checked ~ ul label.kigadu{
  display: block;
  }
  #seveka:checked ~ ul{
  left: 0;
  }
}

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

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

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

19 Октября 2021 Загрузок: 4 Просмотров: 1489 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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