英文:
What files do I need for this jQuery UI Menus example?
问题
以下是您提供的内容的翻译部分：
我试图在本地使此示例工作（以便我可以修改以适应自己的需求），但鉴于糟糕的结果，我猜测缺少重要的东西：
https://codepen.io/seungjaeryanlee/pen/YYoGbp
我假设它需要jQuery和jQuery UI文件，我已经包含了它们，但它根本不起作用。我只得到了一个格式不正确的页面，没有菜单功能的迹象。
示例在上面的链接上正常工作，但不清楚我是否需要其他东西。
我需要包含其他东西吗？
我的版本如下（为了简单起见，放在一个文件中）：
以上为翻译好的部分，不包括代码部分。
英文:
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>
答案1
得分: 2
以下是您要翻译的内容：
Appears to work as expected when you have all the CSS and JS files.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(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'
});
}
},
});
});
<!-- language: lang-css -->
#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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
英文:
Appears to work as expected when you have all the CSS and JS files.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(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'
});
}
},
});
});
<!-- language: lang-css -->
#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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论