top-7-jquery-free-admin-templates

Recently we decided to make our templates jQuery-free. To support and explain our decision we published the article “Why We Removed jQuery from Our Templates?”. The article, in short, is saying that times of browser wartime has passed. So you can have all jQuery functionality using plain JavaScript. Plus the use of jQuery slows down the download of your app. We have tons of different reviews on our blog. We have the list of React admins, Vue templates, React Native Starters, a collection of online tools, component kits, open-source projects, frameworks, libraries, etc. So naturally, we apply the same logic here. Enjoy the list of admin dashboard templates without jQuery dependencies.

React, Angular, Vue and Bootstrap templates

In Flatlogic we create web & mobile application templates built with React, Vue, Angular and React Native to help you develop web & mobile apps faster. Go and check out yourself!

See our themes!

All the products represented here have high-quality designs, built with React, Vue or Angular, and have a wide variety of widgets, components, and UI elements. Even though we provide a short description for every item in the list, the best way to choose a template that suits you is to check out the demo and documentation.

Sing App Vue

Image source: https://flatlogic.com/templates/sing-app-vue/demo

This beautifully designed template is perfect for future scaling. It jampacked with all sorts of widgets, components, and plugins. You can check out navbar and sidebar color scheme customization and fixed or static navbar type in the demo. The template uses Bootstrap 4 and the latest version of Vue.js. A responsive layout is a guarantee that your future app will have a great look at a huge variety of devices. Sing App has an elegant design. It is a simple yet powerful tool to kickstart your application.

Demo

Documentation

Learn More

Falcon – Admin Dashboard

Image source: https://falcon-react.technext.it/dashboard-alt

One more admin template without jQuery dependency. Falcon developers used Prettier as a code formatter. As a result, you can have a consistent codebase. All pages are interactive, the template was built with React 16 using Babel and ES6. This admin template is rather new, and it was updated recently. With this template, you can create a perfect admin panel to manage your web app. The design is optimized for every device. The package includes the standard set of components and UI elements.

Demo

Learn More

React Material Admin

Image source: https://flatlogic.com/templates/react-material-admin-full/demo

Having plenty of features and components React Material Admin is a five-star React template relatively new to the market. This template is perfect for tracking and visualizing all sorts of data for business. It offers four color schemes with tons of details accent each other. You can check out the version integrated with Node.js and Postgress database. This solution is perfect for e-Commerce apps, it has built-in authentication and login methods, ready to be deployed on hosting, and has a modular architecture.

Demo

Documentation

Learn More

Angular Admin Dashboard by mdBootstrap

Image source: https://ng-admin.mdbootstrap.com/dashboards/v1

One more admin template that doesn’t use jQuery. It was replaced by plain TypeScript. On the demo you can see al sorts of dashboards, tables, profile pages, maps and a 404 page. This temple is very simple and minimalistic yet you can use it for building robust apps. If you decide Angular is a perfect framework for your application take a look at template by mdBootstrap.

Demo

Learn More

Vuestic

Image source: https://preview.vuejsadmin.com/item/vuestic

This admin dashboard was built using Webpack, Chart.js, Leaflet & amMap maps, and medium editor. It has a language switcher, pagination system, 6 types of chart style and progress bars. This admin dashboard template has lots of pre-integrated features, components and widgets required for a modern admin panel. Vuestic code is really easy to understand and it helps a web developer to start easy and cut the development time of all the essential pages. Template is suitable for complex Vue.js projects, it will help them shine in a short period of time.

Demo

Learn More

Apex Angular

Image source: https://pixinvent.com/apex-angular-4-bootstrap-admin-template/demo-1/dashboard/dashboard1

Another Angular Admin in our list of jQuery-free admin templates, offers good documentation, awesome design and high quality of code. With this template, you can easily create an interactive interface that looks pixel perfect on all possible devices. The package includes many beautifully designed pages such as user profile, FAQ, search, login, error and many more. This lightweight template has a developer-friendly code that helps you quickly bootstrap your project. The dashboard is highly customizable and it won’t be much trouble to adjust styles to your brand book.

