这篇博客展示了如何使用HTML、CSS和JavaScript实现一个面包菜单，当屏幕尺寸小于400px时，菜单会收起。通过点击面包按钮，可以切换导航栏的显示状态。示例中使用了classList和toggle方法，以及媒体查询来实现响应式布局。
参考：相关教程 js中的classList、toggle用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html, body, div,span{
padding:0;
margin:0;
}
body{
position: relative;
}
#main{
height: 100%;
width: 100%;
background-color:burlywood;
}
h1, #header, #main_page{
/* width: 1200px;
height: 100%;
margin:auto; */
text-align: center;
}
#menuButton{
display: none;
}
#menuButton span{
display: block;
height: 5px;
width:40px;
border-bottom:4px solid #000;
}
.navBox{
height: 40px;
/* position: absolute; */
}
.menu-list{
display: inline-block;
line-height:40px;
margin: 0 10px;
}
.menu-list a:hover{
color:chocolate;
}
.main_box{
min-height: 1000px;
}
/* @media screen and (min-width: 800px){
body{
background-color:darkgray;
}
} */
/*视窗小于400px时，左上角的面包按钮样式*/
@media screen and (max-width: 400px){
#menuButton{
display:inline-block;
position:absolute;
top:0;
left:0;
cursor: pointer;
font-size: 0px;
}
/*导航栏收起隐藏样式*/
nav{
width: 200px;
height: 100%;
position: absolute;
min-height: 1000px;
background-color:rgb(185, 175, 146);
transform: translate(-300px, 0);/*将导航栏向左偏移300px，移除视窗的可视范围内，达到隐藏导航栏的目的*/
transition: transform 0.3s ease;/*指定transform的过渡效果为 0.3s的慢速开始，然后变快，然后慢速结束的过渡效果*/
}
nav.open{
-webkit-transform: translate(0, 0);/*将导航栏显示在视窗的可视范围内*/
transform: translate(0,0);
}
}
</style>
</head>
<body>
<div id='main'>
<h1>Canvas menu</h1>
<div id='header'>
<header>
<div id='menuButton'>
<span></span>
<span></span>
<span></span>
</div>
<nav id='navMenu'>
<div class='navBox'>
<div class='menu-list item1'>
<a href='#'>item1</a>
</div>
<div class='menu-list item2'>
<a href='#'>item2</a>
</div>
<div class='menu-list item3'>
<a href='#'>item3</a>
</div>
</div>
</nav>
</header>
</div>
<main id='main_page'>
<div class='main_box'>
<p>正文文本</p>
</div>
</main>
</div>
<script src='../js/jquery-3.3.1.min.js'></script>
<script>
var menu = document.getElementById('menuButton');
var navList = document.getElementById('navMenu');
console.log('click:')
/*给面包按钮添加事件监听：点击面包按钮时，修改侧边导航栏的class为open(显示侧边导航栏的css)*/
menu.addEventListener('click', function(e){
navList.classList.toggle('open');
e.stopPropagation();/*阻止事件传播*/
console.log('in click');
});
/*点击主界面时，自动收起侧边导航栏*/
$('#main_page').click(function(){
$('#navMenu').removeClass('open');
console.log('remove');
})
</script>
</body>
</html>
扫一扫
6571
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
