Designs for an HTML5 Cheeseburger navigation interface

Question

Designs for an HTML5 Cheeseburger navigation interface

I've been struggling to implement a functional and visually appealing hamburger menu on my website. The challenge lies in integrating the menu seamlessly into the page rather than having it just pop up abruptly.

Despite trying various webkit tools, I can't seem to achieve the desired animation effect with the bar elements only triggering once.

Menu.style.display = "none";

function ShowHide(x) {
  x.classList.toggle("change");
  var Menu = document.getElementById("Menu");
  if (Menu.style.display === "none") {
    Menu.style.display = "block";
  } else {
    Menu.style.display = "none";
  }
}

.container {
  display: inline-block;
  cursor: pointer;
}

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

.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);
}


}
body {
  background-color: rgb(209, 224, 224);
}
.Menu {
  width: 150px;
  background-color: rgb(208, 208, 225);
  display: none
}

<div class="container" onclick="ShowHide(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

<div id="Menu" style="width: 150px; background-color: rgb(208, 208, 225); display: none;">
  <h2><a href="Homepage.html">Homepage</a></h2>
  <br>
  <h2><a href="Subpage1.html">Subpage 1</a></h2>
  <br>
  <h2><a href="Subpage2.html">Subpage 2</a></h2>
  <br>
  <h2><a href="Subpage3.html">Subpage 3</a></h2>
  <br>
  <h2><a href="Subpage4.html">Subpage 4</a></h2>
  <br>
  <h2><a href="Subpage5.html">Subpage 5</a></h2>
  <br>

</div>

javascript html css webkit

Answer 1

Answer №1

To ensure a smooth menu transition alongside the menu icon, you can integrate the following code snippet into your ShowHide() function. By introducing a new .menu-hidden class, you can easily toggle it without relying on conditional statements:

HTML:

<div id="Menu" class="menu-hidden">

JS:

function ShowHide(x) {
  x.classList.toggle("change");
  var Menu = document.getElementById("Menu");
  Menu.classList.toggle("menu-hidden");
}

If you wish for the menu to smoothly slide onto the page instead of simply being hidden with display: none, you can achieve this effect by initially translating it off the page using the below CSS rule:

.menu-hidden {
  transform: translateX(-999px);
}

Lastly, let's enhance your CSS code with a smooth transition (also ensuring that your selector is corrected from the .Menu class to the #Menu ID and moving the style from inline HTML to CSS):

#Menu{
  width: 150px;
  background-color: rgb(208, 208, 225);
  transition: 0.4s;
}

Moreover, for better separation between your JS and HTML, consider employing an event listener instead of the onclick attribute as shown below (though this step is optional):

var x = document.querySelector(".container");

x.addEventListener("click", ShowHide);

function ShowHide() {
  this.classList.toggle("change");
  var Menu = document.getElementById("Menu");
  Menu.classList.toggle("menu-hidden");
}

Below is the complete code:

var x = document.querySelector(".container");

x.addEventListener("click", ShowHide);

function ShowHide() {
  this.classList.toggle("change");
  var Menu = document.getElementById("Menu");
  Menu.classList.toggle("menu-hidden");
}

.container {
  display: inline-block;
  cursor: pointer;
}

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

.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);
}
 
body {
  background-color: rgb(209, 224, 224);
}

#Menu{
  width: 150px; background-color: rgb(208, 208, 225);
  transition: 0.4s;
}

