HTML and CSS for an off-canvas menu

Looking to create an off-canvas menu that smoothly pushes content out of view instead of cropping it. Additionally, I want to implement a feature that allows the menu to close when clicking outside of it.

I found the code for the off-canvas menu on W3Schools.

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
}
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, .offcanvas a:focus{
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
<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>

<div id="main">
  <h2>Off-Canvas Menu Example</h2>
  <p>Click on the element below to open the side navigation menu and push this content to the right.</p>
  <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
</div>

javascripthtmlcssoff-canvas-menu

Answer №1

To simplify the process, instead of constantly adding and removing CSS rules during click events, consider using a single function that toggles a class to open or close a navigation menu.

I created an 'open' class with the necessary styling in JavaScript, making it easy to toggle the side nav's visibility by simply adding or removing this class.

While this may not be the ideal way to handle it, I maintained your original code structure as closely as possible. By enclosing everything within a 'wrapper' div and defining a click event on this div containing the side nav and main panel, you can check for the presence of the 'open' class to decide whether to open or close the side nav.

You'll need to determine what triggers the opening action - presumably, you wouldn't want any click on the main panel to open the side nav randomly. But this approach should give you a starting point for closing the side nav when clicking outside of it.

function toggleNav() {
  var wrapper = document.getElementById("wrapper");
  
  if(wrapper.classList.contains("open")){
    wrapper.classList.remove("open")
  } else {
    wrapper.classList.add("open');
  };
}
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;
}

.open #mySidenav {
  width:250px;  
}

.open #main {
  margin-left:250px;
}


.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
<div id="wrapper" class="" onclick="toggleNav()">
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<div id="main">
  <h2>Sidenav Push Example</h2>
  <p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
  <span style="font-size:30px;cursor:pointer">&#9776; open</span>
</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

Troubleshooting the issue with ajax loadXml callback functionality

My table is empty and I can't figure out where the mistake is. I want to use the console to debug, but I'm not sure how. Update: I found a working sample here http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_xml2. I used similar code, bu ...

javascriptajax

Group all 3 elements with a wrapper

I'm facing a challenge in trying to enclose 3 divs inside one wrapping div. I have successfully wrapped up 2 divs, but the third one is proving to be difficult. To see my progress so far, you can check out my JSFiddle here: http://jsfiddle.net/cz9eY/ ...

javascriptjqueryhtmlwrapall

The Jquery navigation and image display features are experiencing technical difficulties in Internet Explorer

My website is currently in the development stage and functions well on all browsers except for IE10. Interestingly, both the menu bar and photo gallery, which rely on Jquery, are not functioning properly in IE10. Below is the code snippet: <script ty ...

javascriptjqueryhtmlcssinternet-explorer

Utilize button element with both href and onClick attributes simultaneously

I'm in the process of preparing a button that includes href and onClick. After testing it on my local environment, everything seems to be working smoothly. Do you know of any specific browsers that may encounter issues with this setup? <Button cl ...

javascriptreactjsmaterial-ui

Adjust the column count in mat-grid-list upon the initial loading of the component

My goal is to implement a mat-grid-list of images with a dynamic number of columns based on the screen size. Everything works perfectly except for one small glitch – when the grid first loads, it defaults to 3 columns regardless of the screen size until ...

javascriptcssangulartypescriptangular-material

What is the method to determine the number of keys that have the same value in a JavaScript object?