Demo

Learn More

Egret – Angular Material Design Template

Image source: https://themeforest.net/item/egret-angular-4-material-design-admin-template/full_screen_preview/20161805

If you already spent hours trying to find a perfect admin dashboard template try to stop;) In this list, you can find Vue, React and Angular jQuery-free admin templates. And if you need an Angular template that follows a Google material guidelines Egret suits you just fine. Professional UI/UX design combined with an endless list of components, widgets, and pages will help you to develop your app faster than ever without the loss in quality. It doesn’t matter on which device you open the demo it looks great.

Demo

Learn More

You might also like these articles:

12-jquery-scroll-effects
Collection of free jQuery scroll effect examples.

Collection of free jQuery scroll effect code examples.

  1. CSS Scroll Effects
  2. jQuery Parallax


Author

  • Traf

Made with

  • HTML / CSS / JS

About a code

Scale Hero Section on Scroll

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Adam Kuhn

Made with

  • HTML (Haml) / CSS (SCSS) / JS

About a code

Scroll Distortion

Tornis.js GSAP to update SVG filter values on scroll.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, tornis.js, tweenmax.js

Author

  • Brian Haferkamp

Made with

  • HTML (Pug) / CSS (Sass) / JS

About a code

Unique Scrolling Presentation

This unique scrolling presentation uses CSS Grid and a little bit of JavaScript to change the fixed image as the user scrolls the page.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Recreatorus

Made with

  • HTML / CSS (SCSS) / JS

About a code

Scrolling Articles Card

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, smooth-scrollbar.js, overscroll.js

Author

  • Jason D’Oyley

Made with

  • HTML / CSS / JS

About a code

Zoom Hero Image On Scroll

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Joshua Ward

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

One Page Scrolly Thing

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Muhammed Erdem

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

Scroll List Animation

A smooth scroll animation example for listing. Made with smooth-scrollbar.js and overscroll plugin.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, smooth-scrollbar.js, overscroll.js

Author

  • Jesus

Made with

  • HTML / CSS (SCSS) / JS

About a code

Show Elements on Scroll

Using jQuery and SCSS to bring to the screen elements gradually.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Fabio Ottaviani

Made with

  • HTML / CSS (SCSS) / JS

About a code

Image Mask Reveal Animation

Scroll down effect in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Daniel Givens

Made with

  • HTML / CSS (SCSS) / JS

About a code

jQuery Scroll Effect for Text

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, tweenmax.js, smooth-scrollbar.js

Author

  • Nathan Taylor

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Momentum Scroll Fixed Element

Often fixed elements can feel a bit unnatural. I wanted to give a bit more weight to the floating object. I tried to capture the momentum feeling of natural browser scrolling. This also doesn’t interfere with the default page scroll so there is no ‘scroll jacking’ going on here.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Chris Coyier

Made with

  • HTML / CSS / JS

About a code

Smooth Page Scrolling in jQuery

You change the :focus style. But the fact that the blue box happens at all is very good for accessibility.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Nikolay Talanov

Made with

  • HTML / CSS (SCSS) / JS

About a code

Skewed One Page Scroll

Just scroll down.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

12-jquery-range-sliders
Collection of free jQuery range slider examples.

Collection of free jQuery range slider code examples.

  1. CSS Range Sliders


Author

  • LeFourbeFromage

Made with

  • HTML / CSS (Less) / JS

About a code

Range Slider with Dynamic Icons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js, jquery-ui.js

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS) / JS

About a code

Rubber Slider

Price range slider in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, jquery-ui.js, jquery.ui.touch-punch.js, tweenmax.js

Author

  • imchriskitchens

Made with

  • HTML / CSS / JS

About a code

HSL Preview (Range Slider)

Styling an input range slider with pure CSS. JS only to grab the value.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Sabine Robart

Made with

  • HTML / CSS (SCSS) / JS

About a code

Rounded Range Slider

Curved, circular, circle shaped range slider. Drag the handle, click on the position you want or directly type your number. UI design jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, roundslider.css, roundslider.js

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS) / JS

About a code

