I need help making CSS for a modern vertical navbar

问题

I have been playing around with a (I think) pretty modern vertical nav bar, I've gotten it pretty much down, however its like not really responsive, like at all. And its better off if its rewritten. Any help is appreciated :), or if you have any video that you know of or found that'll gear me in the direction that'll work too!

I've tried making a two normal sections one section thats about 8vw wide and goes all the way down and then having a second section thats, well, for the rest of my content.

Hope you guys are being safe.

What I designed

As for code, I've made a webflow of pretty much of what I had, I don't have my main PC on me at the moment since I'm moving houses, hopefully this gives a bit of an in-site of what I had.

https://looskie.webflow.io

回答1:

You can start with something like this:

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>

来源：https://stackoverflow.com/questions/61451159/i-need-help-making-css-for-a-modern-vertical-navbar

标签

css

navigation

nav