Question

我有一个-90deg菜单栏，可点击的按钮也是-90deg ..我想知道无论如何我可以在我的一个按钮上添加一个下拉菜单，test5 / nth-child（5）是一个我想添加一个下拉菜单，如果可能的话我会很感激，如果它可以在-90deg做下拉，这将是伟大的，如果不是我可以处理水平，也将工作很好，再次感谢

https://jsfiddle.net/nyjhfr8g/2/

CSS -

body {
  font-family:Verdana,Geneva,sans-serif;
  color:#FFF;
  font-size:12px;
  font-family:Trebuchet MS,Arial,Helvetica;
  text-align:center;
  background:url() no-repeat center 0,#000 url() left top;
  background-size:1670px 950px;
}

p {
  margin-bottom:10px;
  line-height:21px;
}

a {
  color:#F09;
  text-decoration:none;
}

a:hover {
  text-decoration:underline;
}

#right_menu {
  position:fixed;
  font-size:15px;
  top:0;
  right:0;
  background-color:#FF00FF;
  width:50px;
  height:100%;
}

#right_menu a {
  text-align:center;
  display:block;
  padding:10px;
  height:15%;
  width:50px;
  margin-bottom:0;
  text-transform:uppercase;
  position:relative;
}

#right_menu a:nth-child(1) {
  background-color:#FF00FF;
  color:#FFF;
}

#right_menu a:nth-child(1) span {
  display:block;
  position:absolute;
  top:40px;
  left:-40px;
  width:130px;
  color:#FFF;
  -webkit-transform:rotate(-90deg);
  -moz-transform:rotate(-90deg);
  -ms-transform:rotate(-90deg);
  transition:left .3s ease;
}

#right_menu a:nth-child(1):hover span {
  left:-45px;
}

#right_menu a:nth-child(2) {
  background-color:#FF00FF;
  color:#FFF;
}

#right_menu a:nth-child(2) span {
  display:block;
  position:absolute;
  top:20px;
  left:-40px;
  width:130px;
  color:#FFF;
  -webkit-transform:rotate(-90deg);
  -moz-transform:rotate(-90deg);
  -ms-transform:rotate(-90deg);
  transition:left .3s ease;
}

#right_menu a:nth-child(2):hover span {
  left:-45px;
}

#right_menu a:nth-child(3) {
  background-color:#FF00FF;
  color:#FFF;
}

#right_menu a:nth-child(3) span {
  display:block;
  position:absolute;
  top:20px;
  left:-40px;
  width:130px;
  color:#FFF;
  -webkit-transform:rotate(-90deg);
  -moz-transform:rotate(-90deg);
  -ms-transform:rotate(-90deg);
  transition:left .3s ease;
}

#right_menu a:nth-child(3):hover span {
  left:-45px;
}

#right_menu a:nth-child(4) {
  background-color:#FF00FF;
  color:#FFF;
}

#right_menu a:nth-child(4) span {
  display:block;
  position:absolute;
  top:20px;
  left:-40px;
  width:130px;
  color:#FFF;
  -webkit-transform:rotate(-90deg);
  -moz-transform:rotate(-90deg);
  -ms-transform:rotate(-90deg);
  transition:left .3s ease;
}

#right_menu a:nth-child(4):hover span {
  left:-45px;
}

#right_menu a:nth-child(5) {
  background-color:#FF00FF;
  color:#FFF;
}

#right_menu a:nth-child(5) span {
  display:block;
  position:absolute;
  top:20px;
  left:-40px;
  width:130px;
  color:#FFF;
  -webkit-transform:rotate(-90deg);
  -moz-transform:rotate(-90deg);
  -ms-transform:rotate(-90deg);
  transition:left .3s ease;
}

#right_menu a:nth-child(5):hover span {
  left:-45px;
}

#right_menu a:nth-child(6) {
  background-color:#FF00FF;
  color:#FFF;
}

#right_menu a:nth-child(6) span {
  display:block;
  position:absolute;
  top:20px;
  left:-40px;
  width:130px;
  color:#FFF;
  -webkit-transform:rotate(-90deg);
  -moz-transform:rotate(-90deg);
  -ms-transform:rotate(-90deg);
  transition:left .3s ease;
}

#right_menu a:nth-child(6):hover span {
  left:-45px;
}

HTML -

<div id="right_menu">
    <a href="#testing1"><span>testing</span></a>
    <a href="#testing2"><span>testing</span></a>
    <a href="#testing3"><span>testing</span></a>
    <a href="#testing4"><span>testing</span></a>
    <a href="#testing5"><span>Drop MENU</span></a>
    <a href="#testing6"><span>testing</span></a>
</div>

Answer 1

好的......不完美，但我认为我已经足够了，所以你可以调整以满足你的要求。

首先要使用包装器来保存菜单..在这种情况下，我使用了nav。这允许我们做的是正常构建菜单，但转换包装器nav以根据需要定位整个事物。

所以

这是我们的结构：

<nav>
  <ul id="right_menu">
    <li><a href="#">Item 1</a>
    </li>
    <li><a href="#">Item 2</a>
    </li>
    <li><a href="#">Item 3</a>
    </li>
    <li><a href="#">Item 4</a>
      <ul class="sub_menu">
        <li><a href="">Sub-item 1</a>
        </li>
        <li><a href="">Sub-item 2</a>
        </li>
        <li><a href="">Sub-item 3</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Item 5</a>
    </li>
  </ul>
</nav>

然后我们定位nav以使其固定在顶部/右侧但然后我们将其旋转90度（实际上是-90度）。要调整导航旋转的点，我们使用transform-origin和小translateX等于nav的高度

nav {
  height: 50px;
  line-height: 50px;
  background: #FF00FF;
  position: fixed;
  top:50;
  right:0;
  width: 100vh; /* I'm always the height (after rotation) of the viewport */
  transform-origin:top right;
  transform:translateX(-50px) rotate(-90deg);
}

所以，现在我们将导航器放在正确的位置，但菜单本身的顺序错误。

我们通过将列表项浮动到右边来解决这个问题，因此它们现在是反向的，第一个现在位于旋转菜单的顶部。

#right_menu > li {
    float: right;
    text-transform:uppercase;
    position: relative;
    color:white;
    list-style:none;
}

好的......完成第一级。

第二级是另一个ul，但我们绝对定位

.sub_menu {
  display: none;
  position: absolute;
  top:-100%; /* now to the "left" of the parent */
  left:50%;
  transform:translateX(-50%); /* center it over the parent */
  width: auto;
  white-space: nowrap; /* allows the sub menu to be wider than parent */
}

Final Result Codepen

注意：我限制自己定位......我不确定其他所有内容是否存在但我认为基础知识已经存在。

带-90deg菜单栏的下拉菜单

1 个答案: