带-90deg菜单的下拉菜单 [英] Dropdown Menu with -90deg menubar

问题描述

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

I have a -90deg menu bar, the clickable buttons are also -90deg.. I am wondering if there is anyway I can add a dropdown menu to one of my buttons , test5/nth-child(5) is the one I would like to add a dropdown menu to, if possible I would appreciate it, if its possible to do the dropdown at -90deg that would be great, if not i can deal with horizontal that will also work great , Thanks Again

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>

推荐答案

确定...不完美，

第一件事是使用包装器来保存菜单。在这种情况下，我使用了一个 nav 。这让我们可以做的是正常建立菜单，但是转换包装器 nav 来定位我们想要的整个东西。

The first thing is to use a wrapper to hold the menu..in this case, I've used a nav. What this allows us to do is build the menu as normal but transform the wrapper nav to position the whole thing as we want.

这样。

这是我们的结构：

<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度）。为了调整nav的旋转点，我们使用 transform-origin 和一个小于 translateX 的高度 nav

Then we position the nav so that it's fixed to the top / right but we then rotate it 90 degrees (actually -90 degrees). To adjust the point at which the nav rotates we use transform-origin and a small translateX equal to the height of the 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);
}

现在我们在正确的地方有错误的顺序。

So, now we have the nav in the right place but the menu itself would have the wrong order.

我们通过将列表项目浮动到右边来解决，因此他们现在相反，第一个现在在旋转的顶部

We solve that by floating the list-items to the right and so they are now reverse and the first one is now at the top of the rotated menu.

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

确定...第一级完成。

OK...first level done.

第二级是另一个 ul ，但我们完全定位它

Second level is another ul but we position it absolutely

.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 */
}

最终结果代码

注意：我已经限制自己定位...我不确定一切还在，但我想基本的是有。

Note: I've restricted myself to the positioning...I'm not sure everything else is there yet but I think the basics are there.

这篇关于带-90deg菜单的下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！