效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>menu菜单</title>
<style type="text/css" media="all">
#menu{
display: block;
box-sizing: content-box;
border-top: 20px #333 solid;
border-bottom: 20px #333 solid;
width: 100px;
height: 20px;
padding: 20px 0;
background-color: #333;
background-clip: content-box;
}
#close{
display: none;
position: relative;
width: 20px;
height: 100px;
margin-left: 40px;
background-color: #333;
transform: rotate(45deg);
}
#close:after{
content: '';
position: absolute;
width: 100px;
height: 20px;
top: 40px;
left: -40px;
background-color: #333;
}
</style>
</head>
<body>
<span id="menu" onclick="onMenu()"></span>
<span id="close" onclick="onClose()"></span>
<script>
function onMenu(){
var menu = document.getElementById('menu');
var close = document.getElementById('close');
menu.style.display = 'none';
close.style.display = 'block';
}
function onClose(){
var menu = document.getElementById('menu');
var close = document.getElementById('close');
menu.style.display = 'block';
close.style.display = 'none';
}
</script>
</body>
</html>
扫一扫
565
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
