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;

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

希望这会有所帮助。

下拉菜单移动元素

1 个答案: