jQuery UI Menubar not working

Question

I got the code from here and the related files from here. I just changed the paths and kept only one menubar, its not working for me. Here is what I can see:

Here is my code:

In the HTML Head:

<link rel="stylesheet" href="Rules/navbar/jquery.ui.all.css" />
<script src="jquery-1.7.1.js"></script>
<script src="Rules/navbar/jquery.ui.core.js"></script>
<script src="Rules/navbar/jquery.ui.widget.js"></script>
<script src="Rules/navbar/jquery.ui.position.js"></script>
<script src="Rules/navbar/jquery.ui.button.js"></script>
<script src="Rules/navbar/jquery.ui.menu.js"></script>
<script src="Rules/navbar/jquery.ui.menubar.js"></script>
<script>
$(function() {
    function select(event, ui) {
        $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
        if (ui.item.text() == 'Quit') {
            $(this).menubar('destroy');
        }
    }
    $("#bar1").menubar({
        position: {
            within: $("#demo-frame").add(window).first()
        },
        select: select
    });

    $(".menubar-icons").menubar({
        autoExpand: true,
        menuIcon: true,
        buttons: true,
        position: {
            within: $("#demo-frame").add(window).first()
        },
        select: select
    });

    $("#bar3").menubar({
        position: {
            within: $("#demo-frame").add(window).first()
        },
        select: select,
        items: ".menubarItem",
        menuElement: ".menuElement"
    });
});
</script>
<style>
    #bar1, #bar2 { margin: 0 0 4em; }
</style>

In the HTML body:

<div class="demo">

<ul id="bar2" class="menubar-icons">
    <li>
        <a href="#File">File</a>
        <ul>
            <li><a href="#Open...">Open...</a></li>
            <li class="ui-state-disabled">Open recent...</li>
            <li><a href="#Save">Save</a></li>
            <li><a href="#Save as...">Save as...</a></li>
            <li><a href="#Close">Close</a></li>
            <li><a href="#Quit">Quit</a></li>
        </ul>
    </li>
    <li>
        <a href="#Edit">Edit</a>
        <ul>
            <li><a href="#Copy">Copy</a></li>
            <li><a href="#Cut">Cut</a></li>
            <li class="ui-state-disabled">Paste</li>
        </ul>
    </li>
    <li>
        <a href="#View">View</a>
        <ul>
            <li><a href="#Fullscreen">Fullscreen</a></li>
            <li><a href="#Fit into view">Fit into view</a></li>
            <li>
                <a href="#Encoding">Encoding</a>
                <ul>
                    <li><a href="#Auto-detect">Auto-detect</a></li>
                    <li><a href="#UTF-8">UTF-8</a></li>
                    <li>
                      <a href="#UTF-16">UTF-16</a>
                      <ul>
                         <li><a href="#Option 1">Option 1</a></li>
                         <li><a href="#Option 2">Option 2</a></li>
                         <li><a href="#Option 3">Option 3</a></li>
                         <li><a href="#Option 4">Option 4</a></li>
                      </ul>
                   </li>
                </ul>
            </li>
            <li><a href="#Customize...">Customize...</a></li>
        </ul>
    </li>
</ul>

</div>

Answer 1

Got your code working here: http://jsfiddle.net/cavmj/

Used your supplied javascript and HTML. So I would guess it's some of the files that aren't being loaded correctly.

Make sure it loads:

<script src="Rules/navbar/jquery.ui.menu.js"></script>
<script src="Rules/navbar/jquery.ui.menubar.js"></script>

And that the CSS file can import:

jquery.ui.menu.css
jquery.ui.menubar.css

Maybe try linking direct:

<link rel="stylesheet" href=http://code.jquery.com/ui/1.8.19/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://view.jqueryui.com/menubar/themes/base/jquery.ui.menu.css">
<link rel="stylesheet" href="http://view.jqueryui.com/menubar/themes/base/jquery.ui.menubar.css">

If this is not the problem try checking for console errors.

If you have firefox with firebug, Chrome or IE9 (or above): Press F12 and choose Console

There it will say if it encountered any JavaScript errors on load.

---

Checked your link. You are missing the jquery ui, menu, and menubar scripts. Try adding the following:

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://view.jqueryui.com/menubar/ui/jquery.ui.menu.js" type="text/javascript"></script>
<script src="http://view.jqueryui.com/menubar/ui/jquery.ui.menubar.js" type="text/javascript"></script>

And you are missing a quote on the jquery ui CSS file it should be

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.19/themes/base/jquery-ui.css">

Answer 2

All is working from jsfiddle.net because all the css and js are refering to the original site and the internal links also do the same.

If you want to make it work localy try to replace all the js and css references one by one to your local files, then you will see what css or js or images files are missing.

I had the same problem and after this steps, now all is fine, working without external references.