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 horizontally? 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.

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 horizontally? 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.

• javascript
• jquery
• css
• wordpress
• menu

Share Improve this question Follow edited Mar 4, 2011 at 16:50 Josh asked Mar 4, 2011 at 16:23 JoshJosh 12.6k1212 gold badges7676 silver badges118118 bronze badges 7

• Sorry, what is it you are asking? You want a menu that collapses vertically and horizontally??? So confused, is there an example? – Barrie Reader Commented Mar 4, 2011 at 16:35
• I think he means. the menu links to collapse vertically, and the whole menu itself slideLeft? but this could be anyones guess lol :) – Val Commented Mar 4, 2011 at 16:44
• @Neurofluxation: Added screenshots for clarity :) – Josh Commented Mar 4, 2011 at 16:51
• @Val: Added screenshots for clarity :) – Josh Commented Mar 4, 2011 at 16:51
• @josh there are a number of ways u can do this – Val Commented Mar 4, 2011 at 16:55

 |  Show 2 more ments

5 Answers 5

Sorted by: Reset to default 2

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

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/wiki/Responsive_Web_Design

http://mediaqueri.es/