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
Latest posts by Diane Ensey (see all)

Submit a Comment