js和CSS3媒体查询制作简单的响应式导航菜单
这是一款使用纯js和css3媒体查询制作的简单的响应式导航菜单效果。该导航菜单类似bootstrap导航菜单,它通过media query制作760像素断点,当视口小于760像素时,菜单会收缩为隐藏的汉堡包菜单。
使用方法
HTML结构
该导航菜单使用<nav>
元素最为包裹容器,div.menu_button_wrapper
是汉堡包图标,无序列表.menu_list
是菜单项。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | < 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样式。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | 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像素时的断点。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | @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类。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | 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" ); } }); }); |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步