Make jQuery Menu Widget Horizontal

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.

Diane Ensey
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.
Diane Ensey
Follow me

Latest posts by Diane Ensey (see all)

Submit a Comment