ドロップダウンメニューの要素を移動

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/

---

EDIT：コメント

から 要素を有するに関しては直立のままですが、斜めに "滑り落ちます"。私は、次のCSSルールを変更し

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

：あなたは、いくつかの微調整を行う必要がありますが、これは全体的な考え方を説明します

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

NOTEはまだ文字が後方登場するなど、対処する必要がありますいくつかの化粧品の問題がありますそれは..

希望これは役立ちます。