Javascript 如何使用 HTML 创建菜单树
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2989829/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a menu tree using HTML
提问by Priyanka
I need to create a menu tree using HTML. I had a search on Google, but they are providing some software to download in order to create this. But I need some script and HTML tags to do this. Can anyone help me solve this problem. Thanks in advance.
我需要使用 HTML 创建一个菜单树。我在谷歌上搜索过，但他们提供了一些软件来下载以创建这个。但我需要一些脚本和 HTML 标签来做到这一点。谁能帮我解决这个问题。提前致谢。
采纳答案by IsmailS
Here is something very simple to start with.
这里有一些非常简单的开始。
http://www.dynamicdrive.com/dynamicindex1/navigate1.htm
http://www.dynamicdrive.com/dynamicindex1/navigate1.htm
EDIT
编辑
Implementing what I learned from @sushil bharwani. Here is how I found the above URL i.e. at the courtesy of @sushil bharwani http://www.google.co.in/search?q=Menu+Tree+using+UL+L&qscrl=1
实施我从@sushil bharwani 学到的东西。这是我找到上述 URL 的方式，即@sushil bharwani http://www.google.co.in/search?q=Menu+Tree+using+UL+L&qscrl=1
回答by ANeves
You don'tneed to use JavaScript (unless you want compatibility with outdated browsers), you can achieve it with HTML+CSS alone. And in a much more semantically-correct way. :)
你并不需要使用JavaScript（除非你想使用过时的浏览器的兼容性），可以单独使用HTML + CSS实现它。并且以一种更加语义正确的方式。:)
You can make vertical dropdown menusor (prettier example) horizontal menususing the techniques explained in the Sons of Suckerfisharticle at HTMLDog.
Simple and meaningful.
您可以使用HTMLDog 上的 Suckerfish文章中介绍的技术制作垂直下拉菜单或（更漂亮的示例）水平菜单。
简单而有意义。
Sample
样本
Here is a simple example. In it you can see the hover functionality working perfectly.
这是一个简单的例子。在其中，您可以看到悬停功能完美运行。
The CSS is not good, because it's only a sample.
To work on the style, disable the display: none;line: that will stop the submenus from hiding when not hovered, and you can work on styling everything.
When you are done, simply re-enable the display: none;line to get the submenus to hide and only show on hover.
CSS 不好，因为它只是一个示例。
要处理样式，请禁用该display: none;行：这将阻止子菜单在未悬停时隐藏，您可以处理所有内容。
完成后，只需重新启用该display: none;行即可隐藏子菜单并仅在悬停时显示。
HTML
HTML
<nav>
<p>Collapsing:</p>
<ul class="collapsable">
<li>a<ul>
<li>a1
<li>a2
</ul>
<li>b<ul>
<li>b1
</ul>
</ul>
<p>Not collapsing:</p>
<ul>
<li>a<ul>
<li>a1
<li>a2
</ul>
<li>b<ul>
<li>b1
</ul>
</ul>
</nav>
CSS
CSS
nav li:hover {
background: #EEEEEE;
}
nav li>ul {
display: inline-block;
margin: 0;
padding: 0;
}
nav .collapsable li>ul {
display: none;
}
nav li>ul::before {
content: ": { ";
}
nav li>ul::after {
content: " } ";
}
nav li:hover>ul {
display: inline-block;
}
nav li>ul>li {
display: inline-block;
}
nav li>ul>li+li::before {
content: ", ";
}
Here is a jsfiddle: http://jsfiddle.net/x8dxv/
这是一个 jsfiddle：http: //jsfiddle.net/x8dxv/
回答by sushil bharwani
With a bit of javascript and a knowledge around CSS you can convert a simple UL LI list to a menu tree. its right that you can use jQuery if you understand it.
借助一些 javascript 和 CSS 知识，您可以将简单的 UL LI 列表转换为菜单树。如果你理解它，你可以使用 jQuery 是正确的。
You can narrow your google search by Menu Tree using UL Li. or CSS to convert UL LI to tree.
您可以使用 UL Li 通过菜单树缩小您的谷歌搜索范围。或 CSS 将 UL LI 转换为树。
回答by Kangkan
Navigation menus are mostly created using a combination of UL and LI.
导航菜单主要是使用 UL 和 LI 的组合创建的。
<UL id="Menu">
<LI>Home</LI>
<LI>Links</LI>
</UL>
And you can insert UL inside LI element and thus get a tree structure for navigation.
您可以在 LI 元素中插入 UL，从而获得用于导航的树结构。
回答by Mantisimo
Here is a simply way to do it if you don't want to write one yourself..
如果你不想自己写一个，这里有一个简单的方法。
回答by Justin Ethier
You could use JavaScript to generate the menu - for example, have a look at the plugin jQuery - Menu tree.
您可以使用 JavaScript 生成菜单 - 例如，查看插件 jQuery - Menu tree。
回答by Gert Grenander
You might want to look into some of the online tools that builds the menu for you. E.g. CSS Menu Generator
您可能想查看一些为您构建菜单的在线工具。例如CSS 菜单生成器
回答by Wai Wong
I am not sure if you will find your answer, but here is a list with several different types of vertical menus http://css.maxdesign.com.au/listamatic2/index.htmno javascript is involved in those examples
我不确定您是否会找到答案，但这里有一个列表，其中包含几种不同类型的垂直菜单 http://css.maxdesign.com.au/listamatic2/index.htm这些示例中不涉及 javascript
