What files do I need for this jQuery UI Menus example?

Question

I'm trying to get this example working locally (so I can modify for my own use), but given the poor result I'm guessing that something significant is missing:

https://codepen.io/seungjaeryanlee/pen/YYoGbp

I assume it needs jQuery and jQuery UI files, and I've included those but it's not working at all. I just get a badly formed page with no sign of menu functionality.

The example works ok at the link above, but isn't clear what else I need.

Do I need to include something else?

My version follows (in 1 file for simplicity):

<html>
    <head>
        <style>
            #menubar {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
            }

            /* Make jQuery UI Menu into a horizontal menubar with vertical dropdown */
            #menubar > li { /* Menubar buttons */
                display: inline-block;
            }
            #menubar > li > ul > li { /* Menubar buttons inside dropdown */
                display: block;
            }

            /* Change dropdown carets to correct direction */
            #menubar > li > div > span.ui-icon-caret-1-e {
                /* Caret on menubar */
                background:url(https://www.drupal.org/files/issues/ui-icons-222222-256x240.png) no-repeat -64px -16px !important;
            }
            #menubar ul li div span.ui-icon-caret-1-e {
                /* Caret on dropdowns */
                background:url(https://www.drupal.org/files/issues/ui-icons-222222-256x240.png) no-repeat -32px -16px !important;
            }
        </style>
    
        <script type="text/javascript" src = "https://code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript" src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

        <script>
            $(document).ready(function() {
                $('#menubar').menu();
                
                $('#menubar').menu({
                    position: { my: 'left top', at: 'left bottom' },
                    blur: function() {
                    $(this).menu('option', 'position', { my: 'left top', at: 'left bottom' });
                    },
                    focus: function(e, ui) {
                    if ($('#menubar').get(0) !== $(ui).get(0).item.parent().get(0)) {
                        $(this).menu('option', 'position', { my: 'left top', at: 'right top' });
                    }
                    },
                });
            });
        </script>
    </head>

    <body>
        <ul id="menubar">
            <li><div>Alpha</div></li>
            <li>
                <div>Beta</div>
                <ul>
                <li><div>Beta 1</div></li>
                <li>
                    <div>Beta 2</div>
                    <ul>
                    <li><div>Beta 2a</div></li>
                    <li><div>Beta 2b</div></li>
                    </ul>
                </li>
                <li><div>Beta 3</div></li>
                </ul>
            </li>
            <li><div>Gamma</div></li>
            <li><div>Delta</div></li>
            </ul>
    </body>

</html>

If you're using jquery-ui then you'll also need the jquery-ui css. Missing these would manifest as a badly formed page with no sign of menu functionality (...) — freedomn-m, Jul 06 '23 at 17:05
In the codepen, on the css panel, click the settings cog wheel - it will show you "External Stylesheets" which, on your pen, includes https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css Note: 1.12.1 doesn't match your js of 1.10.4 - I recommend you keep them the same version — freedomn-m, Jul 06 '23 at 17:07
I would NOT be using `jquery-1.10.2.js` version these days since it has both speed and security enhancements in 3.x versions and you can remove the `type="text/javascript"` since all modern browsers default to that — Mark Schultheiss, Jul 06 '23 at 17:48

score 2 · Accepted Answer · answered Jul 06 '23 at 17:43

Appears to work as expected when you have all the CSS and JS files.

$(function() {
  $('#menubar').menu({
    position: {
      my: 'left top',
      at: 'left bottom'
    },
    blur: function() {
      $(this).menu('option', 'position', {
        my: 'left top',
        at: 'left bottom'
      });
    },
    focus: function(e, ui) {
      if ($('#menubar').get(0) !== $(ui).get(0).item.parent().get(0)) {
        $(this).menu('option', 'position', {
          my: 'left top',
          at: 'right top'
        });
      }
    },
  });
});

#menubar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

/* Make jQuery UI Menu into a horizontal menubar with vertical dropdown */

#menubar>li {
  /* Menubar buttons */
  display: inline-block;
}

#menubar>li>ul>li {
  /* Menubar buttons inside dropdown */
  display: block;
}


/* Change dropdown carets to correct direction */

#menubar>li>div>span.ui-icon-caret-1-e {
  /* Caret on menubar */
  background: url(https://www.drupal.org/files/issues/ui-icons-222222-256x240.png) no-repeat -64px -16px !important;
}

#menubar ul li div span.ui-icon-caret-1-e {
  /* Caret on dropdowns */
  background: url(https://www.drupal.org/files/issues/ui-icons-222222-256x240.png) no-repeat -32px -16px !important;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<ul id="menubar">
  <li>
    <div>Alpha</div>
  </li>
  <li>
    <div>Beta</div>
    <ul>
      <li>
        <div>Beta 1</div>
      </li>
      <li>
        <div>Beta 2</div>
        <ul>
          <li>
            <div>Beta 2a</div>
          </li>
          <li>
            <div>Beta 2b</div>
          </li>
        </ul>
      </li>
      <li>
        <div>Beta 3</div>
      </li>
    </ul>
  </li>
  <li>
    <div>Gamma</div>
  </li>
  <li>
    <div>Delta</div>
  </li>
</ul>

What files do I need for this jQuery UI Menus example?

1 Answers1