Smiley Rating Slider Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, jquery-ui.js, jquery.ui.touch-punch.js

Author

  • Veronica

Made with

  • HTML / CSS / JS

About a code

“How Satisfied Are You?”

Custom slider from scratch with jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Yahia Refaiea

Made with

  • HTML (Pug) / CSS (Stylus) / JS (Babel)

About a code

Reactions Range Animation using SVG

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Michael Wolthers Nielsen

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Range Slider Output

Simple demo of output for a range slider.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Mariusz Dabrowski

Made with

  • HTML / CSS (SCSS) / JS

About a code

Gear Slider

Custom range slider made using jQuery UI.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, jquery-ui.js

Author

  • Mikey Wills

Made with

  • HTML / CSS (SCSS) / JS

About a code

Range Slider with Feedback

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, rangeslider.js, underscore-min.js

Author

  • Andreas Storm

Made with

  • HTML (Pug) / CSS (Stylus) / JS (CoffeeScript)

About a code

Material Design Range Slider

Material design range slider in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, jquery-ui.min.js, jquery-ui.css

Author

  • Andreas Storm

Made with

  • HTML / CSS (Stylus) / JS (CoffeeScript)

About a code

Range

Range slider in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery-ui.css, jquery.js, jquery-ui.js

Collection of free jQuery modal/dialog window examples and plugins for advertisements, forms and a simple messages.

Collection of free jQuery modal/dialog window examples and plugins for advertisements, forms and a simple messages.

  1. CSS Modal Windows
  1. jQuery Modal/Dialog Examples
  2. jQuery Modal/Dialog Plugins

Author

  • evans

Made with

  • HTML (Pug) / CSS (Stylus) / JS

About a code

Modal

Sliding modal window made with jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • David Fitas

Made with

  • HTML / CSS / JS

About a code

Simple jQuery Modal

Simple modal window equipped with smooth CSS3 transitions. Commonly used for viewing annoyingly important content upon visiting a website.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Bryce Snyder

Made with

  • HTML / CSS (Stylus) / JS

About a code

jQuery Modal with Animation

Success and wrong modal with animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, jquery.js

Author

  • lefoy

Made with

  • HTML / CSS (SCSS) / JS

About a code

Animated Modal Box

Animated fullscreen modal box.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Michael Smith

Made with

  • HTML / CSS (SCSS) / JS

About a code

Swing Out Modal

Fun little modal concept in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css, jquery.js

Author

  • LegoMushroom

Made with

  • HTML / CSS (Stylus) / JS (CoffeeScript)

About a code

Modal Window Destroy Concept

A small experiment on how to blow any HTML element.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, howler.js, html2canvas.js

Author

  • Tey Tag

Made with

  • HTML / CSS (SCSS) / JS

About a code

Modal Animation Physics

Messing around with keyframe/transition physics for a modal. Mostly focused on the timing between the overlay, modal container, and modal content to try to make the whole event look more organic.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Demo image: jQuery Avgrund

Made by

  • Dmitri Voronianski

Github activity

  • 1831 stars
  • 111 watchers

About the plugin

Avgrund

Avgrund is a jQuery plugin for your modal boxes and popups. It uses new concept showing depth between popup and page. It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations.

Demo image: iziModal

Made by

  • Marcelo Dolce

Github activity

  • 1678 stars
  • 81 watchers

About the plugin

iziModal

Elegant, responsive, flexible and lightweight modal plugin with jQuery.

Demo image: jQuery Modal

Made by

  • Kyle Fox

Github activity

  • 1549 stars
  • 83 watchers

About the plugin

jQuery Modal

A simple & lightweight method of displaying modal windows with jQuery.

Demo image: Animated Modal

Made by

  • João Pereira

Github activity

  • 842 stars
  • 43 watchers

About the plugin

Animated Modal

animatedModal.js is a jQuery plugin to create a fullscreen modal with CSS3 transitions. You can use the transitions from animate.css or create your own transitions.

Demo image: jQuery Popup Overlay

Made by

  • Vast Engineering

Github activity

  • 439 stars
  • 71 watchers

About the plugin

