Wordpress Admin-Like Menu

Can anyone provide me with a link to a tutorial or plugin, preferably in jQuery that will allow me to create a menu that not only collapses vertically (jQueryUI's Accordian), but also collapses ho开发者_StackOverflow中文版rizontally? No matter what I google, all I can find are the vertical ones, and the Wordpress one is super-integrated to its core, as far as I can tell.

EDIT: Here are some screenshots. The first is normal, the second is expanded / collapsed vertically, the third is collapsed horizontally.

Try jQuery UI i think thats what WP uses http://jqueryui.com/

You can use a plugin like Accordion or Collapsible Menu (a bit more wordpress like) for the vertical collapse, and then put that menu in a div that can collapse horizontally with a plugin like TabSlideOut. Or just change the width of the menu DIV with .animate().

Also notice how the wordpress removes the text from the menus but leaves the icons.

html

<div class="hide-menu">Hide Menu</div>
<ul id="menu">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li>
         <ul class="subs"><li><a href="">Subs</a></li></ul>
    </li>
</ul>

jQuery

$('.hide-menu').bind('click',function (){
    $('#menu').animate({width:30});//can always extend this.
    //u can use the if statement or toggle if u need toggling feature
});
$('#menu').children('li').bind('click',function (){
     //here u can hide the subs
})

now ofcourse the above is not going to work exactly like wordpress or may not work at all but you get the idea :) I hope

I will toggle a class, as you can see there is an arrow that toggles horizontaly. So, just add or remove class and with CSS make the effect done, like this:

$(mi-button).click(function(e){
     $(mi-menu-selector).toggleClass(your-class);
     e.preventDefault;

});

with Css show or hide the text of each li of your menu.

.hide-horizontal{
text-indent:-999em;
}

You need to use responsive design to achieve this.

You can use CSS media queries:

http://en.wikipedia.org/wiki/Responsive_Web_Design

http://mediaqueri.es/