How can I toggle menu onclick

Question

I'm new to JS and coding in general and just don't know how to do what I want it to do; Firstly my code (I still have to clean up my code a bit :P )

  .header { position: relative; height: 100vh; width: 100vw; } .hero-image { position: relative; background: url("../img/background-image.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center; width: 100vw; height: 100vh; } .hero-text { text-align: center; color: black; } .hero-text button { border: none; outline: 0; display: inline-block; padding: 10px 25px; color: black; background-color: #ddd; text-align: center; cursor: pointer; } .hero-text button:hover { background-color: #555; color: white; } /* MENU */ .header__menu { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000; z-index: -1; } .hero-text { width: 100vw; height: 100vh; } .hero-menu_toggle { justify-content: center; } .hero-menu_scroll { justify-content: center; } .header__menu.is-expanded { z-index: 99; } .beige { background-color: #ffd39b; } .pink { background-color: #d0b2e4; } .yellow { background-color: #FFDE03; } .blue { background-color: #00B8D4; } .green { background-color: #1DE9B6; } .black { background-color: #414141; }

  <header class="header"> <div class="hero-image"> <div class="hero-text"> <button onclick="toggleMenu" class="hero-menu_toggle" id="hero-menu-toggle">Menu</button> <h1> Berlin From Below </h1> <button class="hero-menu_scroll" id="hero-menu-scroll"> see more </button> </div> </div> <div class="header__menu"> <nav class="nav"> <ul class="menu-list"> <li class="pink menu-list_item"> <a href="gallery.html">Gallery</a> </li> <li class="yellow menu-list_item"> <a href="people-of-berlin.html">People Of Berlin</a> </li> <li class="blue menu-list_item"> <a href="contact.html">Contact</a> </li> <li class="green menu-list_item"> <a href="news.html">News</a> </li> </ul> </nav> </div> </header>

Here's what I want to do; When the user comes to the site all he sees is a background-image and two buttons (Menu & See More).

If the user clicks on the menu button I want my menu to pop up and cover the entire screen, ideally with a transition effect where the colors gradually fill the screen

I hope it's understandable what I want it to do.

Answer 1

You can see examples of different menu styles on the W3Schools site here .

See the attached snippet from W3Schools:

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family: "Lato", sans-serif; } .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } .sidenav a:hover { color: #f1f1f1; } .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } </style> </head> <body> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> <h2>Animated Sidenav Example</h2> <p>Click on the element below to open the side navigation menu.</p> <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span> <script> function openNav() { document.getElementById("mySidenav").style.width = "250px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; } </script> </body> </html>

How can I toggle menu onclick

Question

1 answers

solution1
1 2018-08-13 10:31:22

How can I toggle menu onclick

Question

1 answers

solution1 1 2018-08-13 10:31:22

solution1
1 2018-08-13 10:31:22