如何创建图标菜单？

Question

I have this problem:

The standard command that I use to put an icon is:

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

But this code just have space for 1 link (I did not found other examples), but I need to redirect for multiple chooses. Ie What I want to know is if it is possible to create a ``menu" from an icon, something like that: When I click on the icon they show all the options for the person, like an standard menu

If is relevant, the icons are on one table.

Answer 1

In general, one does not "create a menu from an icon", you normally create a menu and an icon to it. Your "standard command" is an ordinary HTML-Link with some custom attributes that are then processed by some package running in your environment to create a menu. But without more info about your environment, it is impossible to give an accurate and satisfying answer.

Answer 2

Yes, it involves more HTML for the menu, CSS to show 2 states: hidden and showing, and JavaScript for the click event handling.

"(I did not found other examples)"

I'm going to assume that is true considering your grasp of English. Before you say it "doesn't work" , you must post the code that you are working with: HTML, CSS, and JavaScript/jQuery. Please keep it to a minimum and we'll request more or less as your question progresses.

Demo

 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>