jQuery Popup Overlay

jQuery plugin for responsive and accessible modal windows and tooltips.

Demo image: bPopup

Made by

  • dinbror

Github activity

  • 427 stars
  • 48 watchers

About the plugin

bPopup

bPopup is a lightweight jQuery modal popup plugin (only 1.34KB gzipped). It doesn’t create or style your popup but provides you with all the logic like centering, modal overlay, events and more. It gives you a lot of opportunities to customize so it will fit your needs.

Demo image: OmniWindow

Made by

  • Alexander Rudenka

Github activity

  • 112 stars
  • 8 watchers

About the plugin

OmniWindow

OmniWindow – extremely customizable modal plugin for jQuery.

Demo image: Zebra_Dialog

Made by

  • Stefan Gabos

Github activity

  • 98 stars
  • 22 watchers

About the plugin

Zebra_Dialog

A small, compact, and highly configurable jQuery plugin for creating modal dialog boxes.

Demo image: jquery-plainModal

Made by

  • anseki

Github activity

  • 70 stars
  • 4 watchers

About the plugin

jquery-plainModal

The simple jQuery Plugin for fully customizable modal windows.

Demo image: Accessible Modal Dialog

Made by

  • Scott O’Hara

Github activity

  • 60 stars
  • 4 watchers

About the plugin

Accessible Modal Dialog

jQuery a11y modal window.

Demo image: SweetModal

Made by

  • Adepto.as

Github activity

  • 56 stars
  • 10 watchers

About the plugin

SweetModal

Sweet, easy and powerful modals using jQuery. Replace alert(), confirm(), prompt() and many plugins with style and elegance.

Demo image: Modal

Made by

  • Michał Buczko

Github activity

  • 55 stars
  • 4 watchers

About the plugin

Modal

jQuery plugin to create modal windows.

Demo image: Focus

Made by

  • Elkfox

Github activity

  • 4 stars
  • 4 watchers

About the plugin

Focus

A minimal popup, modal, notification, overlay, drawer and dialogue window plugin.

Demo image: Modal Box

Made by

  • WebGadgets

Github activity

  • 0 stars
  • 1 watchers

About the plugin

Modal Box

The plugin Modal Box helps you to create a window that pops up in front of other elements on your page. It can be used for advertisements, subscription form, uploading forms, login/register forms or for displaying a simple message to the visitor.

50-jquery-menus
Collection of free jQuery menu examples and plugins.

Collection of free jQuery menu examples and plugins.

  1. jQuery Context Menus
  2. jQuery Fullscreen Menus
  3. jQuery Mega Menus
  4. jQuery Off-Canvas Menus
  5. jQuery Sliding Menus
  6. jQuery Scrolling Menus
  7. React Menus
  8. CSS Menus
  1. jQuery Menu Examples
  2. jQuery Menu Plugins

Author

  • Joshua Ward

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

One Page Scrolly Thing

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Shosuke Doi

Made with

  • HTML / CSS / JS

About a code

Mobile Nav Bar

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • creme

Made with

  • HTML / CSS (SCSS) / JS

About a code

Uber-like Navigation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, tweenmax.js

Author

  • Jessica Valeska da Silva

Made with

  • HTML / CSS (SCSS) / JS

About a code

Responsive Menu Scroll Left

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Author

  • Leon Heess

Made with

  • HTML / CSS / JS

About a code

Droplet Menu Animation

Droplet scroll animation for the hamburger menu in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Dejan Babić

Made with

  • HTML / CSS (SCSS) / JS

About a code

Menu with Morphing Shapes

jQuery menu with morphing shapes.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, tweenmax.js, morphsvgplugin.js

Author

  • Yiting Liu

Made with

  • HTML / CSS (SCSS) / JS

About a code

Menu

Horizontal jQuery menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Tobias Glaus

Made with

  • HTML / CSS (SCSS) / JS

About a code

Navigation with Scrolling

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Jon Wilcox

Made with

  • HTML / CSS (Less) / JS

About a code

Expanding and Collapsing Hamburger Menu

