CLOSE

Sliding Menus

(19 submissions) | Feb 21, 2017 (latest edition)

Plugins for creating beautiful sliding menus using jQuery, letting you choose among a variety of styles and behaviors.

CLOSE
  • A simple sidebar toggle menu made in CSS and JavaScript that activates on click, displaying a material menu for applications and mobile websites. It also looks good on big screens.

  • A colorful material CSS and JavaScript menu that uses concentric circles. When clicked on the middle, it displays different rings for likes, profile, photos and messages. It can be used on both mobile apps and websites.

  • A button made in CSS that activates a simple menu on click. It can be used as a menu in a mobile app or a website, it’s lightweight and easy to implement.

  • A floating draggable menu made in CSS and JavaScript resembling the one used by Facebook. The menu can be located anywhere on the website, and dragged with a cool snake effect when active. It can be used both in websites and apps.

  • A very appealing sidebar menu that counts on slide-animated elements that represent the page that they’ll show, the content of each page is also animated with sliding effects making everything nice and coherent.

  • A simple menu on the left side of the screen which works as “dropdown” once the user hovers over some elements. It has a flat style, and can be applied and modified easily thanks to the simple CSS and jQuery snippets included. This code can be used freely.

  • A plugin for mobile apps that allows you to swipe one or multiple items, whether they are dependent on another or they stand alone. The plugin is really lightweight, is dependency-free, you can implements short & long swiping options, swipe to delete, easy to use, and add CSS transforms and transitions.

  • An actionable menu for mobile apps that appears when hovered over made with CSS. The menu that appears has a beautiful background which can be dynamic according to the images the user uploads, and the menu slides from left to right smoothly. It was created by Virgil Pana.

  • A sliding touch navigation menu for mobile apps or even web projects. It is dependency-free and features simple markup, native scrolling, easy customization and CSS transforms & transitions. It is lightweight, just 4 Kb is taken by this menu created by Mango.

  • A CSS and jQuery navigation that looks like a 3D effect when it appears. It is complemented with beautiful typography and outlined icons for major impact. It uses CSS transforms and transitions to make it smooth and neat. It can be used freely.

  • A simple interaction menu for apps that can be stretched to reveal the menu elements created with CSS and JavaScript. It reveals the menu items organized in a list, created especially for mobile devices, although it can be adapted to desktop versions of websites. It is free and it was created by Codepen user Fabrizio Bianchi.

  • Pikabu is a framework that will help you create off-canvas panels to complement the design of your mobile app or website. Among its features you can find:

    – A simple markup.
    – Fewer containers and classes.
    – Native scrolling supported in all browsers.
    – Easy customization in HTML and CSS.
    – Compatibility in every device and browser.

    This module was created by Mobify and it’s licensed under the MIT License.

  • A notable code snippet for an off-canvas menu with flexbox created with pure CSS. It uses flexbox to control the layout and to resize the content area when the menu gets visible. Instead of overflowing the viewport and getting cut off on the right side.

    This snippet doesn’t use JavaScript at all but uses The Checkbox Hack, appeared in CSS Tricks instead. This pen was created by Zoe Gillenwater and uploaded to Codepen.

  • A compelling set of effects for off-canvas menus. It uses different layouts and transitions, making the overall page look awesome and coordinated, making space for actionable items in the menu and controls.

    These effects were made using CSS transitions, CSS animations made with bounce.js, and animated SVGs using Snap.svg. Additionally, the font icons used were from Font Awesome and the random users from Random User Generator. The menu effects are:

    – Top side
    – Side slide
    – Corner box
    – Nested corner box
    – Top expand
    – Corner morph
    – elastic
    – Bubble
    – Wave

    This tutorial + code snippet was created by Mary Lou from Codrops.

  • A Library for creating beautiful mobile shelves in Javascript (Facebook and Path style side menus). It allows great customization, and it has Flickr support. It is an independent library, and it is highly customizable. It also features user intent detection, disabled hyperextension, event hooks, and CSS3 powered animations with IE fallbacks.

  • A jQuery plugin for creating slick, app look-alike sliding menus for your mobile website with only one line of JavaScript. It allows your app or mobile website to portray two menus, one in each side of the screen, resembling popular apps like Facebook, and very handy if your creation has lots of information to display.

  • jPanelMenu is a jQuery plugin that creates a paneled-style menu (like the type seen in the mobile versions of Facebook and Google, as well as in many native iPhone applications). It creates a menu with minimal style, but you can change it as you like in order to make it fit your website.

  • A jQuery plugin for creating side menus and the easiest way for doing your menu a responsive element. You will be able to create multiple siders on both sides of your web to make responsive menus. Fill the siders normally, with existent content, remote content, or whatever you’d like.

  • Portamento is a jQuery plugin that makes it simple to add sliding or “floating” panel functionality to your web page. All that is needed is some simple CSS and one line of JavaScript. It works fine with floated and absolutely-positioned layouts, in all modern browsers and some not-so-modern ones too.

Leave a comment

This a test message in global notification
Your download will start shortly.

Done!

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Browse
Done

Thank You!

Your post has been received, and will be reviewed by a curator