垂直导航与旋转文本

Question

垂直导航与旋转文本

cssnavigationvertical-alignmentnavigationbar

6

我将尝试实现一个垂直导航菜单，其中包含链接，并使用CSS3将链接文本旋转270度。我旋转了它，因为我希望文本从底部到顶部显示。问题是当我添加上边距时，间距变得不一致。您可以在这里查看我的代码。我无法理解所占用的不同空间。我还尝试给li设置高度，但没有成功。如果有人能帮帮我就好了。以下是我的代码： HTML：

<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>

CSS:

.rotate{
    -webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-o-transform:rotate(270deg);writing-mode:lr-tb}
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 {
  padding:0;
  margin:0
}
.main-nav {
  width:45px;
  float:left;
  height:100%;
  position:fixed;
  background:#4c4c4c
}
ul.nav {
  width:21px;
  margin:0 auto
}
ul.nav li:first-child {
  padding-top:35px
}
ul.nav li {
  padding-top:124px
}
ul.nav li a {
  -webkit-transform:rotate(270deg);
  -moz-transform:rotate(270deg);
  -o-transform:rotate(270deg);
  writing-mode:lr-tb;
  float:left;
  width:21px;
  color:#fff
}

- fahad.kazi

3

我会将外层的div旋转，你可以尝试这个演示 http://jsbin.com/ravuduni/2 - King King

这看起来很完美，我非常感谢你的帮助。我只想问一些问题，因为我不知道它们的含义。translateX（-100％）这个属性是什么意思？width：100vh中的vh代表什么？请将此作为您的答案，并我会接受它。 - fahad.kazi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- King King · Accepted Answer

旋转每个a元素或li元素将导致我们在定位这些元素时遇到一些间距问题。我们应该先构建横向展开的导航菜单，使其看起来正常，然后再旋转整个导航菜单的容器。以下是更新后的代码：

.main-nav {
  width:100vh;    
  height:45px;
  position:fixed;
  background:#4c4c4c;
  -webkit-transform-origin: left top;
  -webkit-transform:rotate(-90deg) translateX(-100%);
}
ul.nav li {    
  margin-right:20px;
  float:right;
  height:100%;
  line-height:45px;
}

菜单的高度应该是固定的 45px（旋转后变成宽度）。我们使用 line-height: 45px 将 a 元素垂直居中（旋转后会变成水平居中）。首先，.main-nav 横向排列如下所示： enter image description here

我们需要将其逆时针旋转 -90deg（即顺时针旋转90度），绕指定为 transform-origin: left top 的点 left - top 旋转。旋转后，所有的 .main-nav 都看不见了，如下图所示： enter image description here

因此，我们需要把它向下平移一个距离为 100% 的宽度，但需要注意的是，我们不能使用 translateY，因为旋转后，X轴变成垂直方向（而不是之前的水平方向），所以必须使用 translateX(-100%) （正方向是向上的，在旋转之前是向右的）。然后我们得到： enter image description here

这只是CSS3中变换的一个简单应用。对于 vh 单位，它是相对于视口高度的单位。 100vh 表示 viewport's height 的 100%。我们必须为 width 使用 100vh，因为旋转后，width 变成了 height。它应该填满整个视口的高度。但是，您可以通过像素设置一些 min-width 来限制 width 的最小值。这是因为当您调整窗口大小时，视口的高度可能变小，因此 width 也会相应缩小。还要注意的是，我们必须将 li 元素的 float:left 更改为 float:right，以便从上到下首先显示 Home 菜单，否则（使用 float:left），Home 菜单将出现在末尾（底部）。这里有一个略微复杂的 transform 用法（对于新手来说），即如果一个 transform 属性使用多个变换，则所有变换都用空格分隔，并且变换的顺序很重要。例如，rotate(-90deg) translateX(-100%) 首先旋转 -90deg，然后沿 X 轴平移 -100%，而 translateX(-100%) rotate(-90deg) 则相反，这是完全不同的效果，当然也不起作用（会产生意外的结果）。

垂直导航与旋转文本

Jsbin Demo.