jQuery仿google手机左侧弹出菜单

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

分类：导航菜单 > 图标导航难易：中级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

左侧菜单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.sucaihuo.com/templates">网站模板</a></li>
                            <li><a class="gn-icon gn-icon-photoshop" href="http://www.sucaihuo.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'));