Experimenting with making the menu items themselves collapse into the bars of the hamburger menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Made with

  • HTML / CSS / JS

About a code

Hamburger Menu

CSS and jQuery hamburger menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Giorgio Acquati

Made with

  • HTML / CSS (SCSS) / JS

About a code

Navigation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Dejan Babić

Made with

  • HTML / CSS (SCSS) / JS

About a code

Mobile Navigation

Mobile navigation animation using GSAP.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, tweenmax.js, morphsvgplugin.js

Author

  • Praveen Kumar Gorakala

Made with

  • HTML / CSS (SCSS) / JS

About a code

Radial Menu

Radial menu – creator visons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: bootstrap.css, jquery.js, font-awesome.js

Author

  • Jordan

Made with

  • HTML / CSS / JS

About a code

Side Menu Animation

Side menu animation in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Aaron Awad

Made with

  • HTML / CSS / JS

About a code

Multi-level Side Nav Menu

This is a multi-level side navigation pattern with hover and push. Hovering over the menu will reveal its lables and clicking the hamburger icon pins the menu open.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css, jquery.js

Author

  • Praveen Bisht

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

Slide Out Navigation Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Dronca Raul

Made with

  • HTML / CSS (SCSS) / JS

About a code

Menu Interaction

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, feather.js

Author

  • Aaron Taylor

Made with

  • HTML / CSS (SCSS) / JS

About a code

Burger Menu

This is a burger menu for an upcoming project I am working on. I have tried to focus on the animations to give that polished feel when you open the menu item.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Dogacan

Made with

  • HTML (Pug) / CSS (Sass) / JS

About a code

Mobile Dropdown Menu

Mobile dropdown menu example with keyframe animations and transitions.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Ryan Mulligan

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

Off Canvas Mobile Submenu

An experimentation that sets all submenus off screen so that they can be toggled in and out of view when their parent arrow elements are clicked.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Tim Normington

Made with

  • HTML / CSS (SCSS) / JS

About a code

Diagonal Mega Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css, jquery.js, jquery-ui.js, tweenmax.js

Author

  • Alberto

Made with

  • HTML / CSS / JS

About a code

Multi-Device Scrolling Menu

A simple responsive horizontal menu ready for any device. For the sample only the background colour will change between countries.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, jquery-ui.js

Author

  • James Mejia

Made with

  • HTML / CSS (SCSS) / JS

About a code

Responsive Mega Dropdown

Original problem was having to create a mega dropdown that was responsive. The design required each column to have a border and have chunks of links inside of that. This is a mobile-first solution that gives you markup that makes sense for mobile/desktop using data attributes.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: ionicons.css, jquery.js, enquire.js

Author

  • J Scott Smith

Made with

  • HTML / CSS (SCSS) / JS

About a code

Sidebar Menu Concept

Sidebar menu that pushes content aside in 3D space. Still prettifying things.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Timofey

Made with

  • HTML / CSS (SCSS) / JS

About a code

Dota 2 Wheel Chat

With this module, you can create wheel menu, like such in Dota 2 game. Press left mouse button, to see it. Choose one of menu items, to say something to your teammates!

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, wheel-menu.js

Author

  • Andrey Pokrovskiy

Made with

  • HTML / CSS (Less) / JS

About a code

Circular Layered Menu

Circular, vinyl-like menu with explanatory label that pop when icons are hovered.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css, jquery.js, tweenmax.js

Author

  • Chrysto

Made with

  • HTML / CSS / JS

About a code

Lastik Menu

Simple lava-lamp like horizontal menu, using jQuery and Tweenmax.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, tweenmax.js

Demo image: Hiraku.js

Github activity

  • 65 stars
  • 12 watchers

About the plugin

Hiraku.js

Hiraku.js – jQuery offcanvas menu plugin.

Demo image: Sidebar Menu

Made by

  • huang.xinghui

Github activity

  • 42 stars
  • 4 watchers

About the plugin

Sidebar Menu

Sidebar menu jQuery component base on AdminLTE.

Demo image: Slide And Swipe Menu

Github activity

  • 96 stars
  • 12 watchers

