Based on the jquery Adaptive window size navigation menu. This is a responsive navigation menu effect that supports mobile navigation menu code. As follows:
Online preview Source Download
The implemented code.
HTML code:
<H1>Jquery/zepto Responsive Menu Pgwmenu Demo</H1> <Pclass= "Dowebok-explain">Please zoom out/Enlarge browser window width to see the effect</P> <H2>Dark Style (default)</H2> <ulclass= "Pgwmenu"> <Li><aclass= "Selected"href= "http://sc.chinaz.com/">Home</a></Li> <Li><ahref= "http://sc.chinaz.com/">Code</a></Li> <Li><ahref= "http://sc.chinaz.com/">Material</a></Li> <Li><ahref= "http://sc.chinaz.com/">Template</a></Li> <Li><ahref= "javascript:">About</a></Li> <Li><ahref= "javascript:">Service</a></Li> <Li><ahref= "http://sc.chinaz.com/">Contact</a></Li> </ul> <H2>Light Style (default)</H2> <ulclass= "Pgwmenu Light"> <Li><aclass= "Selected"href= "http://sc.chinaz.com/">Home</a></Li> <Li><ahref= "http://sc.chinaz.com/">Code</a></Li> <Li><ahref= "http://sc.chinaz.com/">Material</a></Li> <Li><ahref= "http://sc.chinaz.com/">Template</a></Li> <Li><ahref= "javascript:">About</a></Li> <Li><ahref= "javascript:">Service</a></Li> <Li><ahref= "http://sc.chinaz.com/">Contact</a></Li> </ul> <H2>Custom styles</H2> <ulclass= "Pgwmenucustom"> <Li><aclass= "Selected"href= "http://sc.chinaz.com/">Home</a></Li> <Li><ahref= "http://sc.chinaz.com/">Code</a></Li> <Li><ahref= "http://sc.chinaz.com/">Material</a></Li> <Li><ahref= "http://sc.chinaz.com/">Template</a></Li> <Li><ahref= "javascript:">About</a></Li> <Li><ahref= "javascript:">Service</a></Li> <Li><ahref= "http://sc.chinaz.com/">Contact</a></Li> </ul>
JS Code:
$ (function () { $ ('. Pgwmenu '). Pgwmenu ({ ' menu ', ' more <span class= ') Icon "></span>" }); $ ('. Pgwmenucustom '). Pgwmenu ({ ' pgwmenucustom ', ' menu ', ' more <span class= "icon" ></span> "}") ;
via:http://www.w2bc.com/article/59868
Based on the jquery Adaptive window size navigation menu