Slide and Swipe Menu with jQuery For The Web

Creating a sidebar swipeable for the web is mobile-friendly side navigation built with jQuery and CSS that allows you to expose and hide the side menu with touch scroll events using the jQuery touchSwipe plugin.

javascript swipe side menu, left side menu with submenu codepen, slide and swipe menu with jquery, swipe sidebar jquery, swipe menu jquery, swipe left menu css

How to make use of it:

1. Create a side menu for your web page.

<div id="sidebar">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Explore</a></li>
      <li><a href="#">Users</a></li>
      <li><a href="#">Sign Out</a></li>
    </ul>
  </div>

2. Create a hamburger toggle that allows the visitor to open/close the side menu by clicking.

<a href="#" data-toggle=".container" id="sidebar-toggle"> 
  <span class="bar"></span> 
  <span class="bar"></span> 
  <span class="bar"></span> 
</a>

3. Create a blank element for the swipe area.

<div class="swipe-area"></div>

4. Then wrap it with your main site content in a container.

<div class="container">
  <div id="sidebar">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </div>
  <div class="main-content">
    <div class="swipe-area"></div>
    <a href="#" data-toggle=".container" id="sidebar-toggle"> 
      <span class="bar"></span> 
      <span class="bar"></span> 
      <span class="bar"></span> 
    </a>
    <div class="content">
      ... Main Content ...
  </div>
</div>

5. Basic CSS / CSS3 Styles.

body,
html {
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-family: helvetica;
  font-weight: 100;
}

.container {
  position: relative;
  height: 100%;
  width: 100%;
  left: 0;
  -webkit-transition: left 0.4s ease-in-out;
  -moz-transition: left 0.4s ease-in-out;
  -ms-transition: left 0.4s ease-in-out;
  -o-transition: left 0.4s ease-in-out;
  transition: left 0.4s ease-in-out;
}

.container.open-sidebar { left: 240px; }

.swipe-area {
  position: absolute;
  width: 50px;
  left: 0;
  top: 0;
  height: 100%;
  background: #f3f3f3;
  z-index: 0;
}

#sidebar {
  background: #DF314D;
  position: absolute;
  width: 240px;
  height: 100%;
  left: -240px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

#sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#sidebar ul li { margin: 0; }

#sidebar ul li a {
  padding: 15px 20px;
  font-size: 16px;
  font-weight: 100;
  color: white;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid #C9223D;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  -ms-transition: background 0.3s ease-in-out;
  -o-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
}

#sidebar ul li:hover a { background: #C9223D; }

.main-content {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  position: relative;
}

.main-content .content {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  padding-left: 60px;
  width: 100%;
}

.main-content .content h1 { font-weight: 100; }

.main-content .content p {
  width: 100%;
  line-height: 160%;
}

.main-content #sidebar-toggle {
  background: #DF314D;
  border-radius: 3px;
  display: block;
  position: relative;
  padding: 10px 7px;
  float: left;
}

.main-content #sidebar-toggle .bar {
  display: block;
  width: 18px;
  margin-bottom: 3px;
  height: 2px;
  background-color: #fff;
  border-radius: 1px;
}

.main-content #sidebar-toggle .bar:last-child { margin-bottom: 0; }

6. Load the necessary jQuery library and jQuery touch-swipe plug-in on the webpage.

<script src="jquery-2.1.4.min.js"></script> 
<script src="jquery.touchSwipe.min.js"></script> 

7. Enable the swipeable side menu.

$(window).load(function(){
  $("[data-toggle]").click(function() {
    var toggle_el = $(this).data("toggle");
    $(toggle_el).toggleClass("open-sidebar");
  });

  $(".swipe-area").swipe({
    swipeStatus:function(event, phase, direction, distance, duration, fingers)
      {
        if (phase=="move" && direction =="right") {
           $(".container").addClass("open-sidebar");
           return false;
        }
        if (phase=="move" && direction =="left") {
           $(".container").removeClass("open-sidebar");
           return false;
        }
      }
  }); 
});

Touch Swipeable Sidebar Menu with jQuery, creating swipeable side menu for the website Plugin/Codepen, swipe menu javascript, jquery touch swipe event


See Demo And Download

Official Website(ElenaDroueva): Click Here

This superior jQuery/javascript plugin is developed by ElenaDroueva. For extra advanced usage, please go to the official website.

Related Posts

vuejs-dialog-plugin

Vuejs Lightweight Prompt Based On Promise And Confirm Dialog

VUEJS DIALOG PLUGIN is a lightweight, promise-based, prompt, and dialog-based alert. Important updates The dialog will always be resolved by an object. (ie a callback to continue…

Lightweight-Flexbox-Carousel-Plugin

Simple and Lightweight Flexbox Carousel Plugin With JavaScript | flexCarousel.js

Flexbox Responsive Slider – flexCarousel.js plugin is a simple and lightweight plug-in from Flexbox carousel ES6 JavaScript. An unofficial fork by Slick Carousel. Flex Carousel is a…

bootstrap-5-multi-level-dropdown

Multi-Level Dropdown Works With Bootstrap 5

Bootstrap 5 Multi-Level Dropdown, using the official HTML without adding additional CSS styles and classes, it’s just like the original support. Not all of the things listed…

jquery-confirmation-dialog

JQuery UI Built Dynamic Modal That Uses Bootstrap | confirm.js

confirm.js is to use confirm modal created using JQuery and Bootstrap. Put events in each custom button in your web application. Easy to implement, saves time. Requirements…

bootstrap-responsive-navbar

[Bootstrap 5] Responsive Navbar With off-canvas Display on Mobile

The Bootstrap 5-off-canvas navigation menu is a responsive navigation system that combines BS5 components outside of the canvas and navbar. Must Read: Pure CSS Mobile-friendly Responsive Table…

Extract-The-Dominant-Color-From-Image

Extract The Dominant Color From Image | jquery.primarycolor.js

Primary Color jQuery plugin that gets the base color of an image. A callback event that lets you apply RGB coloring to any HTML element is supported….