Dynamic burger menu navigation

I am in the process of designing a full-page navigation overlay for my website to ensure consistency across all devices. Currently, I have two buttons - one to display the overlay and another to hide it. I am considering whether it would be more effective to have a single button that is always visible for better animation possibilities. I am aiming to achieve an animated effect similar to the squeeze animation demonstrated here. However, I am uncertain about how to animate this transition using only one button compared to having two separate buttons or even creating the animation from scratch.

This is the code I am working with;

const navButtons = document.querySelectorAll('button.nav-action');
const siteNav = document.querySelector('.site-nav');

function onClick(event) {
  siteNav.classList.toggle('active');
}

navButtons.forEach(button => button.addEventListener('click', onClick));
[CSS CODE HERE]
[HTML CODE HERE]

Currently, the overlay appears based on the button clicked, but I am unsure if having a single button is the most efficient approach or if placing the icon outside of the button would be more effective.

My ultimate goal is to animate the hamburger icon as the overlay is revealed from the top, but I need to first determine the best strategy for handling the button. Any guidance on this matter would be greatly appreciated as I am feeling quite lost at the moment.

Thank you in advance.

javascripthtmlcssnavigation

Answer №1

To create the desired effect, you can utilize the menu icon on your website and customize the line labels as needed. The code snippets provided showcase two different animations - one for toggling a site navigation menu and another for an interactive menu icon. Both codes are available for you to implement based on your preference.

const navButtons = document.querySelectorAll('button.nav-action');
const siteNav = document.querySelector('.site-nav');

function onClick(event) {
  siteNav.classList.toggle('active');
}

navButtons.forEach(button => button.addEventListener('click', onClick));


const menuIcon = document.querySelector(".menu-icon");
menuIcon.addEventListener("click", () => {
  menuIcon.classList.toggle("toggle")
  siteNav.classList.toggle('active');
})
.site-header {
  /* CSS styles for site header */
}

/* Additional CSS styles for site elements */

@media only screen and (max-width: 500px) {
  /* Responsive styling for smaller screens */
} 

