如何创建图标菜单？

Question

我有这个问题：

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

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

但是这段代码只有1个链接空间（我没有找到其他例子），但我需要重定向多个选择。即我想知道的是，是否可以从图标创建一个“菜单”，如下所示： 当我点击图标时，它们会显示该人的所有选项，例如标准菜单

如果相关，则图标位于一个表格中。

Answer 1

一般情况下，人们不会通过图标创建菜单，通常会创建菜单和图标。您的标准命令＆＃34;是一个普通的HTML-Link，带有一些自定义属性，然后由您环境中运行的某个包处理以创建菜单。但是如果没有关于您的环境的更多信息，就无法给出准确和令人满意的答案。

Answer 2

是的，它涉及更多用于菜单的HTML，CSS用于显示2个状态：隐藏和显示，以及用于点击事件处理的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>