适配Retina屏效果略吊的JQuery响应式导航菜单

我今天为大家介绍一个色彩鲜艳的响应式菜单，并且适配 Retina屏幕。本js特效有三种根据浏览器窗口的大小而进行改变的布局，两列为一行的块状布局版本和带有菜单链接的手机版本并且能够隐藏在导航栏里。另外，为了能让此JQuery菜单适配 retina 屏幕，我们将采用icon 文字来替换图片以免出现在自适应的时候出现图片失真的情况。主要js代码 // 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',' Menu'); // Toggle the class on click to show / hide the menu document.getElementById('menutoggle').onclick = function() { changeClass(this, 'navtoogle active', 'navtoogle'); } 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'); } }

在线演示        积分下载        6毛下载        砍两刀下载