JavaScript & CSS off-canvas menu
Off-canvas Push Menu In Pure HTML / CSS
A pure Html / CSS solution used to create an App style off-canvas push menu for site navigation using CSS3 :target selector.
Pure CSS Fold Out Navigation Menu
A HTML / CSS only navigation system that uses :checked selector to toggle an off-screen menu with a hamburger button.
HTML / CSS Only Off-canvas Slide and Push Navigation
A modern, mobile-friendly navigation solution to create an off-canvas slide or push menu using pure CSS / CSS3 and plain html.
CSS Only Off-canvas Menu with Shrinking Main Content
Yet another pure CSS off-canvas menu concept that reveals an 0ff-screen navigation menu while shrinking the main content.
Sliding Drawer Navigation with JavaScript and CSS3
A JavaScript based drawer navigation that slides out from the left side of the webpage with a CSS3 based animation when toggled, similar to the famous app off-canvas menu. How to use it: Load the required stylesheet files in the head section of your web page. <link rel=”stylesheet” href=”dd-menu.css”> <link rel=”stylesheet” href=”dd-menu-items.css”> <link rel=”stylesheet” href=”theme-standard.css”>… Read More »
Animated Sidebar Navigation with JavaScript and CSS
A JavaScript & CSS based sidebar interaction concept for easily creating an off-canvas sidebar navigation that you can hide/show based on user actions.
Pure Html / CSS Off-canvas Mobile Menu
A mobile-friendly responsive navigation which turns a horizontal menu into an off-canvas side menu using pure CSS and html checkbox & label tricks.
Pure CSS Off-canvas Sidebar Navigation
Just another pure CSS site navigation that slides out an 0ff-screen sidebar menu when you hover over the menu trigger button.
Off-canvas Side Nav with Adaptive Main Content
An off-canvas side navigation system that shrinks the main content to fit within the screen when the side nav is opened.