Example of jQuery response menu plug-in PgwMenu

jquery Response Menu Plugin Pgwmenu

Pgwmenu is a lightweight jquery response menu that fully responds to navigation menus (desktop and mobile devices), CSS custom skins, SEO menu optimizations.
How to use:

<link rel= "stylesheet" type= "Text/css" href= "Pgwmenu.min.css"/>
<script type= "Text/javascript" src= "Jquery.min.js" ></script>
<script type= "Text/javascript" src= "Pgwmenu.min.js" ></script>

HTML section

<ul class= "Pgwmenu" >
<li><a href= "Http://www.111cn.net" > Home </a></li>
<li><a href= "Http://www.111cn.net/category/works" > Personal works </a></li>
<li><a href= "Http://www.111cn.net/category/front" > Front-End development </a></li>
<li><a href= "Http://www.111cn.net/category/notes" > Learning notes </a></li>
<li><a href= "Http://www.111cn.net/category/book" > Thoughts </a></li>
<li><a href= "Http://www.111cn.net/theme" > Station theme </a></li>
<li><a href= "Http://www.111cn.net/about" > About me </a></li>
</ul>

JS Call

<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ('. Pgwmenu '). Pgwmenu ();
});
</script>

Example, CSS3 and HTML5 implementation Response navigation menu

Html

The example has an HTML structure for the navigation menu, Element <nav> is used to locate the navigation menu,. Current represents the currently active navigation item.

The code is as follows:

<ul>
<li class= "Current" ><a href= "#" > Home </a></li>
<li><a href= "#" > Customer service </a></li>
<li><a href= "#" > Product show </a></li>
<li><a href= "#" > Classic case </a></li>
<li><a href= "#" > Contact Us </a></li>
</ul>
Css
First we have to position the menu nav, we use Display:inline-block instead of float:left in. Nav Li, so we can use Text-align to set the left-right alignment of the Nav menu.


The code is as follows:

. Nav {
position:relative;
margin:20px 0;
}
. Nav UL {
margin:0;
padding:0;
}
. Nav Li {
margin:0 5px 10px 0;
padding:0;
List-style:none;
Display:inline-block;
}
. Nav a {
PADDING:3PX 12px;
Text-decoration:none;
Color: #999;
line-height:100%;
}
. Nav a:hover {
Color: #d0d0d0;
}
. Nav. Current a {
Background: #999;
Color: #fff;
border-radius:5px;
}
Right-align and center-align menus using text-align.

* Right NAV * *
. nav.right UL {
Text-align:right;
}

/* Center NAV * *
. nav.center UL {
Text-align:center;
}
Next, we'll do the response design, and we'll use CSS3 's media query to implement it. When the browser window width is less than 600px, we set the <nav> to relative relative positioning, set <ul> to absolute absolute positioning, and display:none hide all Li elements, This time the navigation menu becomes a fixed size button. When the mouse slides to the nav element, the menu pulls out, sets all Li's style display:block, see the code specifically:


The code is as follows:

@media screen and (max-width:600px) {
. Nav {
position:relative;
min-height:40px;
}
. Nav UL {
width:180px;
padding:5px 0;
Position:absolute;
top:0;
left:0;
Border:solid 1px #aaa;
Background: #fff URL (images/menu.png) no-repeat 10px 11px;
border-radius:5px;
box-shadow:0 1px 2px Rgba (0,0,0,.3);
}
. Nav Li {
Display:none; /* Hide All items */
margin:0;
}
. Nav. Current {
Display:block; * Show Only CurrentItem * *
}
. Nav a {
Display:block;
padding:5px 5px 5px 32px;
Text-align:left;
}
. Nav. Current a {
Background:none;
Color: #666;
}

/* On NAV hover * *
. Nav Ul:hover {
Background-image:none;
}
. Nav Ul:hover Li {
Display:block;
margin:0 0 5px;
}
. Nav Ul:hover. Current {
Background:url (images/check.png) no-repeat 10px 7px;
}

* Right NAV * *
. nav.right UL {
Left:auto;
right:0;
}

/* Center NAV * *
. nav.center UL {
left:50%;
Margin-left: -90px;
}
}