Make jQuery Menu Widget Horizontal

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

Submit a Comment