ZorNet.Ru — сайт для вебмастера » HTML и CSS » Боковое прозрачное меню сайта на HTML + CSS

Боковое прозрачное меню сайта на HTML + CSS

Боковое прозрачное меню сайта на HTML + CSS
В материале представлено боковое меню навигации в прозрачном дизайне, которое выполнено на HTML и CSS, что будет появляться при клике по кнопке. Если кратко, то боковая панель считается одним из важных в навигации, как графический элемент управления по заданному сайту. Где оно будет отображаться в различном дизайне, и аналогично в разных формах, что отлично послужит для многих тематических площадках. Где его можно расположить с правой или с левой стороны. Данное боковая панель состоит из многочисленных ссылок под ключевые слова, которые помогают пользователю перемещать различные сайты внутри веб-страницы и упрощают работу пользователей.

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

Также все проверено на работоспособность:

Выезжающие меню для сайта на чистом CSS

Установка:

Если у вас не подключены шрифтовые знаки, то в NEAD нужно поставить данные стили на кнопки.

Код
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>

HTML

Код
<div class="karkas_navigatora">
  <input type="checkbox" id="check">
  <div class="asexon_one">
  <label for="check">
  <i class="fas fa-bars"></i>
  </label>
  </div>
  <div class="slaydera_navigatsia">
  <div class="avormena">
  <a href="#">Навигация</a>
  </div>
  <div class="asexon_two">
  <label for="check">
  <i class="fas fa-times"></i>
  </label>
  </div>
  <div class="navegatus">
  <ul>
   
  <li>
  <i class="fas fa fa-cog"></i>
  <a href="#">Каталоги</a>
  </li>
  <li>
  <i class="fas fa fa-database"></i>
  <a href="#">Разделы</a>
  </li>
  <li>
  <i class="fas fa-binoculars"></i>
  <a href="#">Оформление</a>
  </li>
  <li>
  <i class="fas fa-download"></i>
  <a href="#">Дизайнер</a>
  </li>
  <li>
  <i class="fas fa-cloud"></i>
  <a href="#">веб-мастер</a>
  </li>
  <li>
  <i class="fas fa-phone-volume"></i>
  <a href="#">Ваши контакты</a>
  </li>
  <li>
  <i class="far fa-comments"></i>
  <a href="#">Обратная связь</a>
  </li>
  </ul>
  </div>
  <div class="sotsialm_adukia">
  <ul>
  <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>
  </ul>
  </div>
  </div>
  </div>

CSS

Код
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.karkas_navigatora{
  position: relative;
  background: url('https://cs4.pikabu.ru/post_img/big/2016/05/25/6/1464163350188194633.jpg') right no-repeat;
  background-size: cover;
  height: 100vh;
  width: 100%;
}
.karkas_navigatora .slaydera_navigatsia {
  position: fixed;
  height: 100vh;
  width: 296px;
  left: -296px;
  background: rgb(226 220 220 / 18%);
  box-shadow: 0px 0px 6px rgb(173 162 162 / 50%);
  overflow: hidden;
  transition: all 0.3s linear;
}
.slaydera_navigatsia .avormena{
  position: absolute;
  width: 100%;
  height: 60px;
  box-shadow: 0px 2px 4px rgba(255, 255, 255, 0.5);
}
.slaydera_navigatsia .avormena a{
  color: #fff;
  font-size: 25px;
  font-weight: 500;
  position: absolute;
  left: 50px;
  line-height: 60px;
  text-decoration: none;
}
.slaydera_navigatsia .navegatus{
  position: absolute;
  top: 80px;
  width:100%;
}
.slaydera_navigatsia .navegatus li {
  margin-top: 5px;
  padding: 12px 18px;
}
.slaydera_navigatsia .navegatus i{
  color: #fdf3f3;
  font-size: 20px;
  padding-right: 8px;
}
.slaydera_navigatsia .navegatus a{
  color: #fdf3f3;
  font-size: 20px;
  text-decoration: none;
}
.slaydera_navigatsia .navegatus li:hover {
  border-left: 0.8px solid #9fbdc3;
  box-shadow: 0 0 2px rgb(214 214 214 / 50%);
}
.slaydera_navigatsia .sotsialm_adukia{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  list-style: none;
  cursor: pointer;
}
.slaydera_navigatsia .sotsialm_adukia i{
  text-decoration: none;
  padding: 0 5px;
  color: #fff;
  opacity: 0.6;
  font-size: 20px;
}
.slaydera_navigatsia .sotsialm_adukia i:hover{
  opacity: 1;
  transition: all 0.1s linear;
  transform: scale(1.01);
}
#check{
  display: none;
}
.karkas_navigatora .asexon_one i{
  color: #fdf3f3;
  font-size: 30px;
  font-weight: 700;
  position: absolute;
  left: 16px;
  line-height: 60px;
  cursor: pointer;
  opacity: 1;
  transition: all 0.3s linear;  
}
  .slaydera_navigatsia .asexon_two i{
  font-size: 25px;
  line-height: 60px;
  position: absolute;
  left: 240px;
  cursor: pointer;
  opacity: 0;
  transition: all 0.3s linear;
}
.asexon_one i:hover{
  font-size: 29px;
}
.asexon_two i:hover{
  font-size: 24px;
}
#check:checked ~ .slaydera_navigatsia{
  left: 0;
}
#check:checked ~ .asexon_one i{
  opacity: 0;
}
#check:checked ~ .slaydera_navigatsia .asexon_two i {
  opacity: 1;
  color: #e7fbff;
}

Как можно понять из материала, что все выполнено на чистом CSS, а значит задействовали только HTML и CSS для создания этой боковой панели.

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

Демонстрация
2021-09-22 Загрузок: 1 Просмотров: 353 Комментарий: (0)

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

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

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

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