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
Question
I am starting out designing a website with 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?
<,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 answers
solution1
0 2021-09-27 19:10:23
You can try something like below in html to toggle as menu. Also improved some CSS .
Use the container with
class= "wantToCenter"if want to center the menu else you can remove it
Use decoration according to need. I have shown here is demo only
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
New to html,css, and javascript. I am having trouble passing variables to my javascript function from a drop down menu onclick
I am needing a paypal button to replace a submit button. Right now i have both and it is weird
I need a handleDelete filter function for a react onclick button. i can write the code for an array of objects but this is an object of objects
Button code is run when I CREATE the button. Why?
I want to fix clicking menu button problems
I have a textbox which I would like to allow my users to switch to a grid when they click a button. Is this possible in asp.net?
How can I create a menu that will appear from the corner of the screen when a menu button is clicked?
When I click on the menu button It is not opening the menu
How would I pass a JavaScript parameter into my python code in flask?
I am trying to stop my function from displaying the same object twice when clicking a button
Related Tags