Slide and swipe menu

A sliding menu that works with touchSwipe library.

Online demo

Appszoom also uses it! So cool!

What's the difference with other sliders?

This plugin uses CSS3 transform property to move the navigation. That's why it works smoothly. Because performance matters.

Only 1 js file (+ jQuery + touchSwipe)
1Kb minified

Installation

1. Grab a copy of the plugin

Using bower

bower install slide-and-swipe-menu --save-dev

Using npm

npm install slide-and-swipe-menu --save-dev

or download the plugin from GitHub

2. Load the required files

Load them in the html


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">script>


<script src="http://labs.rampinteractive.co.uk/touchSwipe/jquery.touchSwipe.min.js">script>


<script src="../jquery.slideandswipe.js">script>

or use Browserify

require('slide-and-swipe-menu');

3. Create the HTML markup

Open / close

 <body>
    <nav>
        [...]
    nav>
    <main>
        [...]
        <a class="ssm-toggle-nav" href="#" title="Open / close">Open / closea>
    main>
    <div class="ssm-overlay ssm-toggle-nav">div>
body>

4. Initialize the plugin

Default initialization

<script>
    $(document).ready(function() {
        $('nav').slideAndSwipe();
    });
</script>

5. Add some CSS

/* navigation */
nav {
    height: 100%;
    width: 280px;
    background-color: #0a4a3c;
    left: 0;
    top: 0;
    z-index: 2;
    position: fixed;
    overflow-y: auto;
    overflow-x: visible;
    transform: translate(-280px,0);
}
/* overlay layer */
.ssm-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.2);
    display: none;
    z-index: 1;
}

/* prevent scroll when nav is open */
.is-navOpen{
  overflow: hidden;
}

Follow the repository

★ Star and watch this repo in order to stay updated with news about this plugin

License

The MIT License (MIT)

Copyright (c) 2015 Joan Claret

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

Other useful plugins

Maximum Characters limit warning: Get a warning when the max char limit has been exceeded with a jQuery plugin
jcSlider: A responsive slider jQuery plugin with CSS animations
html5 canvas animation: 3D lines animation with three.js
jquery dynamic max height : Dynamic max height plugin for jQuery with CSS animation

Card Swipe Animation Ruchika GuptaCard Swipe Animation [362⭐] - Swipe cards template by Ruchika Gupta.

A flexible, smooth, GPU accelerated sliding menu for your next PWA

Android sliding panel that is part of the view hierarchy, not above it.

vue-picture-swipe - Vue Picture Swipe Gallery (a gallery of image with thumbnails, lazy-load and swipe) backed by photoswipe.

FlutterCardSwipe Card Swipe Animation

:left_right_arrow: Swipe.js as a React component

An Android RecyclerView Swipe Helper for handling multiple actions per direction

vue-swipe-actions - iOS style swipe actions for Vue.js

vue-card-swipe - A touch slider for vue.js, support sliding in any direction to switch cards, compatible with PC and mobile.

A layout widget for a sliding side menu for Android.

Basic example of using ItemTouchHelper to add drag & drop and swipe-to-dismiss to RecyclerView.

A highly customizable radial menu that's very easy to setup.

🖼 Vue Picture Swipe Gallery (a gallery of image with thumbnails, lazy-load and swipe) backed by photoswipe

A button that activates by swipe instead of touch

Responsive Menu is a drop-down menu jQuery plugin for responsive websites

Library for Sliding Tab With Color Icons!

Android Satellite Menu

vue-menu - Menu / Context Menu component for vue2.

vue-lil-context-menu - A flexible lil context menu component for Vue.

vue-menu - Menu / Context Menu component for vue2.

A swipeable cards interface. The swipe-left/swipe-right for yes/no input. As seen in apps like Jelly and Tinder.

Share this repo

get-started Make Vivid Windows 10 like Start Menu on the Web Copyright Alert The icons in this project comes from the Stremline icon library, for whic

2.9k

Sidr is a jQuery plugin for creating side menus and the easiest way for doing your menu re...

Sidr Sidr is a jQuery plugin for creating side menus and the easiest way for doing your menu responsive. It uses CSS3 transitions in modern browsers a

A touch slideout navigation menu for your mobile web apps.

Slideout.js A touch slideout navigation menu for your mobile web apps. Features Dependency-free. Simple markup. Native scrolling. Easy customization.

136

sliding swipe menu that works with touchSwipe library.

Slide and swipe menu A sliding menu that works with touchSwipe library. Online demo Visit plugin site. Appszoom also uses it! So cool! What's the diff

An intro page with a full width background image, a bold animated menu and an iOS-like blu...

Full Page Intro & Navigation An intro page, focused around a full width background image and a bold animated menu. And, for browsers that support it,

A little menu effect with an SVG overlay and an infinite background CSS animation.

Infinite Menu Background Animation A page transition with an animated SVG path for a menu that has an infinite background animation. Article on Codrop

Simple click-triggered navigation submenus. Accessible and progressively enhanced.

Clicky Menus! A project by Mark Root-Wiley, MRW Web Design Clicky Menus lets you create a progressively-enhanced, accessible one-level dropdown menu t

A simple universal context menu for HTML elements.

A wonderful Double Menu UI Animation in & for React Native

A simple UI component/animation for double menu distribution in react native.

Este é um menu responsivo feito com React.js

Este é um menu feito com React.js, totalmente responsivo e com animações. ☕ Code and coffee Click na imagem para ter acesso ao video de apresentação d

378

A highly customizable radial menu that's very easy to setup.

Radial Menu A highly customizable radial menu that's very easy to setup. See it live here Alternative link About A radial menu, also known as pie menu, is a circular context menu where selection depends on directio

494

A flexible, smooth, GPU accelerated sliding menu for your next PWA

SuperSlide.js A lightweight, configurable sliding menu for your next PWA with promises. Only 2k gzipped! This library aims to provide a highly configurable, ready-to-use sliding menu for your next web application, while deli

578

:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material d...

React Native Circle Menu Check this library on other platforms: Looking for developers for your project? This project is maintained by Ramotion, Inc. We specialize in the designing and coding of custom UI

A Bubble menu effect for your react native application

react-native-bubble-menu A Bubble menu effect for your react native application, work very well with react-native-verctor-icons Example How to install npm i -S react-native-bubble-menu How to u

132

A Ripple menu effect for your react native application

react-native-circular-menu A Ripple menu effect for your react native application Example How to install npm i -S react-native-circular-menu How to use import CircularMenu from 'react-nat

Category: JavaScript / Menu
Watchers: 10
Star: 136
Fork: 51
Last update: Nov 21, 2021