Styling Context Menu

Provided Themes

Three themes are provided in the PopMenu distribution:

Writing Custom Stylesheet

If the provided CSS files aren't enough to match your website theme, it is possible to create your own stylesheet. The quickest way to do this is by importing the default CSS file by calling @import url('jquery.popmenu.css'); on the beginning of your CSS file. The following code is a sample CSS file from the Dark theme.

HTML Structure

The HTML structure of the context menu is listed below.

<div class="PopMenu">
	<ul class="PopMenu-Menu PopMenu-TopMenu">
		<li class="PopMenu-Item">
			<a class="PopMenu-Link" data-key="a" data-name="add">
				<u>A</u>dd
			</a>
			<span class="PopMenu-Icon" style="background-image: none;" data-icon="add"></span>
		</li>
		<li class="PopMenu-Item disabled">
			<a class="PopMenu-Link" data-key="r" data-name="remove">
				<u>R</u>emove
			</a>
			<span class="PopMenu-Icon" style="background-image: none;" data-icon="remove"></span>
		</li>
		<li class="PopMenu-Separator">
			<a class="PopMenu-Link" data-name="separator"></a>
		</li>
		<li class="PopMenu-Item">
			<a class="PopMenu-Link" data-key="h" data-name="home">
				Visit <u>H</u>omepage
			</a>
			<span class="PopMenu-Icon" style="background-image: url("../img/home.png");"></span>
		</li>
	</ul>
</div>

Classes

To make customizations easier, each element is assigned specific classes. All classes are prefixed with "PopMenu-" to avoid conflicts with other CSS files.