我需要一个菜单出现时，单击我的菜单按钮.我将这是一个OnClick函数或CSS代码?这是Python与Flask的网页.

我开始设计一个网站与Python &瓶。

我有一个菜单栏在页面的中心，当点击变成一个十字。在开放我想要一个菜单列表出现

我应该在代码的CSS或JS部分输入代码?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
display: inline-block;
cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
position: relative;
left: 650px;
top: 50px;
}

.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
opacity: 0;
}

.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
</style>
</head>
<body>
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<script>
function myFunction(x) {
x.classList.toggle("change");
}
</script>
</body>
</html>

您可以在html中尝试下面的操作来切换菜单。也改进了一些CSS。

如果想要菜单居中，可以使用带有class= "wantToCenter"的容器，否则可以删除它

根据需要进行装饰。我在这里展示的只是demo

function myFunction(x) {
var y = document.querySelector(".menu")
x.classList.toggle("change");
y.classList.toggle("menuChange");
}

.wantToCenter {
display: flex;
justify-content: center;
}
.container {
display: inline-block;
cursor: pointer;
/*left: 0px;*/
margin-top: 50px;
/*top: 50px;*/
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
position: relative;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
.menu {
display: none
}
.menuChange {
display: block
}

<div class="wantToCenter">
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="menu">
<div class="menuItems">Home</div>
<div class="menuItems">Service</div>
<div class="menuItems">Work</div>
</div>
</div>
</div>

相关内容

最新更新

热门标签：