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

Question

我一直在玩一个(我认为(非常现代的垂直导航栏，我把它弄得很低，但它似乎没有真正的响应，就像根本没有。如果重写它会更好。任何帮助都将不胜感激：(，或者如果你有任何你知道或发现的视频，这将使我朝着同样有效的方向前进！

我试着做了两个普通的部分，一个部分宽约8vw，一直往下，然后做第二个部分，好吧，这是我的其余内容。

希望你们安全。

我设计的

至于代码，我已经把我所拥有的大部分内容制作了一个网络流，因为我正在搬家，所以我现在没有主电脑，希望这能给我所拥有内容的一点现场体验。

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>