About the plugin

Slide And Swipe Menu

A sliding swipe menu that works with touchSwipe library.

Demo image: Drawer

Made by

  • Yasuyuki Enomoto

Github activity

  • 477 stars
  • 29 watchers

About the plugin

Drawer

Flexible drawer menu using jQuery, iScroll and CSS.

Demo image: Slinky

Github activity

  • 430 stars
  • 20 watchers

About the plugin

Slinky

A light-weight, responsive, mobile-like navigation menu plugin.

Demo image: Tendina

Made by

  • Ivan Prignano

Github activity

  • 139 stars
  • 15 watchers

About the plugin

Tendina

Tendina is a simple jQuery plugin that helps you build dynamic, interactive side-menus in seconds.

Demo image: Bootstrap Submenu

Made by

  • Vasilii Artemchuk

Github activity

  • 343 stars
  • 40 watchers

About the plugin

Bootstrap Submenu

Bootstrap sub-menus.

Demo image: stickyNavbar.js

Github activity

  • 278 stars
  • 17 watchers

About the plugin

stickyNavbar.js

StickyNavbar.js: fancy sticky navigation jQuery plugin with smart anchor links highlighting.

Demo image: Box Lid Menu

Made by

  • James Lim

Github activity

  • 43 stars
  • 9 watchers

About the plugin

Box Lid Menu

This jQuery plugin creates the box lid effect for navigation menus.

Demo image: stickUp

Github activity

  • 1531 stars
  • 100 watchers

About the plugin

stickUp

StickUp a jQuery Plugin for sticky navigation menus.

Features

  • simple integration
  • the “one pager”
Demo image: scrollNav

Github activity

  • 394 stars
  • 25 watchers

About the plugin

scrollNav

A jQuery plugin for building a scrolling navigation menu.

Demo image: bigSlide.js

Github activity

  • 392 stars
  • 19 watchers

About the plugin

bigSlide.js

bigSlide is a teeny tiny (~1kb compressed) jQuery plugin for creating off-screen slide panel navigation.

Demo image: offCanvasMenu

Github activity

  • 150 stars
  • 13 watchers

About the plugin

offCanvasMenu

offCanvasMenu is a jQuery/Zepto plugin that provides an easy way to implement an off-canvas toggling menu, a navigation metaphor made popular by mobile applications.

Demo image: Metismenu

Made by

  • Osman Nuri Okumuş

Github activity

  • 1508 stars
  • 106 watchers

About the plugin

Metismenu

A jQuery menu plugin.

Demo image: jQuery Superfish Dropdown Menu Plugin

Github activity

  • 856 stars
  • 84 watchers

About the plugin

jQuery Superfish Dropdown Menu Plugin

Superfish is a jQuery plugin that adds usability enhancements to existing multi-level drop-down menus.

Demo image: SlickNav

Github activity

  • 824 stars
  • 66 watchers

About the plugin

SlickNav

Responsive mobile menu jQuery plugin.

Demo image: SmartMenus

Github activity

  • 478 stars
  • 51 watchers

About the plugin

SmartMenus

Advanced jQuery website menu plugin. Mobile first, responsive and accessible list-based website menus that work on all devices.

Demo image: SlimMenu

Github activity

  • 299 stars
  • 34 watchers

About the plugin

SlimMenu

SlimMenu is a lightweight jQuery plugin, which is made to create responsive and multi-level navigation menus on the fly.

Demo image: jQuery.Dropotron

Github activity

  • 123 stars
  • 15 watchers

About the plugin

jQuery.Dropotron

jquery.dropotron: multilevel dropdown menus for jQuery.

Demo image: Sidr

Made by

  • Alberto Varela

Github activity

  • 2921 stars
  • 154 watchers

About the plugin

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 and fallbacks into jQuery.animate when they are not supported.

Demo image: Fixed Table of Contents Drop-Down Menu jQuery Plugin

Made by

  • Louis Lazaris

Github activity

  • 53 stars
  • 0 watchers

About the plugin

Fixed Table of Contents Drop-Down Menu jQuery Plugin

