如何创建图标菜单？

Question

我有这个问题：

我用来放置图标的标准命令是：

<a href="" class="icon fa-file-code-o"></a>

但是这段代码只为1个链接留出空间（我没有找到其他示例），但是我需要重定向进行多项选择。 即我想知道的是是否有可能通过图标创建``菜单''，如下所示：当我单击图标时，它们会显示该人的所有选项，例如标准菜单

如果相关，则图标在一张桌子上。

Answer 1

通常，不会“从图标创建菜单”，而是通常会创建一个菜单和一个图标。 您的“标准命令”是具有一些自定义属性的普通HTML链接，然后由您的环境中运行的某些程序包对其进行处理以创建菜单。 但是，如果没有有关您的环境的更多信息，就不可能给出准确而令人满意的答案。

Answer 2

是的，菜单包含更多HTML，CSS显示2种状态：隐藏和显示，以及Click事件处理的JavaScript。

“（我没有找到其他例子）”

考虑到您对英语的掌握，我认为这是真的。 在说“不起作用”之前 ，必须发布正在使用的代码：HTML，CSS和JavaScript / jQuery。 请保持在最低限度，随着您的问题的进行，我们会或多或少地要求您。

演示版

 document.querySelector('.fa').onclick = openClose; function openClose(e) { if (e.target.tagName === "A") { e.target.classList.toggle('on'); } else { return false; } } 

 .menu { margin: 0; padding:0; list-style: none; max-height: 0; position: relative; overflow: hidden; transition: .5s ease; background: rgba(0,0,0,0.7); width: fit-content; } .on + .menu { max-height: 500px; position: absolute; transition: .5s ease; } .menu a { color:#FC3; text-decoration:none } .menu li { padding: 5px; } 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <a href="#/" class="fa fa-file-code-o fa-3x"></a> <ul class='menu'> <li><a href='https://stackoverflow.com/questions/tagged/html'>HTML</a></li> <li><a href='https://stackoverflow.com/questions/tagged/css'>CSS</a></li> <li><a href='https://stackoverflow.com/questions/tagged/javascript'>JavaScript</a></li> </ul>