【问题标题】: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!非常感谢你,你真是太棒了,正是我想要的。我希望你是安全的!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-06-20
  • 2014-10-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多