A fixed table of contents drop-down menu jQuery plugin. Just change the markup to add more depth to the menus. The script should automatically recognize deeper menus, as long as you have the corresponding sections in the content area.

Demo image: jPanelMenu

Made by

  • Anthony Colangelo

Github activity

  • 956 stars
  • 86 watchers

About the plugin

jPanelMenu

A jQuery plugin that creates a paneled-style menu.

Demo image: visualNav

Github activity

  • 68 stars
  • 8 watchers

About the plugin

visualNav

A jQuery plugin that modifies a navigation menu to highlight/change when the menu’s target smooth scrolls into view.

17-jquery-off-canvas-menus
Collection of free jQuery off-canvas menu examples and plugins.

Collection of free jQuery off-canvas menu examples and plugins.

  1. jQuery Menus
  2. jQuery Context Menus
  3. jQuery Fullscreen Menus
  4. jQuery Mega Menus
  5. jQuery Scrolling Menus
  6. React Menus
  7. CSS Menus
  1. jQuery Off-Canvas Menu Examples
  2. jQuery Off-Canvas Menu Plugins

Author

  • Vasileios Mitsaras

Made with

  • HTML / CSS (SCSS) / JS

About a code

Full Width Off-Canvas

Left and right full-width off-canvas menus.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: js-offcanvas.css, jquery.js

Author

  • Islam Ibakaev

Made with

  • HTML / CSS (SCSS) / JS

About a code

Portfolio Page with Animations

Super awesome portfolio with off-canvas menu and a lot of animations.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, jquery.js, tweenmax.js

Author

  • Caleb Varoga

Made with

  • HTML / CSS / JS

About a code

Full Page Off-Canvas Navigation

An example of how to build a full page navigation that exists off of the screen canvas, sliding into view when clicking the menu option. Added spice with a changing background color depending on navigation item hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Author

  • ammit

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

Medium Like Off-Canvas Menu

Minimal Medium styled off-canvas slide in menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Author

  • Devilish Alchemist

Made with

  • HTML / CSS (SCSS) / JS

About a code

Offcanvas Sidebar Menu with a Twist

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Author

  • Mark Murray

Made with

  • HTML / CSS (SCSS) / JS

About a code

Off Canvas Menu

Little off canvas animated menu in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Dan Malarkey

Made with

  • HTML / CSS (Less) / JS

About a code

Off Canvas Nav

Nice little off canvas nav prototyping.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Author

  • Rémi Lacorne

Made with

  • HTML / CSS (SCSS) / JS

About a code

Off Canvas Nav

The toggle is the green bar on the left. It transforms into an overlay – Click on it to close the menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Nicholas M. Smith

Made with

  • HTML / CSS (SCSS) / JS

About a code

Off Canvas Menu

Another off canvas menu using the checkbox hack to active mobile navigation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Nicholas Cerminara

Made with

  • HTML / CSS / JS

About a code

Simple Off Canvas Menu

Simple off canvas menu with CSS3 transitions and translates and little jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, font-awesome.css, jquery.js

Author

  • Chris Coleman

Made with

  • HTML / CSS (SCSS) / JS

About a code

Responsive Off-Canvas Navigation

Just a simple off-canvas navigation with a few options and no annoying styles to override.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Miguel Jiménez

Made with

  • HTML / CSS / JS

About a code

jQuery.SecretNav

Push menu plugin that slides out an off-canvas navigation from the edge of the screen.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Made with

  • HTML / CSS / JS

About a code

Sliiide

The easiest way to create a sliding menu with jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Made with

  • HTML / CSS / JS

About a code

scotchPanels.js is a jQuery plugin for easily creating off canvas menus, navigations, and other panel types such as images, videos, and iframes. Scotch Panels are featured-packed and have a ton of different options for every skill-level to tweak and implement into almost any project.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Made with

  • HTML / CSS / JS

About a code

Slidebars

Slidebars is a jQuery Framework for Off-Canvas Menus and Sidebars into your website or web app. Version 2.0 is a complete rewrite which features clean and discreet markup, permits an unlimited number of off-canvas instances on any side and is equipped with a full API, callbacks and events for ultimate control.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Made with

  • HTML / CSS / JS