.menu-hidden {
  transform: translateX(-999px);
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="IST101.css">
    <script src="hamburger.js" defer></script>
    <title>Web design test</title>

</head>
<body>
    <div class="container">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

<div id="Menu" class="menu-hidden">
  <h2><a href="Homepage.html">Homepage</a></h2>
  <br>
  <h2><a href="Subpage1.html">Subpage 1</a></h2>
  <br>
  <h2><a href="Subpage2.html">Subpage 2</a></h2>
  <br>
  <h2><a href="Subpage3.html">Subpage 3</a></h2>
  <br>
  <h2><a href="Subpage4.html">Subpage 4</a></h2>
  <br>
  <h2><a href="Subpage5.html">Subpage 5</a></h2>
  <br>  

</div>
</body>
</html>

Answer 2

To ensure a smooth menu transition alongside the menu icon, you can integrate the following code snippet into your ShowHide() function. By introducing a new .menu-hidden class, you can easily toggle it without relying on conditional statements:

HTML:

<div id="Menu" class="menu-hidden">

JS:

function ShowHide(x) {
  x.classList.toggle("change");
  var Menu = document.getElementById("Menu");
  Menu.classList.toggle("menu-hidden");
}

If you wish for the menu to smoothly slide onto the page instead of simply being hidden with display: none, you can achieve this effect by initially translating it off the page using the below CSS rule:

.menu-hidden {
  transform: translateX(-999px);
}

Lastly, let's enhance your CSS code with a smooth transition (also ensuring that your selector is corrected from the .Menu class to the #Menu ID and moving the style from inline HTML to CSS):

#Menu{
  width: 150px;
  background-color: rgb(208, 208, 225);
  transition: 0.4s;
}

Moreover, for better separation between your JS and HTML, consider employing an event listener instead of the onclick attribute as shown below (though this step is optional):

var x = document.querySelector(".container");

x.addEventListener("click", ShowHide);

function ShowHide() {
  this.classList.toggle("change");
  var Menu = document.getElementById("Menu");
  Menu.classList.toggle("menu-hidden");
}

Below is the complete code:

var x = document.querySelector(".container");

x.addEventListener("click", ShowHide);

function ShowHide() {
  this.classList.toggle("change");
  var Menu = document.getElementById("Menu");
  Menu.classList.toggle("menu-hidden");
}

.container {
  display: inline-block;
  cursor: pointer;
}

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

.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);
}
 
body {
  background-color: rgb(209, 224, 224);
}

#Menu{
  width: 150px; background-color: rgb(208, 208, 225);
  transition: 0.4s;
}

.menu-hidden {
  transform: translateX(-999px);
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="IST101.css">
    <script src="hamburger.js" defer></script>
    <title>Web design test</title>

</head>
<body>
    <div class="container">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

<div id="Menu" class="menu-hidden">
  <h2><a href="Homepage.html">Homepage</a></h2>
  <br>
  <h2><a href="Subpage1.html">Subpage 1</a></h2>
  <br>
  <h2><a href="Subpage2.html">Subpage 2</a></h2>
  <br>
  <h2><a href="Subpage3.html">Subpage 3</a></h2>
  <br>
  <h2><a href="Subpage4.html">Subpage 4</a></h2>
  <br>
  <h2><a href="Subpage5.html">Subpage 5</a></h2>
  <br>  

</div>
</body>
</html>

Designs for an HTML5 Cheeseburger navigation interface

Answer №1

Similar questions

Error message: Unable to access properties of null when calling 'registerPlugin' in @devexpress/dx-react-grid-material-ui

Protractor: Moving further down the page

Automatic switching between Bootstrap 5 tab panes at precise time intervals

Tips for isolating data on the current page:

Basic Inquiry: Unhandled TypeError - Unable to access the property 'length' of an object that is not defined

Tab buttons that switch between different sections with just a click

JavaScript overlay that does not interact with HTML elements directly

Tips for decreasing Vuetify Grid column width on larger screens

Manipulating SVG image color using JavaScript

Creating an object property conditionally in a single line: A quick guide

Updating the state of a nested array using React Hooks

JavaScript Loading Screen - Issues with window.onload functionality

Unexpectedly, the NodeJS application experiences a crash following numerous requests

Space left vacant following an unordered list item

Having Trouble with Form Submission Button Across Different Web Browsers

A simple demo showcasing interactive HTML pages using Django and AJAX

Having trouble with textures when using THREE.TextureLoader instead of the outdated THREE.ImageUtils.loadTexture?

Encountering Unmet Dependency Issue When Running 'npm install' on Laravel in Windows 8

Tips for Integrating a Facebook Shop Page into Your Website

A JSON object received from an AJAX request is either null or empty