What is the easiest way to toggle the display of the hamburger menu in a basic grid or flex layout?

I have recently created a grid and flex-based menu. How can I make the hamburger menu function to show/hide the menu on click? Is there a way to achieve this without using JavaScript?

Here is the current code snippet:

.menu {
    display: grid;
    grid-template: auto / auto 3cm 3cm 3cm 3cm 3cm auto;
    background: #444;
}

.menu-item {
    padding: 10px;
    text-align: center;
    color: #fff;
}

.menu-item:hover {
    background: #fff6;
}

.burger {
    display: none;
    padding: 10px;
    background: #444;
    color: #fff;
}

.burger > div {
    text-align: center;
}

@media (max-width: 20cm) and (orientation: portrait) {
    .menu {
        max-width: 8cm;
        grid-template: 0 auto auto auto auto auto 0 / auto;
    }
    .burger {
        display: flex;
        justify-content: space-between;
    }
}
<div class="burger">
  <div>BURG</div>
  <div>Company Name</div>
</div>
<div class="menu">
  <div></div>
  <div class="menu-item">Home</div>
  <div class="menu-item">Products</div>
  <div class="menu-item">Manuals</div>
  <div class="menu-item">Customers</div>
  <div class="menu-item">Contact</div>
  <div></div>
</div>

htmlcssflexboxcss-grid

Answer №1

If you're looking for a simple example using jQuery slideToggle() function, here's a code snippet that might give you some inspiration. Remember, there's always room for improvement. (Try adjusting screen width to see hamburger menu in action on jsfiddle)

var _burger = $('.burger');
var _menu = $('.menu');

_burger.on('click', function() {
  console.log("burger clicked");
  _menu.slideToggle();
});
.menu {
  display: grid;
  grid-template: auto / auto 3cm 3cm 3cm 3cm 3cm auto;
  background: #444;
}

.menu-item {
  padding: 10px;
  text-align: center;
  color: #fff;
}

.menu-item:hover {
  background: #fff6;
}

.menu.hide {
  display: none;
}

.burger {
  display: none;
  padding: 10px;
  background: #444;
  color: #fff;
}

.burger>div {
  text-align: center;
}