/* CSS styles for mobile menu icon */
.menu-icon {
  /* Styling for menu icon */
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

</head>

<body>

  <div class="site-header">
    <div class="site-logo-container">
      <img class="site-logo" src="https://via.placeholder.com/1000x300" alt="Logo">
    </div>
    <div class="site-nav-action-container">
      <div class="menu-icon"></div>
    </div>
    <div class="site-nav">
      <div class="site-nav-content">
        <div class="site-nav-pages">
          <p>Page 1</p>
          <p>Page 2</p>
          <p>Page 3</p>
          <p>Page 4</p>
          <p>Page 5</p>
        </div>
      </div>
    </div>

</body>

</html>

const navButtons = document.querySelectorAll('button.nav-action');
const siteNav = document.querySelector('.site-nav');

function onClick(event) {
  siteNav.classList.toggle('active');
}

navButtons.forEach(button => button.addEventListener('click', onClick));

let icon = document.getElementById("nav-icon");
icon.addEventListener("click", () => {
  icon.classList.toggle("open")
  siteNav.classList.toggle('active');

})
.site-header {
  /* Same CSS styles as previous snippet */
}

   /* Additional CSS styles for mobile nav icon */
<div class="site-header">
  <div class="site-logo-container">
    <img class="site-logo" src="https://via.placeholder.com/1000x300" alt="Logo">
  </div>
  <div class="site-nav-action-container">
    <div id="nav-icon">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
  <div class="site-nav">
    <div class="site-nav-content">
      <div class="site-nav-pages">
        <p>Page 1</p>
        <p>Page 2</p>
        <p>Page 3</p>
        <p>Page 4</p>
        <p>Page 5</p>
      </div>
    </div>
  </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the color of error messages in shiny from red

Currently, I am in the process of developing a Shiny app that includes numerous plots. Whenever I adjust any input parameters, there is a brief moment where the plots do not display before they are rendered, accompanied by a prominently displayed red error ...

cssrshiny

The API request is experiencing delays due to the large dataset of 250,000 records

Utilizing API calls to retrieve data for the frontend is essential, but with a database table containing 250,000 rows, efficiency becomes a concern. In my .NET Core application, I implement the following query: IQueryable<Message> query = context.Me ...

javascriptsql.net-coreentity-framework-6

Get ready for some Angular validation appearing on the screen

Using AngularJS, I have set up routes and validations on the HTML page. Here is a snippet of my HTML code: <form ng-controller="validateCtrl" name="loginForm" novalidate> <p>UserName:<br> <input type="text" name=" ...

htmlangularjsvalidation

Save a JSON object from a URL into a JavaScript variable using jQuery

I am trying to figure out how to use the .getJSON() function to store a JSON object as a JavaScript variable. Can someone guide me through this process? var js = $.getJSON(url, function(data) {...} ); Is it necessary to include the function(data) { ...

javascriptjqueryjson

Resolving Problem of Jumping When 'invalid-feedback' Appeared in Bootstrap 4 Input

There is an input with an add-on and a customized focus that includes a '%' at the end of the field, which is working fine. However, there is a small issue where the error message causes the input to jump when clicked in or out. To see the issue ...

htmlcssbootstrap-4

Utilizing the SFTP handler within the SSH2 library

As I work with SSH2 to interact with a server through SFTP, I find myself confused by the documentation. The part that perplexes me is related to understanding and utilizing the sftp object which is obtained by calling conn.sftp(function(err, sftp). Unfort ...

javascriptnode.jsnpmsshsftp

Steps for converting an object of the Map type to a string

class sample{ title : string items : Map<string,string> =new Map() constructor(){ this.title='Sunny' this.items.set('fruit','Apple') } } var s = new sample() console.log(s) console.log(JSO ...

javascripttypescript

What distinguishes line-height:1.5 from line-height:150% in CSS?

Does anyone have any information on this? ...

css

Determining the successful completion of an ajax request using jQuery editable plugin

I recently started using Jeditable to enable inline editing on my website. $(".video_content_right .project_description").editable(BASE_URL+"/update/description", { indicator: "<img src='" + BASE_URL + "/resources/assets/front/images/indicator ...

javascriptjqueryajaxjeditable

Unable to provide feedback on the input elements

ISSUE: Unable to provide input in the input fields // Enable dragging for the DIV element: dragElement(document.getElementById("mydiv")); function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementB ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

What is the best way to create a modal message box using AngularJS?

Here is some code that I need help with: <body> <div> xxx </div> <div id="error" ng-show="er.msg"> <div style="color: white; background-color: purple; height: 2rem; display: flex; align-items: ...

htmlangularjs

Is it possible to prevent the fade out of the image when hovering over the text after hovering over the div or image, causing the text to fade in?

Using React and CSS. I have set up my application to display a faded image on hover, with text that fades in over it. However, I am facing an issue where touching the text with my cursor removes the fade effect. Does anyone have a solution for preventing ...

javascripthtmlcssreactjswebkit

Utilize jquery to slide an image towards the left side

I am working on a basic HTML page that contains a toolbar with three images inside. The goal is to have the image move from the right end of the toolbar to the left end when clicked. The other two images should remain at the extreme right. Below is the HT ...

javascriptjquery

Z-index behaving abnormally

I've been working on developing a website and one of the key features I'm trying to implement is a slideout menu that slides horizontally when the mouse hovers over it. To make development easier, I initially set the menu to be fully extended by ...

htmlcss

Converting a JS result set into JSON format

Having an issue with converting code from XML output to a JSON object instead. Here is the current code: public String evaluate() throws Exception { // Code block here } I need assistance in using GSON JSON utility methods to convert the result s ...

javascriptjson

Obtaining the value and other attributes of a select option in Vue.js 2

I have implemented vuejs in my project and encountered a situation where I need to work with a select element containing multiple options. Here is an example of the code: <select v-model='line.unit' name='unit[]' required @change=& ...

javascripthtmlvue.jsvuejs2

AmplifyJS is throwing an error: TypeError - It seems like the property 'state' is undefined and cannot be read

I am currently working on integrating the steps outlined in the Amplify walkthrough with an Angular cli application. My app is a brand new Angular cli project following the mentioned guide. My objective is to utilize the standalone auth components a ...

javascriptangulartypescriptamplifyjs

The loading sequence of Vuetify CSS for buttons is inconsistent in the production build, leading to functionality problems

I am currently working on a Vue application that utilizes a Vuetify "bottom navigation" component as shown below: <v-bottom-navigation app fixed grow color="#121212" class="bottom-navigation" > <v-btn text tile v-for="menuI ...

javascriptvue.jswebpackvuejs2vuetify.js

Converting promises in JavaScript

Understanding the concept of promises has been a challenge for me. While I have come across some examples that shed light on it, applying those concepts practically is where I face difficulties. Here's an example illustrating my dilemma: (For this cod ...

javascriptnode.jspromiseq

Is there a way to make the table header stretch across the entire table when using display properties to simulate a <table>?

I made a switch from an old table to a new one constructed using Divs, and everything seems to be working fine except for one issue. I am trying to create a header that spans the entire width of the table without having multiple cells in the heading like i ...

htmlcss