(HTML / SASS) Как сверстать вертикальный сайдбар?

Question

Проблема состоит в том, что у меня никак не выходит адекватно сверстать такую менюшку, которая распологается ровно слева, прямо как на этой картинке:

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

Помимо ответа и объяснения, также может помочь и полезная статья, касающаяся моей проблемы, если такая есть. Заранее скажу, что если вы приложите код, то оставляйте только те CSS строки кода, которые связанны с расположениями предметов, а не цвет фона или шрифт. И заранее спасибо!

Answer 1

Это как-то так делается. Хотя конечно при уменьшении высоты экрана браузера тут будут проблемы, но все решабельно

body {
  margin: 0;
}

.nav {
  position: fixed;
  left: 0;
  color: #fff;
  width: 100vh;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  bottom: -50px;
  /* Вся магия тут */
  transform: rotate(270deg);
  transform-origin: 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.nav_text {
  position: relative;
  padding-left: 70px;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav_text:before {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  width: 40px;
  height: 2px;
  background-color: #fff;
}

.fab {
  font-size: 16px;
  text-align: center;
  margin: 0 5px;
  min-width: 20px;
  transform: rotate(90deg)
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav class="nav">
  <ul>
    <li><i class="fab fa-youtube"></i></li>
    <li><i class="fab fa-facebook-f"></i></li>
    <li><i class="fab fa-vk"></i></li>
    <li><i class="fab fa-instagram-square"></i></li>
  </ul>
  <span class="nav_text">Контактная информация</span>


</nav>

БЛОГ НА HUSL

(HTML / SASS) Как сверстать вертикальный сайдбар?

Ответы (1 шт):