Мне нужна помощь в создании CSS для современной вертикальной навигационной панели

Question

Я играл с (по-моему) довольно современной вертикальной навигационной панелью, я довольно сильно ее подавил, однако она не очень отзывчива, как и все. И его лучше, если его переписать. Любая помощь приветствуется :), или если у вас есть какое-либо видео, которое вы знаете или нашли, которое укажет мне направление, которое тоже будет работать!

Я попытался сделать два нормальных раздела одним разделом это около 8vw в ширину и идет вниз, а затем есть второй раздел, который, ну, для всего моего контента.

Надеюсь, вы, ребята, в безопасности.

Что Я спроектировал

Что касается кода, я сделал в сети довольно много того, что у меня было, у меня нет моего основного P C на данный момент, так как я переезжаю дома, надеюсь, это дает немного того, что у меня было.

https://looskie.webflow.io

Answer 1

Вы можете начать с чего-то вроде этого:

html,
body {
  min-height: 100%;
  max-height: 100%;
  height: 100%;
  font-family: Oswald, sans-serif, Arial;
  font-size: 14px;
  background: #fff
}

a {
  text-decoration: none
}

li {
  list-style: none
}

ul {
  margin: 0
}

.main-nav {
  width: 100vh;
  height: 45px;
  position: fixed;
  background: #4c4c4c;
  -webkit-transform-origin: left top;
  -webkit-transform: rotate(-90deg) translateX(-100%);
}

ul.nav {
  margin: 0 auto;
  height: 100%;
}

ul.nav li {
  margin-right: 20px;
  float: right;
  height: 100%;
  line-height: 45px;
}

ul.nav li a {
  color: #fff;
}

<div class="main-nav">
  <ul class="nav">
    <li><a href="#">HOME</a></li>
    <li><a href="#">METHODOLGY</a></li>
    <li><a href="#">PORTFOLIO</a></li>
    <li><a href="#">SERVICES</a></li>
    <li><a href="#">TEAM</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
</div>