我需要帮助为现代垂直导航栏制作 CSS

Question

我一直在玩弄一个（我认为）非常现代的垂直导航栏，我已经把它弄得差不多了，但是它的反应不是很灵敏，根本没有。如果重写它会更好。感谢您提供任何帮助 :)，或者如果您有任何您知道或发现的视频可以让我朝着同样有效的方向前进！

我试过制作两个普通部分，一个大约 8vw 宽并一直向下的部分，然后制作第二个部分，好吧，用于我的其余内容。

希望你们平安。

What I designed

至于代码，我已经将我所拥有的大部分内容制作成网络流，因为我正在搬家，所以目前我的主 PC 没有放在我身上，希望这能提供一些帮助我所拥有的现场。

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>

我需要帮助为现代垂直导航栏制作 CSS

I need help making CSS for a modern vertical navbar

css

navigation

nav