下拉菜單移動元素

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>

注意還有，將需要解決的問題，如出現字母倒着一些化妝品的問題 - 但至少這個答案給你如何做一個基本的想法它..

希望這有助於。