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

Advertisement

Updating JQuery 1.4+ (or older) to 1.7+ (“attr” replacement)

We were trying to update the Jquery from 1.4 to 1.7 to get new functions in and also to get better working with JQuery UI and with jqGrid.

Suddenly we hit a ROAD BLOCK! the Jquery decided to change the behaviour of method to soemthign different. We used attr function extensively in our app, so replacing it in 3000 location and than verifying it would mean lot of typos and QA effort. They changed it to prop !

So we just simply wrote and override to attr! and extended jQuery…

jQuery.fn.attr = function(a, b) {
if (a == null && a == undefined
&& b == null && b == undefined) {
return ;
}
if (a != null && b != null)
return $(this).prop(a, b);
if (a != null && (b == null || typeof (b) == “undefined”))
return $(this).prop(a);
}

copy this into your code and enjoy beauty of it…