@media (max-width: 20cm) and (orientation: portrait) {
  .menu {
    max-width: 8cm;
    grid-template: 0 auto auto auto auto auto 0 / auto;
  }
  .burger {
    display: flex;
    justify-content: space-between;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="burger">
  <div>BURG</div>
  <div>Company Name</div>
</div>
<div class="menu">
  <div></div>
  <div class="menu-item">Home</div>
  <div class="menu-item">Products</div>
  <div class="menu-item">Manuals</div>
  <div class="menu-item">Customers</div>
  <div class="menu-item">Contact</div>
  <div></div>
</div>

Answer №2

With just a little bit of JavaScript, it's possible to achieve this effect. The goal is to have the burger menu initially displayed on the screen with the position:absolute;left:0;top:0; properties from the burger class and the transform: translate(0, 0); properties from the open class. Then, when you want to hide the menu, you can move the div off the screen by applying the transform: translate(-300px, 0); style rule, which shifts the menu 300 pixels to the left.

.burger {
    height:100%;
    padding: 10px;
    background: #444;
    color: #fff;
    position:absolute;
    left:0;
    top:0;
}

.open {
  transform: translate(0, 0);
}

.close {
    transform: translate(-300px, 0);
    transition: transform 0.3s ease;
}

function hideMenu() {
  var burgMenu = window.document.getElementById("burg-menu");
  burgMenu.classList.toggle("open");
  burgMenu.classList.toggle("close");
}

You can check out a live demo here!

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

Tips for minimizing the dimensions of images in a slideshow within a gallery

Check out this website: The slideshow images on there are too tall. Can someone assist me in lowering the height of the images? I want both images to be displayed at the same height. Thank you in advance. ...

cssslideshow

Problem with Jquery Sticky Navigation

I've been struggling to understand this issue and can't seem to find any help. http://fiddle.jshell.net/DQgkE/7/show/ The user experience is currently a bit glitchy, but what I would like is: 1) When scrolling down the page, I want the Sticky ...

javascriptjquerycssajaxjquery-plugins

What is the best way to eliminate the gap between spans in Bootstrap?

Imagine you have the following code: <div class="row-fluid"> <div class="span6"></div><!--span6 END--> <div class="span6"></div><!--span6 END--> </div><!--row END--> Now envision two red b ...

csstwitter-bootstraphtml

Centering PayPal buttons horizontally with a width specified as a percentage

Take a look at this interactive coding playground showcasing the following React code: import React from "react"; import ReactDOM from "react-dom"; import { PayPalScriptProvider, PayPalButtons, usePayPalScriptReducer } from " ...

cssreactjspaypalpaypal-rest-sdk

Is there a way to modify the dimensions of this container? (CSS)

After performing a search and clicking on a result, a white bubble pops up on the map. I am looking to use CSS to make this bubble smaller as it is currently too large. Can anyone provide guidance on how to achieve this? ...

javascriptjqueryhtmlcssgoogle-maps

Unlimited highway CSS3 motion

I have come across a stunning 2D Highway background image that I plan to use for my mobile racing game project which involves JS and CSS3. The image can be found at this link. My goal is to create an animation of the road in order to give players the illu ...

javascripthtmlcsscss-animations

Expanding SVG width upon import through Icomoon

After exporting an SVG file from Illustrator (already "Fit to selected Art"), I encountered an error while importing it via the Icomoon App. Strangely, other SVGs are importing correctly. I would appreciate any help or insight you can provide. Thank you i ...

htmlcsssvgiconsfont-face

VueJS Error: Unable to access the 'className' property of an undefined variable

I'm currently working on a menu design project where I need to highlight the active tab/page that the user is on by adding a color class and utilizing JavaScript to update the active link. Here's a snippet of my template: <div class="menu ...

javascriptcssvue.js

PHP: I am unable to establish a connection with the script or submit form data to mySQL

Seeking assistance with debugging this script. (The * represents confidential information that I am aware of but cannot share) <?php $dbhost = '*********'; $dbuser = '*********'; $dbpass = '*********'; $conn = mysql_conne ...

phpmysqlformshtml

How to Use the env() Variable in CSS Styling?

Operating on React with Material-UI, my web app features a bottom nav bar. For certain devices like the latest iPad, I must allocate an additional 8 pixels below it to account for the horizontal gray bar that substitutes for a home button: https://i.sstat ...

cssreactjsmaterial-uicss-variablesemotion

incorporating HTML attributes without specified values in .NET

Is there a way to include the multiple attribute in a select element using .net? I attempted the following approach: If MultiSelect Then drpSelect.Attributes.Add("multiple", "true") End If However, technically speaking, the HTML should only require the ...

html.net

Show a variety of pictures in a random arrangement?

Looking for some help here! I'm trying to shuffle my images in a random order each time the page is refreshed. It's like a game of musical chairs but with pictures! Does anyone know how to achieve this? I've done some searching, but haven& ...

javascriptphphtml

Mysterious extra space appearing on the right side of the left scroll div in Chrome

I am currently working with a table that dynamically increases in content when a button is clicked. I have successfully implemented a scroll on the right side to handle overflow. However, I encountered an issue when trying to change the scroll to the left ...

htmlcss

I'm experiencing issues with my custom CSS file conflicting with Bootstrap

It's strange, my custom main.css doesn't seem to have any effect on changing the font size or location of the text. However, as soon as I remove the line that links to bootstrap, it starts working perfectly. I believe that the bootstrap.css file ...

htmlcsstwitter-bootstrap

Styling will_paginate Links in Rails 3 - A Guide

When it comes to coding layout, how should the link be styled? <a href="#" class="class1 class2 class3"><span>Previous</span></a> <a href="#" class="class1 class2 class3"><span>Next</span> In my search for a solu ...

htmlcssruby-on-rails-3viewwill-paginate

How can you execute PHP code within another PHP script without triggering a redirect?

I'm faced with a situation where I have two php files, namely abc.php and def.php. My goal is to only display abc.php in the browser URL bar when it executes. Additionally, upon clicking the submit button on my HTML page, abc.php should be triggered t ...

javascriptphphtmlajaxpost

Determine who the creator of the clicked div is

I'm sorry if my explanation is a bit difficult to comprehend. Here is the code snippet in question: names.push(newName); var strName = newName; var newName = document.createElement('p') newName.setAttribute('id', newName); documen ...

javascriptjqueryhtmlcssarrays

Share the name of the Quasar component with the Vue 3 render function

I'm struggling to dynamically create a Vue 3 app with different components specified by name, such as "div", "button", or Quasar's "q-btn". When I try to pass the latter to Vue's render function Vue.h, I encounter difficulties. <html> ...

javascripthtmlvue.jsvuejs3quasar-framework

Altering the placement of a single element from floating to fixed positioning in CSS

Currently in the process of designing a basic website, I am looking to modify the behavior of the navigation bar on the left-hand side. I want it to remain fixed in its position so that users can scroll through the page without losing sight of it. My main ...

htmlcsspositioningcss-position

Vertically align all items within the div using Bootstrap to achieve perfect centering

I've been working on centering everything within this div vertically, and I've encountered some challenges along the way. Initially, I ensured that my background view extends my container nicely across the screen. Now, I'm looking to create ...

htmlcsstwitter-bootstrapsassbootstrap-4