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'
OR
dropDownLabel: '<span class="icon"></span>'
OR
dropDownLabel: '<span class="white"></span>'
OR
dropDownLabel: '<span class="black"></span>'
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".