PgwMenu - Responsive menu for jQuery / Zepto

Download

Current version: 2.0

To download or fork this project, please visit our GitHub repository

And of course, you will need Jquery or Zepto to use this responsive navigation menu plugin.

Example

Live example

To test our adaptive menu, you can resize your browser and watch the menu on the top of this page (under the PgwJS logo).

Static example

Dark menu (preset style)

With a large enough size :

If the container is not large enough :

(Click on the icon to display links)

Light menu (preset style)

With a large enough size :

If the container is not large enough :

(Click on the icon to display links)

Custom menu style

With a large enough size :

If the container is not large enough :

(Click on the text to display links)

Documentation

Navigation links

To create a menu, just add a <ul> tag with a <li> tag for each link inside. For example:

<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>

Plugin activation

To activate the plugin, add the following JavaScript code in your page:

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

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'
});

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".

jquery / zepto responsive slider - jquery / zepto responsive menu - jquery / zepto responsive modal / dialog - jquery / zepto cookie plugin