Многоуровневое выпадающее меню

Всего пару строк на js позволят создать многоуровневое выпадающее меню для вашего сайта.

HTML

Шапка будет состоять из главного списка, представляющего из себя меню. Части которого будут содержать вложенные ul списки.

 

CSS

В CSS стилизуем шапку, главное меню и позиционируем вложенные списки при помощи position: absolute, не забыв назначить родительскому блоку position: relative (это позволит указывать положение top, left и т.д. относительно этого блока).

 

JS

Воспользуемся методами mouseover (мышь навелась на что-либо) и mouseout(мышь ушла). При наведении, с помощью метода find() , будем искать ближайший соседний список ‘ul’. Если такой есть, то ему присваивается свойство display: block. Когда мышь «уходит» с блока, то прячем этот список — display: none.

 

 

See the Pen Многоуровневое меню by webgrind (@webgrind) on CodePen.

Возможно, вам будет интересно:
x