jQuery仿google手机左侧弹出菜单

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

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