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
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.
Latest posts by Diane Ensey (see all)
- Tables That You Can Sort and Search - May 24, 2017
- Responsive Newspaper-Style Columns are Easy with CSS - May 23, 2017
- Use Tooltips to Add Context - May 22, 2017