这是一款使用纯js和CSS3媒体查询制作的简单的响应式导航菜单效果。该导航菜单类似bootstrap导航菜单,它通过media query制作760像素断点,当视口小于760像素时,菜单会收缩为隐藏的汉堡包菜单。
使用方法
HTML结构
该导航菜单使用<nav>
元素最为包裹容器,div.menu_button_wrapper
是汉堡包图标,无序列表.menu_list
是菜单项。
<nav> <div id="menu_button_wrapper"> <div id="menu_button"> Menu <div id="hamburger"> <span></span> <span></span> <span></span> </div> </div> <div class="clearfix"></div> </div> <ul id="menu_list"> <li class="current_page"><a href="#">Home</a></li> <li><a href="#">Audio</a></li> <li><a href="#">Video</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contacts</a></li> </ul> </nav>
CSS样式
为导航菜单添加一些必要的CSS样式。
nav { font-family: Helvetica; text-align: right; text-transform: uppercase; background-color: #222; } nav ul { width: 90%; max-width: 1024px; margin: 0 auto; list-style-type: none; } nav ul li { display: inline-block; } nav ul li a { color: #9d9d9d; font-weight: bold; text-decoration: none; display: inline-block; padding: 1em; box-sizing: border-box; } nav ul li a:hover { color: white; } .current_page { background-color: black; } .current_page a { color: white; } #menu_button_wrapper { display: none; } .hidden { display: none; }
然后通过media query媒体查询制作760像素时的断点。
@media (max-width: 760px) { #menu_button_wrapper { display: block; padding: 1em; color: #9d9d9d; border-bottom: 1px solid #101010; -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.1); box-shadow: 0 1px 0 rgba(255,255,255,.1); margin-bottom: .5em; } #menu_button { box-sizing: border-box; float: right; padding: .5em 1em; border: 1px solid #333; border-radius: 5px; color: white; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #menu_button:hover { cursor: pointer; background-color: #333; } #hamburger { float: right; padding-top: .15em; } #menu_button span { display: block; background-color: #fff; width: 1.2em; height: .15em; border-radius: 1px; margin-bottom: .2em; } nav ul { width: 100%; margin: 0 auto; padding: 0; box-sizing: border-box; } nav ul li { display: block; } nav ul li a { width: 100%; } }
JavaScript
该导航菜单通过JavaScript代码来监听浏览器窗口的尺寸变化,为相应的菜单元素添加和移除相应的class类。
function addListener(element, type, callback) { if (element.addEventListener) { element.addEventListener(type, callback); } else if (element.attachEvent) { element.attachEvent('on' + type, callback); } } addListener(document, 'DOMContentLoaded', function () { var mq = window.matchMedia("(max-width: 760px)"); if (mq.matches) { document.getElementById("menu_list").classList.add("hidden"); } addListener(document.getElementById("menu_button"), 'click', function () { document.getElementById("menu_list").classList.toggle("hidden"); }); addListener(window, 'resize', function () { var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; if (width > 760) { document.getElementById("menu_list").classList.remove("hidden"); } else { document.getElementById("menu_list").classList.add("hidden"); } }); });
该导航菜单效果的github地址为:http://www.cssscript.com/mobile-friendly-responsive-menu-js-css3-media-queries/
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!