如何創建圖標菜單？

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>