Easy Navigation Slider with CSS3 and jQuery

I'm currently working on implementing a push menu on my website. The objective is to have the menu slide out from the left and overlap the current page content. I've written the code below but it doesn't seem to be functioning as expected. Can you spot any errors or oversights in my implementation?

CSS: 

    #menu {
  display: none;
  position: absolute;
  top: 0;
  left: -240px ;
  position: fixed;

  width: 240px;
  height: 100%;
  padding: 15px 25px;
  margin: 0;

  list-style: none;
  background: #333;
  z-index: 9999;

  transition: all 0.3s ease;
  -webkit-transition all 0.3s ease;
}

#menu a {
  display: block;
  color: #fff;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.animate {
  transform: translateX(240px);
  -webkit-transform: translateX(240px);
}

JavaScipt:

$(function() {
  $('#toggle-menu').click(function() {
      toggleMenu();
  });
})(jQuery);

function toggleMenu() {
  if ($('#menu').hasClass('animate')) {
    $('#menu').removeClass('animate');
  } else {
    $('#menu').addClass('animate');
  }
  //$('#menu').toggleClass('animate');
}

HTML:

<div id="menu">
  <ul>
    <li><a href="#"> Home </a></li>
    <li><a href="#"> Home </a></li>
    <li><a href="#"> Home </a></li>
  </ul>
</div>
javascriptjquerycss

Answer №1

Here is a helpful example I created for you:

$(".menu").click(function() {
  $('#menu').toggleClass('animate');
});
body {
  overflow: hidden;
}
#menu {
  top: 50px;
  transform: translateX(-300px);
  -webkit-transform: translateX(-300px);
  position: fixed;
  width: 240px;
  height: 100%;
  padding: 15px 25px;
  margin: 0;
  list-style: none;
  background: #333;
  z-index: 9999;
  transition: all 0.3s ease;
  -webkit-transition all 0.3s ease;
}
#menu a {
  display: block;
  color: #fff;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
#menu.animate {
  transform: translateX(0);
  -webkit-transform: translateX(0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
  <ul>
    <li><a href="#"> Home </a>
    </li>
    <li><a href="#"> Home </a>
    </li>
    <li><a href="#"> Home </a>
    </li>
  </ul>
</div>

<div class="menu">click</div>

Answer №2

Issues in your code:

  • The #toggle-menu element is missing
  • You are using display:none in the #menu style
  • Incorrect jQuery syntax for adding the .click() event

Your corrected code can be found on this working JSFiddle link (http://jsfiddle.net/bL62bek2/)

$('#toogle-menu').click(function() {
   toggleMenu();
});

$('#menu').click(function() {
   toggleMenu();
});

function toggleMenu() {
   if ($('#menu').hasClass('animate')) {
      $('#menu').removeClass('animate');
   } else {
      $('#menu').addClass('animate');
   }
   //$('#menu').toggleClass('animate');
}
#toogle-menu{
    position:absolute;
    right:0px;
    top:30px;
    cursor:pointer;
    padding: 3px;
    background-color:#333;
    color:#fff;
}
#menu {
  /*display: none;*/
  position: absolute;
  top: 0;
  left: -240px ;
  position: fixed;

  width: 240px;
  height: 100%;
  padding: 15px 25px;
  margin: 0;

  list-style: none;
  background: #333;
  z-index: 9999;

  transition: all 0.3s ease;
  -webkit-transition all 0.3s ease;
  }

#menu a {
    display: block;
    color: #fff;
    padding: 15px 0;
    border-bottom: 1px solid rgba( 255, 255, 255, 0.05 );
}

