PgwMenu - Responsive menu for jQuery

Download   Demo

PgwMenu - Responsive menu for jQuery / Zepto

• Full customization with the CSS file included


• Fully responsive navigation menu (desktop and mobile devices)


• SEO compliant


• Less than 2 KB (minified and gzipped)

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" type="text/css" href="pgwmenu.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="pgwmenu.js"></script>

2. HTML

<ul class="pgwMenu">
	<li><a href="mypage.php">Link 1</a></li>
	<li><a href="/myfolder">Link 2</a></li>
	<li><a href="http://pagawa.com" target="_blank">Link 3</a></li>
</ul>

Active element - To set the active element, you must add the “selected” CSS class to the link.

<li><a href="mypage.php" class="selected">Link 1</a></li>

3. JAVASCRIPT

$('.pgwMenu').pgwMenu();

4. OPTIONS

dropDownLabel - When the drop down link is displayed, you choose between a text and an icon.

$('.pgwMenu').pgwMenu(
 dropDownLabel: 'Menu'
);

You have multiple possibilities to set a text or an icon:

dropDownLabel: 'Menu' // This string replaces the default icon (see above the third / orange example)
OR
dropDownLabel: '<span class="icon"></span>' // Displays the white icon for the dark theme and black for the light theme
OR
dropDownLabel: '<span class="white"></span>' // Displays always the white menu icon
OR
dropDownLabel: '<span class="black"></span>' // Displays always the black menu icon

mainClassName - If you need to modify the default CSS class (“pgwMenu”), you must add the new class to the initialization.

Of course, if you modify this class, you also need to update the rules in the CSS file.

$('.pgwMenuCustom').pgwMenu(
	mainClassName: 'pgwMenuCustom'
);

5. MENU STYLE

Two menu themes are included in the CSS file.

Dark theme (default) - If the dark theme is your choice, you have nothing to do.

<ul class="pgwMenu">
[...]
</ul>

Light theme - If you want to choose the light theme, just add the CSS class: “light”

<ul class="pgwMenu light">
[...]
</ul>

Custom theme - To create a custom theme, you can modify and load the included CSS file “pgwmenu-custom.css” instead of “pgwmenu.css”.

PgwMenu - Responsive menu for jQuery