My goal is to achieve functionality similar to this: var data = [ { tag:'A', others:'Abc' }, { tag:'B', others:'Bbc' }, { tag:'A', others ...

javascriptarraysangularjsmongodbobject

Is it possible to obtain the X-Y coordinates of the ray collision location in relation to the targeted face?

I have been working on determining the ray collision coordinate in relation to the targeted face... The following is my code snippet: var fMouseX = (iX / oCanvas.width) * 2 - 1; var fMouseY = -(iY / oCanvas.height) * 2 + 1; //Utilizing OrthographicCamer ...

javascriptthree.js

Commitment within a forEach iteration

While working with a foreach loop, I am facing some challenges. Here is the scenario: I have multiple elements stored in an object array. For each object, I need to execute two queries. After completing the queries for one object, I move on to the next and ...

javascriptnode.jsecmascript-6es6-promise

What is the process for populating the Body placeholder in asp.net Core MVC?

After reviewing a tutorial, I discovered that the RenderBody method is supposed to display views within the designated placeholder of the layout, as illustrated in this diagram: However, in practice, it did not work exactly as expected. When I created a l ...

cssasp.net-core-mvc

Some CSS styles are not displaying correctly within an iframe

Let me start by clarifying that I am not looking to add extra CSS to the contents of an iframe from the parent document. My issue lies with a document that normally displays correctly but experiences styling issues when shown in an iframe. Whenever I searc ...

htmlcssiframe

Interactive PDFs that launch a new browser tab rather than automatically downloading

I am facing an issue with my web API that is returning a JSReport as an encoded byte array. Despite multiple attempts to read the byte array, I keep encountering either a black screen or an error message indicating "failed to download PDF". Interestingly, ...

javascriptajaxpdfblob

Creating a webpage with a form is a simple process that involves utilizing both PHP and HTML

Just like creating a post in WordPress or asking a question on this website, I am curious about how to create a page simply by filling out a form. I understand how to build an HTML form, manage data in a database, and have some knowledge of PHP. However, ...

phphtmlmysqldatabaseforms

Step-by-step guide on retrieving news_id and displaying it in an alert when an item

How can I retrieve the item ID when it is clicked in a Listview to display the specific news_id in an alert? Below is the HTML code snippet for my page: <body> <div data-role="page" id="taxmanhomepage" data-theme="e"> <div data-role="h ...

javascripthtmljson

What is the reason behind FieldSelect returning a string instead of an object like FieldCheckbox?

FieldSelect component from Sharetribe documents is giving me a string, while FieldCheckbox is returning a JSON object. In a specific scenario, I want FieldSelect to store a JSON object. How can I achieve this? Below is the code snippet for reference: I& ...

javascriptreactjsreact-final-formsharetribe

`Center Google My Map Location - Embedded in the Middle of the Page`

Recently, I transitioned to using an embedded My Map for a business with 2 locations. However, I encountered some challenges in customizing the map's height, width, and centering on the page. Is there a way to resolve this issue? New HTML code which ...

htmlgoogle-mapsjoomla

Tips for aligning flex items based on the previous item in a flex container

Place 'text1' beneath the number 1 (so that the 't' character is under the 1), and 'text2' beneath the number 5 (with the '2' character under the number 5) This should be done dynamically to adjust to a varying numb ...

htmlcssangularflexboxcss-selectors

Having difficulty centering an image in HTML?

I've been struggling to get the image (logo) centered on the top bar! I've tried using align-self: center;, display:block;, but nothing seems to work. It feels like I'm missing something here! Click here for the codesandbox link to view the ...

htmlcss

Having trouble with HTML on Eclipse for Android development?

There seems to be an issue with the HTML code in this program. When attempting to use x or any other HTML code, it does not format correctly. This is unusual as HTML has worked in the past. The problem occurs with the first string array and not with the ...

javaandroidhtmleclipse

Grab images from clipboard, encountering blob Error

I'm having issues with copying and pasting images from the clipboard in Chrome. Can someone help me troubleshoot this error? Check out this js fiddle for reference Error Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileR ...

javascriptjqueryhtmlclipboard

Tips for optimizing search functionality in Angular to prevent loading all data at once

An exploration for information within vast datasets is triggered by AngularJS when the input contains more than 3 characters. var app = angular.module('test_table', []); app.controller('main_control',function($scope, $http){ $scope ...

javascripthtmlangularjs