.animate {
    transform: translateX(240px);
    -webkit-transform: translateX(240px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

<div id="toogle-menu">menu</div>
<div id="menu" class="animate">
   <ul>
      <li><a href="#"> Home </a></li>
      <li><a href="#"> Home </a></li>
      <li><a href="#"> Home </a></li>
   </ul>
 </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

` `Spinning graphics and written content``

I am looking to create a dynamic element on my website where an image and corresponding text block rotate every few seconds. An example of what I am envisioning can be seen on this website: While I know how to implement a javascript for rotating images, I ...

phpjavascripthtmlcss

Encountering a Cypress testing issue linked to webpack. Feeling unsure about the next steps to address it

https://i.sstatic.net/z6bmW.png I encountered an error while attempting to run a test file that I created. The default tests run smoothly, but the error only occurs with the file I created. import {cypress as cy} from "cypress" describe('T ...

javascriptnpmcypress

Is it possible for JavaScript to capture scroll events while allowing clicks to pass through?

Currently, I have a setup where the user needs to interact with the layer behind the transparent scroll capture: http://jsbin.com/huxasup/4/edit?html,css,js,console,output scrollerCapture = document.querySelector('.scroller-capture'); scrollerC ...

javascripthtmlcssscroll

Restricting input to only letters when using the onkeyup function and preventing keys like PgUp, Del, and ArrowLeft from being entered

I'm completely new to Javascript and for my assignment, I have been tasked with developing a letter guessing game. Although I've completed most of it, I wanted to take things a step further by incorporating an alert when anything other than a let ...

javascriptfunction

Execute JavaScript AJAX Request On Page Load

I am facing an issue with creating an onload event in which an AJAX function needs to be called and passed a value. The challenge lies in the fact that I have both my header and footer split into sections via PHP, therefore I cannot place it on the body ta ...

phpjavascriptjqueryajax

Missing post data in jQuery ajax calls for Windows Phone 7

Currently, I am in the process of developing an application for Windows Phone 7 using PhoneGap. Within this application, I am making jQuery AJAX calls to send login POST data to a remote script. Upon sending these login credentials in POST data, the respo ...

jquerywindows-phone-7postcordova

Is it necessary to conceal the element every time the jQuery slideDown function is utilized?

Previously, I inquired about a certain matter related to this topic, but the response I received didn't provide a clear explanation. When pressing the 'duplicate' button on my form, instead of the input field simply appearing, I would prefe ...

javascriptjqueryhtml

Python responding to an Ajax request using jQuery

Currently, I am experimenting with integrating a pre-built inline editor from the following source: https://github.com/wbotelhos/inplace Regrettably, the available support documentation is lacking and my expertise in Javascript, jQuery, or Ajax is limited ...

javascriptpythonjqueryflask

Error in Postman: Express and Mongoose throwing 'name' property as undefined

While trying to create and insert 'user' JSON documents according to the model below, upon sending a POST request to localhost:3000/api/student, I encountered an error using Postman: TypeError: Cannot read property 'name' of undefined ...

javascriptnode.jsmongodbexpressmongoose

Best practices for structuring npm scripts and multiple webpack configurations

My project consists of multiple dashboards, and I've decided to create separate scripts in my package.json for each one. Building all the dashboards during development when you only need to work on one can be time-consuming. So, I discovered that it&a ...

javascriptnpmwebpackbundlebundler

What is the process for adjusting the expiration time of a GitLab accessToken?

I am currently using NextAuth for logging in with GitLab, but I am encountering an issue where my accessToken changes every 2 hours. How can I ensure that it remains valid for a longer period so that I can successfully store it in my database? It's wo ...

javascriptreactjsnext.jsnext-auth

"Enhance text formatting by making it stand out when hovered over

I am encountering an issue where the hover action for a specific letter begins before the mouse actually touches the text. In this case, I want the letter 'P' in 'Paul' to turn white when hovered over. The image illustrates the distanc ...

csshoverhighlight

The online server is unable to access the route from the ajax function in a separate JavaScript file

I am currently working on a Laravel project where each view page has its own separate JS file. However, I have encountered an issue when trying to access route functions from AJAX post or get calls on the online server (Digital Ocean). The error message I ...

javascriptphpajaxlaraveldigital-ocean

How can you prevent a draggable element from surpassing the bottom of the screen?

I'm dealing with an element that I want to make draggable only along the Y-axis. It needs to be able to go past the top of the screen, but I need to restrict it from going past the bottom of the screen. I recently came across the containment feature i ...

javascriptjquerycsspluginsuser-interface

Having difficulty navigating the website due to the inability to scroll

I am experiencing a problem on this website where I am unable to scroll. Visit www.Batan.io After loading the website for the first time, the trackpad (mac) works fine initially but then the scroll function stops working. Although the sidebar works, chan ...

htmlcssscroll

How can you modify Jquery show_hide so that the page automatically scrolls to the bottom of the concealed field when the button is clicked?

On my website, there is a button that reveals a map when clicked. The button is visible when the page loads, but once clicked, the map slides open and goes out of sight since the page loads at the top as usual. My goal is to have the page automatically scr ...

javascriptjquery

When submitting a form in HTML, ensure that the input checkbox returns 'On' instead of 'True'

My MVC3 app is using Project Awesome from http://awesome.codeplex.com/, but I'm encountering a strange issue with checkboxes. Inside a Modal popup, I have the following simple Html code: <input type="checkbox" class="check-box" name="IsDeleted"> ...

javascriptjqueryhtml

Can Rollup be utilized solely for processing CSS files?

I am curious about whether Rollup can be used solely for processing CSS files, such as css, scss, less, etc. For example, if I have a file called index.css in my src folder (the entry folder) and want Rollup to process it in the dist folder (the output fol ...

csssassrolluprollupjspost-processing

Leveraging conditions to retrieve information in the desired format from MongoDb

Here is an example of what the sample documents look like { userId: 1, totalGames: 10, winStats: 4, lostStats: 6, g1Stats: { totalGames: 4, winStats: 1, lostStats: 3, }, g2Stats: { totalGames: 5, wi ...

javascriptmongodbmongoosemongodb-querymongoose-schema

Unlocking the Power of $http and Stream Fusion

I'm interested in accessing the public stream of App.net. However, when I attempt to retrieve it using a simple $http.get(), I only receive one response. $http .get('https://alpha-api.app.net/stream/0/posts/stream/global') .success(func ...

javascriptangularjs