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

Posted 2023-04-13

【中文标题】我需要帮助为现代垂直导航栏制作 CSS

【英文标题】：I need help making CSS for a modern vertical navbar

【发布时间】：2020-08-10 13:15:19

【问题描述】：

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

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

希望你们安全。

What I designed

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

https://looskie.webflow.io

【问题讨论】：

html 和 css 的代码将有助于查看

@Manjuboyz 我已经添加了一个几乎所有我所拥有的网络流，因为我正在搬家，所以我现在手头上没有我的电脑。希望对您有所帮助！

哦，好的，如果你有代码就太好了，我刚刚发布了答案，希望对开始有所帮助。

【参考方案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！非常感谢你，你真是太棒了，正是我想要的。我希望你是安全的！