javascript - Dropdown menu move elements -

is there way make dropdown menu move diagonal if submenu opened? menu moves , down can see http://jsfiddle.net/lthgy/1280/ add curved picture next since moves , down, crashes picture

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

sure -- can rotate dropdown box transform

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

can added css achieve this.

http://jsfiddle.net/lthgy/1281/

---

edit: comment

regarding having elements remain upright, "slide down" diagonally.

you might have fine-tuning illustrate overall idea:

http://jsfiddle.net/lthgy/1282/

i changed following css rules:

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

essentially rotates sub-list within menu , translates (moves) sublist make position offset caused rotational transformation.

$(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 {    font-size: 11px;    text-decoration: none;    transform: translatey(-10px);  }  /* end of modified rules */    #menu {    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 there still cosmetic issues need addressed such letters appearing backwards -- @ least answer gives basic idea of how it..

hope helps.