html5演示6种不同的响应式图标菜单

收藏

本文演示了6种不同的手机菜单效果，用手机浏览器查看，效果会更好。

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

查看演示

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

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

导航菜单html代码 包括图标和标题

<nav id="menu" class="nav">					
    <ul>
        <li>
            <a href="http://www.erdangjiade.com/">
                <span class="icon">
                    <i aria-hidden="true" class="icon-home"></i>
                </span>
                <span>首页</span>
            </a>
        </li>
        <li>
            <a href="http://www.erdangjiade.com/js">
                <span class="icon"> 
                    <i aria-hidden="true" class="icon-services"></i>
                </span>
                <span>服务</span>
            </a>
        </li>
        <li>
            <a href="http://www.erdangjiade.com/templates">
                <span class="icon">
                    <i aria-hidden="true" class="icon-portfolio"></i>
                </span>
                <span>文件夹</span>
            </a>
        </li>
        <li>
            <a href="http://www.erdangjiade.com/php">
                <span class="icon">
                    <i aria-hidden="true" class="icon-blog"></i>
                </span>
                <span>博客</span>
            </a>
        </li>
        <li>
            <a href="http://www.erdangjiade.com/help/template">
                <span class="icon">
                    <i aria-hidden="true" class="icon-team"></i>
                </span>
                <span>团队</span>
            </a>
        </li>
        <li>
            <a href="http://www.erdangjiade.com/tools">
                <span class="icon">
                    <i aria-hidden="true" class="icon-contact"></i>
                </span>
                <span>联系我们</span>
            </a>
        </li>
    </ul>
</nav>

//  The function to change the class
var changeClass = function(r, className1, className2) {
    var regex = new RegExp("(?:^|\\s+)" + className1 + "(?:\\s+|$)");
    if (regex.test(r.className)) {
        r.className = r.className.replace(regex, ' ' + className2 + ' ');
    }
    else {
        r.className = r.className.replace(new RegExp("(?:^|\\s+)" + className2 + "(?:\\s+|$)"), ' ' + className1 + ' ');
    }
    return r.className;
};

//  Creating our button in JS for smaller screens
var menuElements = document.getElementById('menu');
menuElements.insertAdjacentHTML('afterBegin', '<button type="button" id="menutoggle" class="navtoogle" aria-hidden="true"><i aria-hidden="true" class="icon-menu"> </i> Menu</button>');

//  Toggle the class on click to show / hide the menu
document.getElementById('menutoggle').onclick = function() {
    changeClass(this, 'navtoogle active', 'navtoogle');
}

// http://tympanus.net/erdangjiade/2013/05/08/responsive-retina-ready-menu/comment-page-2/#comment-438918
document.onclick = function(e) {
    var mobileButton = document.getElementById('menutoggle'),
            buttonStyle = mobileButton.currentStyle ? mobileButton.currentStyle.display : getComputedStyle(mobileButton, null).display;

    if (buttonStyle === 'block' && e.target !== mobileButton && new RegExp(' ' + 'active' + ' ').test(' ' + mobileButton.className + ' ')) {
        changeClass(mobileButton, 'navtoogle active', 'navtoogle');
    }
}