Dropdown-Menü Elemente verschieben

Question

Gibt es eine Möglichkeit, das Dropdownmenü diagonal zu verschieben, wenn das Untermenü geöffnet wird? Derzeit ist mein Menü bewegt sich nach oben und unten, wie Sie sehen können http://jsfiddle.net/LthgY/1280/ i daneben gekrümmten Bild hinzufügen möchten, aber da es auf und ab bewegt, stürzt es ins Bild

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

Sicher - Sie können einfach drehen Sie Ihren Dropdown-Box mit Transformation

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

Kann zu Ihrem CSS hinzugefügt werden, um dies zu erreichen.

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

---

EDIT: Von Kommentar

in Bezug auf die Elemente, die aufrecht bleiben, aber "nach unten rutschen" diagonal.

Sie könnten etwas Feinabstimmung zu tun haben, aber das wird die gesamte Idee illustrieren:

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

Ich habe die folgende CSS-Regeln:

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

Wesentlichen, was das bedeutet ist rotates die Unterliste nur innerhalb eines Menüs und dann translates (moves) die Unterliste, um den durch die Rotationstransformation verursachten Positionsoffset auszugleichen.

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

HINWEIS Es gibt noch einige kosmetische Probleme, die solche angesprochen werden müssen wie die Buchstaben rückwärts erscheinen - aber zumindest diese Antwort gibt Ihnen eine grundlegende Vorstellung davon, wie zu tun es ..

hoffe das hilft.