JQueryUI – Showing New Menu Widget Horizontally

Showing JQuery menu Horizontally through CSS

I was trying the menu widget from JQuery UI. It looks good with lot of ability. But as usual i had to tweak it a little bit. You can check this at http://jqueryui.com/menu/#navigationmenu

Problem:

The menu on the demo site appears to be Vertical aligned – it grows vertically, and i would like it to be horizontal.

Like

Menu 1 – Menu 2 – Menu 3

Instead of

Menu 1

Menu 2

Menu 3

Solution:

So, for doing with minimal changes here is what you need to do, just define following css classes:

#menu li { display:inline-block; width: auto; }

#menu li.sub { display:block; width: auto;}

Where menu is the ul element for menu, and li (the sub menus, the second level) are marked with “sub” class. Here is the HTML markup for the reference.

display:inline-block; will render the li as inline – so they will appear in the same line side by side.

for Sub menu under each li you need to set them as “block”, so they appear vertically.

<ul id=”menu“>

<li><a href=”?Aberdeen”>Admin</a></li>

<li>

<a href=”?Ada”>Themes</a>

<ul>

<li class=”sub”><a href=”?Ada”>Default</a></li>

<li class=”sub”><a href=”?Saarland”>Test 2</a></li>

<li class=”sub”><a href=”?Salzburg”>Test 3</a></li>

</ul>

</li>

<li><a href=”?Adamsville”>Support</a></li>

<li><a href=”?Addyston”>Release Notes</a></li>

<li><a href=”?Addyston”>My Details</a></li>

</ul>

Hopefully, it will help people out.

UPDATED: http://jsbin.com/afepiz/31/edit (JSBIN)

Enjoy,

Thanks,

Riz