下拉菜单移动元素

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/

---

编辑： 从评论

关于具有元素保持直立，但 “滑下” 对角线。

您可能需要做一些微调，但是这将说明的总体思路：

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）这个子列表来弥补旋转变换引起的位置偏移。

$(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); 
 
    } 
 
    }); 
 
});

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

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

注意还有，将需要解决的问题，如出现字母倒着一些化妆品的问题 - 但至少这个答案给你如何做一个基本的想法它..

希望这有助于。