Make jQuery Menu Widget Horizontal

by | Nov 12, 2012 | Inspiration | 0 comments

I was excited to see the menu widget added to jQuery, but it defaults to a vertical list.  After playing around with it and doing some research, I found this fix to make the menu horizontal:

1
2
3
4
5
6
7
8
9
10
11

<ul id="nav">
<li><a href="#">Item #1</a>
<ul>
<li><a href="#">Sub#1</a></li>
<li><a href="#">Sub#2</a></li>
</ul>
<li><a href="#">Item #2</a></li>
<li><a href="#">Item #3</a></li>
<li><a href="#">Item #4</a></li>
<li><a href="#">Item #5</a></li>
</ul>
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

.ui-menu .ui-menu-item {
margin:10px;
padding: 0;
zoom: 1;
float: left;

clear: none;
width: auto;
}
#nav li { width: auto; clear: none; }

.ui-menu .ui-menu-item a{
padding: 2px .2em;
}

Thanks to coderevision.com for the above.

However, submenus still hang out to the right of the menu item.

Changing this is easy using jQuery UI positioning:

1

$('#nav').menu({ position: { my: "center bottom"} });

 

 

 

The post Make jQuery Menu Widget Horizontal appeared first on Sophrosyne Life.

Follow me

Diane Ensey

Programming Diva and CEO at Beyond Paper
For more than 10 years I've been making websites work for clients world-wide using WordPress, Google Maps, forms and custom applications. You can see my work portfolio and case studies at Beyond Paper.
Follow me

Latest posts by Diane Ensey (see all)

Submit a Comment