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

 

Такая навигация станет отличным дополнением для дизайнера который хочет визуально улучшить свой сайт при этом добавив новые, интересные возможности. И так, давайте приступим.

Шаг 1. HTML

У нас будет список, который будет содержать по очередности подключенные пункты class=»menu» будет содержать в себе всю навигацию,  class=»menu-item» нам необходим для отображения блока с навигационными пунктами:

Для каждого пункта у нас будет установлена соответствующая иконка, это позволит обеспечить лучший вид и читаемость навигационной панели.

Создаем контекстное меню для сайта на JS

Шаг 2. CSS

Теперь разберемся со стилям, их у нас не так уж и много, так как основную работу будет выполнять JS, кроме этого нам необходимо установить общие параметры:

Шаг 3. JS

Нам необходимо перехватывать команду при нажатии на правую кнопку мыши, и отображать свое содержание, кроме этого нам необходимо добавить дополнительные параметры отображения:

В результате таких несложных действий мы получаем достойную замену стандартному контекстному меню. Который может отображать дополнительные материалы.

Вот и все. Готово!

Читайте также: