Home > Menu & Navigation

Menu & Navigation

sideToggle : jQuery plugin for Toggling Elements Sideways

sideToggle : jQuery plugin for Toggling Elements Sideways

This is a small jQuery plugin that toggles elements sideways, rather than the up-and-down default of jQuery’s toggle. There are three versions available for use; one of them uses an extra Javascript library called Velocity.js that offers a performance gain over jQuery’s .animate(), but it likely won’t be necessary for …

Read More »

Hiraku.js : jQuery Offcanvas Menu Plugin

Hiraku.js : jQuery Offcanvas Menu Plugin

We made jQuery plugin called hiraku.js so that more people can use Offcanvas-menu functionality which is used in a CMS we make. Features: Not affected by the DOM structure. Enable to open both right and left side menu. Main canvas is not scrolled, while scrolling Offcanvas-menu. Easy to control the …

Read More »

CSS Only Togglable Fullscreen Side Navigation

CSS Only Togglable Fullscreen Side Navigation

A sidebar navigation that allows to show and hide a fullscreen menu using pure CSS/CSS3. How to use in HTML : <div class=”wrapper”> <input type=”checkbox” id=”menuToggler” class=”input-toggler” value=”1″ autofocus=”true”/> <label for=”menuToggler” id=”menuTogglerLabel” class=”menu-toggler” role=”button” aria-pressed=”false” aria-expanded=”false” aria-label=”Navigation button”> <span class=”menu-toggler__line”></span> <span class=”menu-toggler__line”></span> <span class=”menu-toggler__line”></span> </label> <nav id=”sidebar” class=”sidebar” role=”navigation” aria-labelledby=”menuTogglerLabel” …

Read More »

Ring/Circle Toggle Navigation Concept

Ring/Circle Toggle Navigation Concept

A ring navigation concept built with JavaScript and CSS that all the menu items are absolutely positioned in the circles when toggled. Code the ring navigation (HTML) <nav class=”top-right open”> <a class=”disc l1″> <div>Messages</div> </a> <a class=”disc l2″> <div>Photos</div> </a> <a class=”disc l3″> <div>Profile</div> </a> <a class=”disc l4″> <div>Likes</div> </a> …

Read More »

Basic Sidebar Navigation With Pure CSS

Basic Sidebar Navigation With Pure CSS

Pure css solution for off-canvas and navigation using plain HTML and CSS transitions and transforms. css.off-canvas by devslove.it Installation We recommend using a package manager to install this widget as a dependency of your project. Please read the docs of the respective package manager if you don’t know how to …

Read More »

Expanding Push Menu With Pure CSS

Expanding Push Menu With Pure CSS

Expanding menu is easy and pure css. Menu & Navigation An expanding hamburger menu system that morphs the toggle icon into a sidebar navigation while push the main content to the right. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est quisquam sit natus magni qui nemo rerum alias sunt. Nostrum incidunt …

Read More »

jQuery Responsive Squeezing Header Plugin

jQuery Responsive Squeezing Header Plugin

A jQuery plugin for squeezing animation effect your header on scroll down. Usage To make your header squeezable, simply call squeezingHeader() on your header element passing along all the contained elements’ final positions: var elementPositions = [ { element: '.header .title', mins: { fontSize: 10, height: 10 } }, { …

Read More »