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

【问题标题】：I need help making CSS for a modern vertical navbar我需要帮助为现代垂直导航栏制作 CSS
【发布时间】：2020-08-10 13:15:19
【问题描述】：

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

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

希望你们安全。

What I designed

至于代码，我已经制作了一个网络流，其中包含了我所拥有的大部分内容，因为我正在搬家，所以我现在没有主 PC，希望这能提供一些信息-我所拥有的网站。

https://looskie.webflow.io

【问题讨论】：

html 和 css 的代码将有助于查看
@Manjuboyz 我已经添加了一个几乎所有我所拥有的网络流，因为我正在搬家，所以我现在手头上没有我的电脑。希望对您有所帮助！
哦，好的，如果你有代码就太好了，我刚刚发布了答案，希望对开始有所帮助。

标签： css navigation nav

【解决方案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>

【讨论】：

那是完美的 Manjuboyz！非常感谢你，你真是太棒了，正是我想要的。我希望你是安全的！