Как создать выпадающее меню средствами js?

@x-man · Регистрация: 24.05.2012

есть менюшка: Пунк1 Пункт2 Пункт3 Как сделать так что бы при наведении мыши например на пункт 2 выпадали подпункты?

Например вот для такого кода:

HTML5

<ul class="menu">
   <li class="menu-item">
      <a href="#">Пункт меню 1</a>
      <ul class="sub-menu">
         <li>
            <a href="#">Подпункт меню 1</a>
         </li>
         <li>
            <a href="#">Подпункт меню 2</a>
         </li>
      <li>
            <a href="#">Подпункт меню 3</a>
         </li>>
      </ul>
   </li>
   <li class="menu-item">
      <a href="#">Пункт меню 2</a>
      <ul class="sub-menu">
         <li>
            <a href="#">Подпункт меню 1</a>
         </li>
         <li>
            <a href="#">Подпункт меню 2</a>
         </li>
      </ul>
   </li>
</ul>

ну понятно что сначала все скрыто

HTML5

1	.sub-menu {height: 0; overflow: hidden; opacity: 0; transition: all 0.5s ease-in;}

Так вот вопрос как рациональным и практичным способом все реализовать?

@gogolik · 27.02.2020, 14:39

А обязательно js или можно голым css воспользоваться? Это ж проще на css сделать.

@x-man · 27.02.2020, 14:54 **[ТС]**

Ежу понятно что на css быстрее, я умею на нем делать. Мне бы хотелось так сказать помоднее

И если меню огромное, там же разметки будет ого го...

@gogolik · 27.02.2020, 15:04

Не по теме:

x-man, сейчас помоднее и есть без использования js. :D

@x-man · 27.02.2020, 15:30 **[ТС]**

@gogolik Модератор 1455 / 964 / 462 Регистрация: 13.03.2010 Сообщений: 3,546
	27.02.2020, 14:39	2
	А обязательно js или можно голым css воспользоваться? Это ж проще на css сделать. 0

@x-man 0 / 0 / 0 Регистрация: 24.05.2012 Сообщений: 9
	27.02.2020, 14:54 [ТС]	3
	Ежу понятно что на css быстрее, я умею на нем делать. Мне бы хотелось так сказать помоднее И если меню огромное, там же разметки будет ого го... 0

@gogolik
	27.02.2020, 15:04 #4
	Не по теме: x-man, сейчас помоднее и есть без использования js. :D 0

@x-man 0 / 0 / 0 Регистрация: 24.05.2012 Сообщений: 9
	27.02.2020, 15:30 [ТС]	5
	0

Опции темы