左侧菜单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="https://jy.tp.yuanmeng.life/templates">网站模板</a></li>
                            <li><a class="gn-icon gn-icon-photoshop" href="https://jy.tp.yuanmeng.life/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'));