Контекстное меню это тот элемент на сайте о котором разработчики зачастую забывают, сегодня мы бы хотели исправить это, и показать как можно стилизовать контекстное меню при помощи небольшого плагина jQuery и СSS3. Вы можете указать в произвольном контекстном меню небольшую навигацию, или добавить рекламу. Благодаря плагину jQuery мы получим простое и стильное контекстного меню вместо контекстного меню браузера по умолчанию. Плагин отлично подходит для контекстных меню, выпадающих списков, навигации по сайту и многое другое.

 

Также его легко настроить и установить на сайт, что не может не привлечь внимание разработчика, а легкость плагина не повлияет на скорость загрузки сайта.

Шаг 1. HTML

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

У нас будет неупорядоченный список, где мы указали необходимые нам ссылки.

Шаг 2. СSS

Cтили контекстного меню будут достаточно простые, если вы немного понимаете, то сами убедитесь в этом:

Шаг 3. JS

После того как вы подключили плагин к станице нам осталось его активировать и указать параметры, вот такие функции у нас будут:

Данный скрипт будет включать контекстное меню на всей странице, вы можете легко настроить его под свои нужды.

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