下拉菜单移动元素

Question

如果子菜单打开，有没有办法让下拉菜单移动对角线？目前我的菜单上下移动，如你所见http://jsfiddle.net/LthgY/1280/ 我想在它旁边添加曲线图片，但由于它上下移动，它会崩溃到图片

$(document).ready(function(){
  $("#menu > li > a").on("click", function(e){
    if($(this).parent().has("ul")) {
      e.preventDefault();
    }

    if(!$(this).hasClass("open")) {
      $("#menu li ul").slideUp(350);
      $("#menu li a").removeClass("open");

      $(this).next("ul").slideDown(350);
      $(this).addClass("open");
    }

    else if($(this).hasClass("open")) {
      $(this).removeClass("open");
      $(this).next("ul").slideUp(350);
    }
  });
});

Answer 1

当然 - 您只需使用转换

旋转下拉框即可

#menu { 
    transform: rotate(45deg);
}

可以添加到CSS中以实现此目的。

http://jsfiddle.net/LthgY/1281/

修改  来自评论

关于让元素保持直立，但是＆＃34;向下滑动＆＃34;斜。

您可能需要做一些微调，但这将说明整体想法：

http://jsfiddle.net/LthgY/1282/

我更改了以下CSS规则：

 #menu li ul {
   transform: rotate(45deg);
   transform: translateX( -50px);
   transform: translateY(10px);
   display: none;
   line-height: 70%;
  }

基本上这样做只是rotates菜单中的子列表，然后是translates（moves）子列表，以弥补由旋转变换引起的位置偏移。

＆＃13;

＆＃13;

$(document).ready(function() {
  $("#menu > li > a").on("click", function(e) {
    if ($(this).parent().has("ul")) {
      e.preventDefault();
    }

    if (!$(this).hasClass("open")) {
      $("#menu li ul").slideUp(350);
      $("#menu li a").removeClass("open");

      $(this).next("ul").slideDown(350);
      $(this).addClass("open");
    } else if ($(this).hasClass("open")) {
      $(this).removeClass("open");
      $(this).next("ul").slideUp(350);
    }
  });
});

＆＃13;

ol,
ul {
  list-style: none;
}
/* 
 *  modified CSS rule  below
 */

#menu {
  margin-left: 65px;
}
#menu li ul {
  transform: translateX(-90px);
  transform: rotate(45deg);
  margin-left: -30px;
  display: none;
  line-height: 70%;
}
#menu li ul li {
  transform: rotate(-45deg);
}
#menu li ul li a {
  font-size: 11px;
  text-decoration: none;
  transform: translateY(-10px);
}
/* end of modified rules */

#menu a {
  text-decoration: none;
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
  <li><a class="menu1" href="#">Menu1</a>
    <ul>
      <li><a class="menu1_1" href="#">A</a>
      </li>
      <li><a class="menu1_2" href="#">B</a>
      </li>
      <li><a class="menu1_3" href="#">C</a>
      </li>
      <li><a class="menu1_4" href="#">D</a>
      </li>
    </ul>
  </li>

  <li><a class="menu2" href="#">Menu2</a>
    <ul>
      <li><a class="menu1_1" href="#">A</a>
      </li>
      <li><a class="menu1_2" href="#">B</a>
      </li>
      <li><a class="menu1_3" href="#">C</a>
      </li>
      <li><a class="menu1_4" href="#">D</a>
      </li>
    </ul>
  </li>

  <li><a class="menu3" href="#">Menu3</a>
    <ul>
      <li><a class="menu1_1" href="#">A</a>
      </li>
      <li><a class="menu1_2" href="#">B</a>
      </li>
      <li><a class="menu1_3" href="#">C</a>
      </li>
      <li><a class="menu1_4" href="#">D</a>
      </li>
    </ul>
  </li>

  <li><a class="menu4" href="#">Menu4</a>
    <ul>
      <li><a class="menu1_1" href="#">A</a>
      </li>
      <li><a class="menu1_2" href="#">B</a>
      </li>
      <li><a class="menu1_3" href="#">C</a>
      </li>
      <li><a class="menu1_4" href="#">D</a>
      </li>
    </ul>
  </li>

  <li><a class="menu5" href="#">Menu5</a>
    <ul>
      <li><a class="menu1_1" href="#">A</a>
      </li>
      <li><a class="menu1_2" href="#">B</a>
      </li>
      <li><a class="menu1_3" href="#">C</a>
      </li>
      <li><a class="menu1_4" href="#">D</a>
      </li>
    </ul>
  </li>

  <li><a class="menu6" href="#">Menu6</a>
    <ul>
      <li><a class="menu1_1" href="#">A</a>
      </li>
      <li><a class="menu1_2" href="#">B</a>
      </li>
      <li><a class="menu1_3" href="#">C</a>
      </li>
      <li><a class="menu1_4" href="#">D</a>
      </li>
    </ul>
  </li>

  <li><a class="menu7" href="#">Menu7</a>
    <ul>
      <li><a class="menu1_1" href="#">A</a>
      </li>
      <li><a class="menu1_2" href="#">B</a>
      </li>
      <li><a class="menu1_3" href="#">C</a>
      </li>
      <li><a class="menu1_4" href="#">D</a>
      </li>
    </ul>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

注意还有一些需要解决的装饰性问题，例如字母向后显示 - 但至少这个答案可以让您基本了解如何操作......

希望这会有所帮助。