Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery UI Menubar not working
    primarykey
    data
    text
    <p>I got the code from <a href="http://view.jqueryui.com/menubar/demos/index.html#menubar|default" rel="nofollow noreferrer">here</a> and the related files from <a href="http://view.jqueryui.com/menubar/" rel="nofollow noreferrer">here</a>. I just changed the paths and kept only one menubar, its not working for me. Here is what I can see: <img src="https://i.stack.imgur.com/977E0.png" alt="enter image description here"></p> <p>Here is my code:</p> <p>In the HTML Head:</p> <pre><code>&lt;link rel="stylesheet" href="Rules/navbar/jquery.ui.all.css" /&gt; &lt;script src="jquery-1.7.1.js"&gt;&lt;/script&gt; &lt;script src="Rules/navbar/jquery.ui.core.js"&gt;&lt;/script&gt; &lt;script src="Rules/navbar/jquery.ui.widget.js"&gt;&lt;/script&gt; &lt;script src="Rules/navbar/jquery.ui.position.js"&gt;&lt;/script&gt; &lt;script src="Rules/navbar/jquery.ui.button.js"&gt;&lt;/script&gt; &lt;script src="Rules/navbar/jquery.ui.menu.js"&gt;&lt;/script&gt; &lt;script src="Rules/navbar/jquery.ui.menubar.js"&gt;&lt;/script&gt; &lt;script&gt; $(function() { function select(event, ui) { $("&lt;div/&gt;").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" }); }); &lt;/script&gt; &lt;style&gt; #bar1, #bar2 { margin: 0 0 4em; } &lt;/style&gt; </code></pre> <p>In the HTML body:</p> <pre><code>&lt;div class="demo"&gt; &lt;ul id="bar2" class="menubar-icons"&gt; &lt;li&gt; &lt;a href="#File"&gt;File&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#Open..."&gt;Open...&lt;/a&gt;&lt;/li&gt; &lt;li class="ui-state-disabled"&gt;Open recent...&lt;/li&gt; &lt;li&gt;&lt;a href="#Save"&gt;Save&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#Save as..."&gt;Save as...&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#Close"&gt;Close&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#Quit"&gt;Quit&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#Edit"&gt;Edit&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#Copy"&gt;Copy&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#Cut"&gt;Cut&lt;/a&gt;&lt;/li&gt; &lt;li class="ui-state-disabled"&gt;Paste&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#View"&gt;View&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#Fullscreen"&gt;Fullscreen&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#Fit into view"&gt;Fit into view&lt;/a&gt;&lt;/li&gt; &lt;li&gt; &lt;a href="#Encoding"&gt;Encoding&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#Auto-detect"&gt;Auto-detect&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#UTF-8"&gt;UTF-8&lt;/a&gt;&lt;/li&gt; &lt;li&gt; &lt;a href="#UTF-16"&gt;UTF-16&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#Option 1"&gt;Option 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#Option 2"&gt;Option 2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#Option 3"&gt;Option 3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#Option 4"&gt;Option 4&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#Customize..."&gt;Customize...&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload