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'); 
    } 
}