How to make jQuery UI nav menu horizontal?

by

I admire all these efforts to convert a menu to a menubar because I detest trying to hack CSS. It just feels like I’m meddling with powers I can’t possibly ever understand! I think it’s much easier to add the menubar files available at the menubar branch of jquery ui.

I downloaded the full jquery ui css bundled file from the jquery ui download site

In the head of my document I put the jquery ui css file that contains everything (I’m on version 1.9.x at the moment) followed by the specific CSS file for the menubar widget downloaded from the menubar branch of jquery ui

<link type="text/css" href="https://stackoverflow.com/questions/12944364/css/jquery-ui.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.ui.menubar.css" rel="stylesheet" />

Don’t forget the images folder with all the little icons used by jQuery UI needs to be in the same folder as the jquery-ui.css file.

Then at the end the body I have:

<script type="text/javascript" src="https://stackoverflow.com/questions/12944364/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.0.custom.min.js"></script>
<script type="text/javascript" src="js/menubar/jquery.ui.menubar.js"></script>

That’s a copy of an up-to-date version of jQuery, followed by a copy of the jQuery UI file, then the menubar module downloaded from the menubar branch of jquery ui

The menubar CSS file is refreshingly short:

.ui-menubar { list-style: none; margin: 0; padding-left: 0; }
.ui-menubar-item { float: left; }
.ui-menubar .ui-button { float: left; font-weight: normal; border-top-width: 0 !important; border-bottom-width: 0 !important; margin: 0; outline: none; }
.ui-menubar .ui-menubar-link { border-right: 1px dashed transparent; border-left: 1px dashed transparent; }
.ui-menubar .ui-menu { width: 200px; position: absolute; z-index: 9999; font-weight: normal; }

but the menubar JavaScript file is 328 lines – too long to quote here. With it, you can simply call menubar() like this example:

$("#menu").menubar({
    autoExpand: true,
    menuIcon: true,
    buttons: true,
    select: select
});

As I said, I admire all the attempts to hack the menu object to turn it into a horizontal bar, but I found all of them lacked some standard feature of a horizontal menu bar. I’m not sure why this widget is not bundled with jQuery UI yet, but presumably there are still some bugs to iron out. For instance, I tried it in IE 7 Quirks Mode and the positioning was strange, but it looks great in Firefox, Safari and IE 8+.

More Related Contents:

  1. MVC4 StyleBundle not resolving images
  2. CSS: bolding some text without changing its container’s size
  3. css framework for an app with existing stylesheet
  4. Can a CSS class inherit one or more other classes?
  5. Invert rounded corner in CSS?
  6. How to skew element but keep text normal (unskewed)
  7. Changing Background Image with CSS3 Animations
  8. Why does .foo a:link, .foo a:visited {} selector override a:hover, a:active {} selector in CSS?
  9. Can I target a :before or :after pseudo-element with a sibling combinator?
  10. Why does overflow: hidden have the unexpected side-effect of growing in height to contain floated elements?
  11. Meaning of numbers in “col-md-4″,” col-xs-1″, “col-lg-2” in Bootstrap
  12. Are unused CSS images downloaded?
  13. Background-image in keyframe does not display in Firefox or Internet Explorer
  14. @import vs link
  15. How can I ensure that text is inside rounded div?
  16. Font-size issues comparing chrome and Firefox
  17. Google Drive CSS/JS Returns 404 Error
  18. Is it possible to use a CSS wildcard in the middle of an attribute selector?
  19. How to display 3 items per row in flexbox?
  20. Dynamic styleUrls in angular 2?
  21. SASS indented syntax on multiple lines?
  22. Applying “page-break-before” to a table row (tr)
  23. Placeholder Mixin SCSS/CSS
  24. How do I apply a CSS class to Html.ActionLink in ASP.NET MVC?
  25. Setting different lengths for grid gaps in CSS Grid
  26. What is the difference between p:nth-child(2) and p:nth-of-type(2)?
  27. How do I make card-columns order horizontally?
  28. Disable CSS animation on pseudo element inherited from parent
  29. Why does enabling hardware-acceleration in CSS3 slow down performance?
  30. SASS CSS: Target Parent Class from Child

Leave a Comment