Как создать иконку меню? - PullRequest
Новая
       6

Как создать иконку меню?

0 голосов
/ 07 июня 2018

У меня есть эта проблема:

Стандартная команда, которую я использую, чтобы поставить значок: 

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

Но в этом коде просто есть место для 1 ссылки (я не нашел другойпримеры), но мне нужно перенаправить на несколько вариантов.Т.е. я хочу знать, возможно ли создать «меню» из иконки, что-то вроде этого: когда я нажимаю на иконку, они показывают все опции для человека, как стандартное меню

Like this

Если уместно, значки находятся на одном столе.

Ответы [ 2 ]

0 голосов
/ 07 июня 2018

Да, он включает в себя больше 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>
0 голосов
/ 07 июня 2018

Как правило, человек не «создает меню из значка», вы обычно создаете меню и значок для него.Ваша «стандартная команда» - это обычная HTML-ссылка с некоторыми пользовательскими атрибутами, которые затем обрабатываются каким-либо пакетом, запущенным в вашей среде, для создания меню.Но без дополнительной информации о вашем окружении невозможно дать точный и удовлетворительный ответ.

...