Светлое меню боковой панели на чистом CSS - Скачать для фотошопа и сайта

Регистрация Вход

Главная сайта

Форум Все для фотошопа и сайта

Страница 1 из 1
1

Светлое меню боковой панели на чистом CSS

diamont1977 Контакты diamont1977

Дата: Пятница, 22.12.2023, 17:32 | Сообщение # 1

Администраторы

Сообщений:: 1542

Замечания:: 0

Offline

Светлое меню боковой панели на чистом CSS

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

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

1. С открытием интернет ресурсам идет такая кнопка на меню:

При открытие выезжает полностью каркас навигации:

А здесь в самом низу будут социальные кнопки:

Установка:

В HEAD, если у вас не установлен стиль шрифтовых знаков.

Код

HTML

Код

<input type="checkbox" id="check">
  <label class="button bars" for="check"><i class="fas fa-bars"></i></label>
  <div class="navega_kilasmub">
  <div class="ulopan">
  <div class="logo">ZORNET.RU</div>
  <label class=" button cancel" for="check"><i class="fas fa-times"></i></label>
  </div>
  <ul>
  <li><a href="#"><i class="fas fa-qrcode"></i>Главная страница</a></li>
  <li><a href="#"><i class="fas fa-link"></i>Каталон файлов</a></li>
  <li><a href="#"><i class="fas fa-stream"></i>Раздел сайта</a></li>
  <li><a href="#"><i class="fas fa-calendar-week"></i>Раздел форума</a></li>
  <li><a href="#"><i class="fas fa-question-circle"></i>Скрипты и коды</a></li>
  <li><a href="#"><i class="fas fa-sliders-h"></i>Все для вебмастера</a></li>
  <li><a href="#"><i class="fas fa-phone-volume"></i>Написать письмо</a></li>
  <li><a href="#"><i class="fas fa-comments"></i>Feedback</a></li>
  </ul>
  <div class="esanulas_nugasub">
  <a href="#"><i class="fab fa-facebook-f"></i></a>
  <a href="#"><i class="fab fa-twitter"></i></a>
  <a href="#"><i class="fab fa-instagram"></i></a>
  <a href="#"><i class="fab fa-youtube"></i></a>
  </div>

  </div>

CSS

Код

.navega_kilasmub{
  position: relative;
  top: 0;
  left: -100%;
  width: 300px;
  height: 100vh;
  background: #ecf0f3;
  padding: 12px;
  box-shadow: -3px -3px 7px #f5f1f1,
  3px 3px 5px #ceced1,
  inset -3px -3px 7px #f5f1f1,
  inset 3px 3px 5px #c2c2c9;
  transition: all 0.3s ease;
}
.navega_kilasmub .ulopan{
  display: flex;
  justify-content: space-evenly;
}
.navega_kilasmub .ulopan .logo{
  font-size: 27px;
  font-weight: 600;
  color: #31344b;
}
.navega_kilasmub ul{
  margin-top: 35px;
  list-style: none;
}
.navega_kilasmub ul a{
  color: #31344b;
  text-decoration: none;
  display: block;
  margin-top: 12px;
  font-size: 18px;
  font-weight: 400;
  padding : 10px 25px;
  border-radius: 6px;
  box-shadow: -3px -3px 7px #f5f1f1,
  3px 3px 5px #c2c2c9;
  position: relative;
  transition: all 0.2s ease;
}
.navega_kilasmub ul i{
  margin-right: 10px;
}
.esanulas_nugasub{
  margin-top: 50px;
  display: flex;
  justify-content: center;
}
.esanulas_nugasub a{
  position: relative;
  margin: 0 4px;
  font-size: 17px;
  cursor: pointer;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  text-decoration: none;
  box-shadow: -3px -3px 7px #f5f1f1,
  3px 3px 5px #c2c2c9;
  transition: all 0.3s ease;
}
.navega_kilasmub ul a:hover:before,
.esanulas_nugasub a:hover:before{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset -3px -3px 7px #f5f1f1,
  inset 3px 3px 5px #c2c2c9;
}
.navega_kilasmub ul a:hover:before{
  border-radius: 6px;
}
.esanulas_nugasub a:hover:before{
  border-radius: 50%;
}
.navega_kilasmub ul a:hover{
  color: #3498db;
}

.esanulas_nugasub a:nth-child(1){
  color: #4267b2;
}
.esanulas_nugasub a:nth-child(2){
  color: #1da1f2;
}
.esanulas_nugasub a:nth-child(3){
  color: #e1306c;
}
.esanulas_nugasub a:nth-child(4){
  color: #ff0000;
}
label{
  font-size: 17px;
  color: #31344b;
  box-shadow: -3px -3px 7px #f5f1f1,
  3px 3px 5px #c2c2c9;
  height: 37px;
  width: 37px;
  border-radius: 50%;
  text-align: center;
  line-height: 37px;
  cursor: pointer;
  transition: all 0.3s ease;
}
label:hover{
  box-shadow: inset -3px -3px 7px #f5f1f1,
  inset 3px 3px 5px #c2c2c9;
  color: #3498db;
}
#check{
  display: none;
}
.bars{
  position: absolute;
  left: 15px;
  top: 15px;
}
#check:checked ~ .navega_kilasmub{
  left: 0;
}

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

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

Скаать Светлое меню боковой панели на чистом CSS

Прикрепления: 6227570.jpg (40.7 Kb) · 0203914.png (1.1 Kb) · 1744308.jpg (4.7 Kb) · 4392783.jpg (9.7 Kb)

Светлое меню боковой панели на чистом CSS

Страница 1 из 1
1