Full-screen mobile menu with sliding animation

I currently have a slide-out menu on my webpage, which is 350px wide

let menuGeneral = $('#menu-general');

    $('#menu-up-control').click(function () {
        menuGeneral.animate({ right: '0' }, 500);
    });

    $('#menu-up-control-close').click(function () {
        menuGeneral.animate({ right: '-350px' }, 500, function () {
            menuGeneral.hide();
        });
    });
.menu-up-control {
  float:right;
  font-size:26px;
  top:3px;
  position:relative;
  cursor:pointer;
  padding:10px 100px 0 0;
}

.menu-up-control-close {
  width:15px;
}

.menu-up-control-close i {
  color:white;
  font-size:40px;
  top:3px;
  position:relative;
  cursor:pointer;
  padding:10px 0px;
  margin:50px 0 0 40px;
}

.menu-general {
  position:fixed;
  width:350px;
  top:0;
  right:-350px;
  bottom:0;
  z-index:9999;
  padding:10px;
  background-color:black;
}

.menu-main li, .menu-main li a {
  font-size:36px;
  font-weight:700;
}
.menu-main li a {
  font-weight:bold;
  color:white;
  text-decoration:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" 
          rel="stylesheet"  type='text/css'>

<a id="menu-up-control" class="menu-up-control">
                        <i class="fa fa-bars"></i>
                    </a>

<div id="menu-general" class="menu-general"gt;
                <div id="menu-up-control-close" class="menu-up-control-close">
                    <i class="fa fa-times"></i>
                </div>
                <ul class="menu-main">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                </ul>
            </div>

However, I want to modify it so that for mobile devices with a screen width of 767px or greater, the menu stretches across the entire width of the screen

I have added width: 100% to the css class .menu-general

In the JavaScript code, I have added the following

let menuGeneral = $('#menu-general');

    if ($(document).width() > 767) {
        menuGeneral.animate({ right: '0' }, 500);
    } else {
        menuGeneral.animate({ right: '0' }, 500);
    }

    if ($(document).width() > 767) {
        menuGeneral.animate({ right: '-350px' }, 500);
    } else {
        menuGeneral.animate({ right: $(window).width() }, 500);
    }

For desktop displays, the .menu-general class includes right:-350px;, but I am unsure how to adjust this for mobile devices so that the menu hides appropriately based on screen size

javascripthtmljquerycss

Answer №1

After making adjustments, the CSS I implemented now effectively covers the entire screen:

.menu-general {           
    @media screen and (max-width: 767px){
        width: 100vw;
        right: -100vw;
    }
}

The if-else statement was also updated correctly:

    let menuGeneral = $('#menu-general');

    if ($(document).width() > 767) {
      $('#menu-up-control').click(function () {
          menuGeneral.animate({ right: '0' }, 500);
      });

      $('#menu-up-control-close').click(function () {
          menuGeneral.animate({ right: '-350px' }, 500, function () {
              menuGeneral.hide();
          });
      });
    }else{
      $('#menu-up-control').click(function () {
          menuGeneral.animate({ right: '0' }, 500);
      });

      $('#menu-up-control-close').click(function () {
          menuGeneral.animate({ right: '-100vw' }, 500, function () {
              menuGeneral.hide();
          });
      });
    }
.menu-up-control {
  float:right;
  font-size:26px;
  top:3px;
  position:relative;
  cursor:pointer;
  padding:10px 100px 0 0;
}

.menu-up-control-close {
  width:15px;
}

.menu-up-control-close i {
  color:white;
  font-size:40px;
  top:3px;
  position:relative;
  cursor:pointer;
  padding:10px 0px;
  margin:50px 0 0 40px;
}

.menu-general {
  position:fixed;
  width:350px;
  top:0;
  right:-350px;
  bottom:0;
  z-index:9999;
  padding:10px;
  background-color:black;

  @media screen and (max-width: 767px){
    width: 100vw;
    right: -100vw;
  }
}

.menu-main li, .menu-main li a {
  font-size:36px;
  font-weight:700;
}
.menu-main li a {
  font-weight:bold;
  color:white;
  text-decoration:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>  
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"  type='text/css'>

</head>
<body>

  <a id="menu-up-control" class="menu-up-control">
      <i class="fa fa-bars"></i>
  </a>

  <div id="menu-general" class="menu-general">
      <div id="menu-up-control-close" class="menu-up-control-close">
          <i class="fa fa-times"></i>
      </div>
      <ul class="menu-main">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
      </ul>
  </div>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</body>
</html>

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

Jquery Mobile listview not functioning properly with voiceover assistive technology

When building a website with the main navigation using jQuery Mobile listview, everything works smoothly on browsers like mobile safari. However, issues arise when voiceover or similar features are enabled, as the navigation is disabled due to jQuery mobil ...

jquerylistviewmobileaccessibility

What's the best way to add click functionality to a bootstrap 5 card

I am currently learning Bootstrap 5, html, and CSS. I am using these technologies to develop a website and implementing Bootstrap 5 to create cards. I wanted to make these cards clickable so that they can redirect users to another page on the website. Howe ...

htmlcssvisual-studiofrontendbootstrap-5

Arranging content within columns according to their column position

As I design a grid with three columns, each grid box contains a div with a maximum width of 280px. Sometimes the grid columns exceed this width. To achieve my desired layout, I aim to align the content in the grid boxes so that the left column aligns to th ...

htmlcssflexboxcss-grid

Troubles with DropDownList onChange event when selectedIndex is at 0

Hey there, I have a question that's been puzzling me. I have three security question dropdown menus on my ASPX page with JavaScript that removes and repopulates questions based on user selection. Everything works great when editing an existing profile ...

c#asp.netjavascriptdrop-down-menu

Issue with AJAX POST method failing to upload the file

I'm having trouble incorporating file upload support into my AJAX post function. Can anyone provide some guidance on what I might be missing? function ajax_post(url, param) { if (url.substr(0, 11) == 'javascript:') { result = &ap ...

javascriptajaxfile-upload

Vue: The async Apollo mixin function successfully logs a value, however it ultimately returns as undefined

I've encountered numerous async/return undefined queries on this platform, but despite trying various solutions, I'm unable to make any progress. My apologies if I overlooked something obvious. In an attempt to improve reusability, I extracted a ...

javascriptvue.jsasync-awaitvue-apollovue-mixin

Child component in Angular2 makes an observer call to its parent object

Let me try to explain this in the best way possible. I have a service that includes an observable class responsible for updating itself. This observable class needs to be pushed out to the app using the observer within the service. How can I trigger that ...

javascripttypescriptangular

Determining the position and offset of an element

Currently, I am facing a dilemma with my table of images. I want to add an icon to the corner of each image so that they align perfectly. I attempted to achieve this using relative CSS positioning, but it resulted in the icons extending beyond the cells an ...

javascriptjquery

The Google Docs viewer is displaying an empty screen

I have been utilizing the Google Docs viewer on my website: <div class="embed-r embed-responsive-a"> <iframe class="embed-responsive-it" src="https://docs.google.com/viewer?embedded=true&amp;url=http://LINK.PDF"></iframe> </div& ...

javascripthtmlcsspdfgoogle-docs

Javascript - Error encountered when utilizing a for loop to insert a new column into an array

I have been utilizing an API to fetch data on various stocks, and I am attempting to include a column named "symbol" with the query values using the function insertColumn. However, I am encountering an error message that says (node:15732) UnhandledPromiseR ...

javascriptarraysfor-loop

Get the skin image link from the app folder in Magento

I am attempting to manually insert social icons into my project. projectname/app/design/frontend/projectname/default/template/page/html/footer.phtml This is the HTML code: <a src="../">facebook</a> What is the proper method to link the imag ...

htmlcssmagentotheming

Issues with Image Loading in Azure WebMatrix

I am currently using WebMatrix to host my website, but I'm facing some issues with certain elements not loading correctly. Specifically, I have two pictures on my site that are linked to a directory on my local machine. I would like to know how I can ...

htmlcssazure

Is there a way to bring to life the addClass() and removeClass() jQuery functions through animation?

I am currently developing a website and I want to be able to toggle the visibility of sections by using the ".hidden" bootstrap class within click events. Here is the basic code snippet: $('selector').click(function(){ $('*part-to-hi ...

javascriptjqueryhtmltwitter-bootstrapanimation

An advanced template system incorporating dynamic scope compilation

My project requires a unique solution that cannot be achieved with standard data-binding methods. I have integrated a leaflet map that I need to bind with a vue view-model. While I was able to display geojson features linked to my view, I am facing chall ...

javascriptdata-bindingleafletvue.js

Could someone assist me in resolving the issue of receiving empty emails from my online form submission?

Every day, I receive 6 blank emails from my contact form at the same time. Even though the form on the website is filled out correctly and all the information goes through, I still get these mysterious blank emails. I have implemented validation checks in ...

javascriptphphtmlforms

Applying the active state to the link will cause it to inherit the default styles of the

I am facing a challenge with overriding the active style of links in a universal manner, to restore them to their original state when they cannot be interacted with (such as during scrolling). In my current code, I implemented this: .scrolling a:active { ...

css

Trouble initiating Nodejs project on Heroku platform

Attempting to deploy a nodejs application on heroku.com has been a challenge. Although the code was successfully pushed to heroku master, accessing the application resulted in an error message. https://i.sstatic.net/r5yQE.jpg Upon checking the logs, the ...

javascriptangularjsnode.jsheroku

Retrieving information from an API and incorporating it into JSX results in displaying text within the HTML element

I have retrieved data from an API with the following response: { "name": "family: woman, woman, girl, girl", "unicode": "1F469 200D 1F469 200D 1F467 200D 1F467", "html": "&#128 ...

htmlreactjsapijsx

How to activate a media query in response to user interaction using JavaScript

My responsive web page has various designs for different screen sizes, implemented using @media queries. I am interested in allowing users to manually adjust the design for smaller or larger screens without actually changing the screen size. Is there a wa ...

javascriptcssresponsive-designmedia-queries

When using Node.js and geth together, running JavaScript code may lead to the creation of zombie processes, causing the

Currently, I am utilizing a JavaScript code that connects to the web3 package on Ethereum's JSON RPC API. This code is designed to iterate through each transaction in an incoming block. If the transaction involves an internal wallet, it sends the rele ...

javascriptnode.jsgo-ethereum