About a code

fly_sidemenu

Recreate an Airbnb iOS7 App Menu Animation using CSS3 and jQuery.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Momcilo Dzunic

Made with

  • HTML / CSS / JS

About a code

Multi Level Push Menu

Multi-level push menu is cross-browser compatible jQuery plug-in allowing endless nesting of navigation elements.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

8-jquery-mega-menus
Collection of free jQuery mega menu examples and plugins.

Collection of free jQuery mega menu examples and plugins.

  1. jQuery Menus
  2. jQuery Context Menus
  3. jQuery Fullscreen Menus
  4. jQuery Off-Canvas Menus
  5. jQuery Scrolling Menus
  6. React Menus
  7. CSS Menus
  1. jQuery Mega Menu Examples
  2. jQuery Mega Menu Plugins

Author

  • Jacob Lett

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Mega Dropdown Menu Navbar

Mega Dropdown Menu Navbar – Bootstrap 4 code snippet example demo.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, jquery.js, bootstrap-4-latest.js

Author

  • Mike Torosian

Made with

  • HTML / CSS / JS

About a code

Flexy Mega Menu

I saw a gif of this style menu on Scout’s page on Dribbble and decided to take a shot at it, I thought it was pretty cool to add some subtle animation to the active menu and I also wanted to use flexbox a bit to help lay this out.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • MAHESH AMBURE

Made with

  • HTML / CSS / JS

About a code

Responsive Mega menu with Logo

Responsive mega menu with logo in HTML, CSS and jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Martin Stanek

Made with

  • HTML / CSS (Less) / JS

About a code

Responsive Bootstrap Mega Menu

With very little effort, you can implement your own Bootstrap mega menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, bootstrap-dropmenu.css, bootstrap.js, holder.js, jquery.js

Author

  • Arjun Amgain

Made with

  • HTML / CSS / JS

About a code

Responsive Mega Menu

Responsive mega menu with blog, image and drop down.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: animate.css, bootstrap.css, jquery.js

Author

  • samir alley

Made with

  • HTML / CSS / JS

About a code

Responsive Mega Menu

Responsive mega navigation in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Made with

  • HTML / CSS / JS

About a code

hs Mega Menu – jQuery Plugin

hs Menu is a easy to use mega menu plugin that helps you create modern navigation system with amazing features.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Made with

  • HTML / CSS / JS

About a code

jQuery-menu-aim

jQuery plugin to fire events when user’s cursor aims at particular dropdown menu items. For making responsive mega dropdowns like Amazon’s.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, jquery.js, bootstrap.js

11-jquery-context-menus

Collection of free jQuery context menus examples and plugins.

  1. jQuery Menus
  2. jQuery Fullscreen Menus
  3. React Menus
  4. CSS Menus
  1. jQuery Context Menu Examples
  2. jQuery Context Menu Plugins

About a code

ContextMenu

A simple context menu using jQuery & Bootstrap.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: bootstrap.css, jquery.js, bootstrap.js

About a code

Context Menu Grid

Material context menu grid.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • James Michael

About a code

UI Experiment — Context Menu

Context menu in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Simon Goellner

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

Awesome Context Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Akshay Nair

About a code

Custom Context Menu

It’s is a very cool way of providing custom options in a website.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

About a code

Right-click context menu

A simple custom right-click menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Deepak Kamat

About a code

Social-Share Context Menu

Right-click to quickly access a context menu with share buttons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css, jquery.js

Author

  • adobewordpress

About a code

Right Click Menu Context

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css, jquery.js

About a code

jQuery Context Menu Plugin & Polyfill

The contextMenu plugin was designed for web applications in need of menus on a possibly large amount of objects.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

About a code

jquery.ui-contextmenu

jQuery plugin that turns a jQueryUI menu widget into a context menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery-ui.js

About a code

A Simple Good Looking Context Menu, for jQuery

Yes, there are loads of context menu plugins already. But they require a fair amount of work to make them look good. This one is easy to use, small, and looks good.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js