Home > Menu & Navigation

Menu & Navigation

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 »

booNavigation – jQuery Mobile-Friendly Mega Menu plugin

booNavigation - jQuery Mobile-Friendly Mega Menu plugin

booNavigation jQuery plugin is a smooth mobile-friendly and dynamic jQuery navigation menu plugin with a three column drop down. Plugin Usage $('#yourNavigationCustomId').booNavigation({ slideSpeed: 600, fadeSpeed: 400, delay: 500 }); Options slideSpeed: 200 / 400 / 600 / ‘slow’ / ‘fast’ This will be the speed to open the drop down with a …

Read More »