jQuery仿google手机左侧弹出菜单

分享一个仿google手机版左侧弹出层插件,你可以自定义导航菜单按钮，提示里面的图标由google官网提供的字体font。当鼠标移动到按钮看看，然后再点击看看导航样式有什么变化。

淘建站为您提供更多_导航菜单_图标导航_导航菜单_左侧菜单，在此特别感谢您对我们的支持与厚爱！

左侧菜单HTML代码：

<ul id="gn-menu" class="gn-menu-main">
    <li class="gn-trigger">
        <a class="gn-icon gn-icon-menu"><span>Menu</span></a>
        <nav class="gn-menu-wrapper">
            <div class="gn-scroller">
                <ul class="gn-menu">
                    <li class="gn-search-item">
                        <input placeholder="搜索" type="search" class="gn-search">
                        <a class="gn-icon gn-icon-search"><span>搜索</span></a>
                    </li>
                    <li>
                        <a class="gn-icon gn-icon-download">下载</a>
                        <ul class="gn-submenu">
                            <li><a class="gn-icon gn-icon-illustrator" href="http://www.sucaiq.com/templates">网站模板</a></li>
                            <li><a class="gn-icon gn-icon-photoshop" href="http://www.sucaiq.com/js">jQuery特效</a></li>
                        </ul>
                    </li>
                    <li><a class="gn-icon gn-icon-cog">设置</a></li>
                    <li><a class="gn-icon gn-icon-help">帮助</a></li>
                    <li>
                        <a class="gn-icon gn-icon-archive">归档</a>
                        <ul class="gn-submenu">
                            <li><a class="gn-icon gn-icon-article">文章</a></li>
                            <li><a class="gn-icon gn-icon-pictures">图片</a></li>
                            <li><a class="gn-icon gn-icon-videos">视频</a></li>
                        </ul>
                    </li>
                </ul>
            </div><
        </nav>
    </li>
    <li></li>
</ul>

引入菜单插件

<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
<script src="js/classie.js"></script>
<script src="js/gnmenu.js"></script>

实例化导航菜单

new gnMenu(document.getElementById('gn-menu'));