单击我的菜单按钮时，我需要出现一个菜单。 这是 OnClick function 还是 CSS 代码？ 这是Python和Flask网页
[英]I am needing a menu to appear when clicking my menu button. I Would this be an OnClick function or CSS code? This is for Python with Flask webpage
问题描述
I am starting out designing a website with Python & Flask.
我开始设计一个带有 Python 和 Flask 的网站。
I have a menu bar in the centre of the page, which when click turns to a cross.我在页面中央有一个菜单栏，单击它时会变成一个十字。 Upon opening I want a menu list to appear.打开后，我希望出现一个菜单列表。
Do I enter the code in the CSS or the JS section of code?是输入代码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>
1 个解决方案
解决方案1
0 2021-09-27 19:10:23
You can try something like below in html to toggle as menu.您可以在html中尝试类似下面的内容来切换为菜单。 Also improved some CSS .还改进了一些CSS 。
Use the container with
class= "wantToCenter"if want to center the menu else you can remove itclass= "wantToCenter"的容器，否则您可以将其删除
Use decoration according to need.
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.