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

8 thoughts on “JQueryUI – Showing New Menu Widget Horizontally

    • @4th Recess

      I needed this functionality as well. Here are the changes I had to make:

      – Open your jquery-ui.js file
      – Find the ‘$.widget( “ui.menu”, {‘ code block
      – Edit the options -> position block as follows (you can play around with the settings at http://jqueryui.com/position/ to get your desired effect):

      position: {
      my: “left bottom”,
      at: “left top”
      },

      – I changed the direction of the caret on the parent menu item as well to point down (ui-icon-carat-1-s) instead of right (ui-icon-carat-1-e):

      icons: {
      submenu: “ui-icon-carat-1-s”
      },

      @Rizwan

      Thanks for this posting! It saved me a lot of time!

  1. I simply could not depart your website prior to
    suggesting that I really loved the usual info an individual supply to your visitors?
    Is going to be again frequently to check up on new posts

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.