样品

Question

我需要使用HTML创建一个菜单树。我在Google上进行了搜索，但他们正在提供一些软件供下载以便创建。但我需要一些脚本和HTML标签才能做到这一点。任何人都可以帮我解决这个问题。提前谢谢。

Answer 1

这是一个非常简单的事情。

http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

修改

实施我从@sushil bharwani学到的东西。以下是我找到上述网址的方式，即@sushil bharwani的礼貌 http://www.google.co.in/search?q=Menu+Tree+using+UL+L&qscrl=1

Answer 2

您不需要使用JavaScript（除非您希望与过时的浏览器兼容），您可以单独使用HTML + CSS来实现。并且以更加语义正确的方式。：）

您可以使用HTMLDog中vertical dropdown menus文章中介绍的技巧制作horizontal menus或（更漂亮的示例）Sons of Suckerfish。简单而有意义。

样品

这是一个简单的例子。在其中，您可以看到悬停功能完美运行。

CSS并不好，因为它只是一个样本要处理样式，请禁用display: none;行：这样可以在不悬停时阻止子菜单隐藏，并且您可以设置样式的所有内容。
完成后，只需重新启用display: none;行即可隐藏子菜单，并仅在悬停时显示。

<强> 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

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: ", ";
}

这是一个jsfiddle：http://jsfiddle.net/x8dxv/

Answer 3

通过一些javascript和CSS知识，您可以将简单的UL LI列表转换为菜单树。如果您理解它，可以使用jQuery。

您可以使用UL Li按菜单树缩小Google搜索范围。或CSS将UL LI转换为树。

Answer 4

您可以使用JavaScript生成菜单 - 例如，查看插件jQuery - Menu tree。

Answer 5

导航菜单主要使用UL和LI的组合创建。

<UL id="Menu">
    <LI>Home</LI>
    <LI>Links</LI>
</UL>

您可以在LI元素中插入UL，从而获得用于导航的树结构。

Answer 6

如果你不想自己写一个，这是一个简单的方法..

http://www.mycssmenu.com/#css-menu-demo

Answer 7

您可能希望了解一些为您构建菜单的在线工具。例如。 CSS Menu Generator

Answer 8

我不确定您是否会找到答案，但这里有一个列表，其中包含几种不同类型的垂直菜单 http://css.maxdesign.com.au/listamatic2/index.htm 这些示例中没有涉及javascript

如何使用HTML创建菜单树

8 个答案:

修改

样品