这是我们在PC端浏览的效果
这是我们在手机上浏览的效果
完整代码：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> ul { padding: 0; margin: 0; } a { text-decoration-style: none; color: white; text-decoration: none; } li { list-style: none; } nav { text-align: center; background: #25383c; } .nav-list-item a{ color:white; display:block; padding:20px 40px; } .nav-list-item:hover> ul{ display:block; } .nav-submenu-list { display: none; } .menu-btn{ border:none; padding:8px 0; } .clearfix{ content:''; display:block; clear:both; } .btn-icon-close{ background:url("./images/cross.png") no-repeat center center; } .btn-icon-menu { background: url("./images/icon.png") no-repeat center center; } .menu-btn-icon{ border:none; width:30px; height:30px; background-size:cover; float:left; cursor:pointer; margin-left:10px; } .nav-submenu-list { background: gray; } @media all and (min-width:480px){ .nav-list-item{ display:inline-block; position:relative; } .nav-submenu-list{ display:none; position:absolute; left:0; top:100%; } .nav-container-list{ max-width:1280px; margin:0 auto; } .menu-btn{ display:none; } } </style> </head> <body> <nav> <div class="menu-btn"> <a href="javascript:void(0)" class="menu-btn-icon btn-icon-close"></a> <div class="clearfix"></div> </div> <ul class="nav-container-list"> <li class="nav-list-item"><a href="">首页</a></li> <li class="nav-list-item"><a href="">关于我</a></li> <li class="nav-list-item"> <a href="">开源项目</a> <ul class="nav-submenu-list"> <li class="nav-submenu-item"><a href="">subitem1</a></li> <li class="nav-submenu-item"><a href="">subitem1</a></li> <li class="nav-submenu-item"><a href="">subitem1</a></li> <li class="nav-submenu-item"><a href="">subitem1</a></li> </ul> </li> <li class="nav-list-item"><a href="">订阅</a></li> </ul> </nav> <script type="text/javascript"> var btn = document.querySelector('.menu-btn-icon'); var menu = document.querySelector('.nav-container-list'); var menuIsCollapse = false; btn.onclick = function () { menuIsCollapse = !menuIsCollapse; if (menuIsCollapse) { menu.style.display = 'none'; btn.classList.remove('btn-icon-close'); btn.classList.add('btn-icon-menu'); } else { menu.style.display = 'block'; btn.classList.remove('btn-icon-menu'); btn.classList.add('btn-icon-close'); } } </script> </body> </html> 代码摘抄自《高性能响应式web开发》
