codyhouse/responsive-sidebar-navigation

Stars
112
Rank 312,240 (Top 7 %)
Language
JavaScript
Created about 9 years ago
Updated over 5 years ago

codyhouse/responsive-sidebar-navigation

codyhouse

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

An easy-to-integrate side, vertical navigation, ideal for dashboards and admin areas.

Responsive Sidebar Navigation

An easy-to-integrate side, vertical navigation, ideal for dashboards and admin areas.

Article on CodyHouse

Dependencies

This experiment is built upon the CodyHouse Framework.

Make sure to include both the style.scss and util.js files of the framework.

Credits

Icons: Nucleo Library

Diagonal movement plugin: Vanilla JS plugin based on jQuery-menu-aim

codyhouse-framework

A lightweight front-end framework for building accessible, bespoke interfaces.

vertical-timeline

An easy to customize, responsive timeline.

page-scroll-effects

animated-headline

A collection of animated headlines

horizontal-timeline

An easy to customize, horizontal timeline powered by CSS and JavaScript.

image-comparison-slider

A draggable slider to quickly compare 2 images

schedule-template

A simple template that lets you display events on a timeline, as well as organize them in groups (week days, conference rooms etc…)

points-of-interest

A resource to highlight the points of interest of your products.

hero-slider

A full-width, responsive and easy to customise slideshow.

mega-dropdown

A responsive and easy to customise mega-dropdown component.

back-to-top

Back to top link to smoothly scroll back to the top of the page.

mega-site-navigation

A responsive navigation for mega sites

virgo-template

Virgo is a free HTML, CSS, JS template built using the CodyHouse Components and Framework.

auto-hiding-navigation

A simple navigation that auto-hides when the user scrolls down, and becomes visible when the user scrolls up.

faq-template

An easy to customize template for the FAQ section of your project, with the questions/answers grouped in categories to ease the navigation.

add-to-cart-interaction

A floating cart that slides in when the user decides to buy an item.

content-filter

A slide-in filter panel powered by CSS and jQuery.

stripe.com-navigation

A morphing dropdown that animates according to the size of its content.

multi-level-accordion-menu

A simple CSS accordion menu with support for sub level items.

dark-light-mode-switch

How to create a dark\light mode switch in CSS and Javascript

ink-transition-effect

An ink bleed transition effect, powered by CSS animations.

responsive-tabbed-navigation

A tabbed navigation with support for both horizontal and vertical menu positioning.

animated-transition-effects

A library of animated transition effects, powered by CSS Animations

360-degrees-product-viewer

A simple, interactive resource that can be used to provide a virtual tour of your product.

flashgrid

Lightweight CSS Grid System

login-signup-modal

A modal window to login/signup into your website

vertical-fixed-navigation

A side navigation which allows users to easily browse the page.

product-builder

style-guide-template

A customizable Style Guide template

stretchy-navigation

smart-fixed-navigation

A fixed navigation to access the menu at any time while experiencing your website

product-quick-view

A 'product quick view' modal window, animated using CSS3 and Velocity.js

products-comparison-table

A responsive table to compare and filter through multiple products.

codyframe

The intuitive CSS framework.

full-screen-pushing-navigation

A full page menu, that replaces the current content by pushing it off the screen.

breadcrumbs-and-multistep-indicator

3d-rotating-navigation

A 3D rotating navigation, powered by CSS transformations.

morphing-modal-window

A call-to-action button that animates and turns into a full-size modal window

fixed-backgrounds

Alternate fixed and scroll backgrounds

image-mask-effect

An immersive transition effect powered by image masks and CSS transforms.

nugget-template

Starting template for CodyHouse resources

pricing-tables

Simple responsive pricing tables

animated-page-transition

custom-google-map

An easy to customise google map

fixed-background-effect

expandable-image-gallery

An image that expands on click, going full-width and turning into a gallery.

slide-in-panel

A CSS3 and JavaScript powered slide-in panel, to quickly show side content, notifications or profile information.

mobile-app-introduction-template

A basic template to showcase the best features of your app

full-page-intro-and-navigation

An intro page with a full width background image, a bold animated menu and an iOS-like blurred effect behind the navigation

rounded-animated-navigation

An experimental full-screen navigation that expands within a circle.

reading-progress-indicator

side-shopping-cart

Animated side shopping cart

confirmation-popup

A simple responsive confirmation dialog box

parallax-hero-image

A full-width figure element, with floating images distributed in a 3D space

secondary-expandable-navigation

Secondary expandable navigation

sliding-panels-template

3d-folding-panel

secondary-fixed-navigation

A secondary navigation intended for users who want a quick overview of the page content, and be able to easily move from one section of the page to the other.

presentation-slideshow

product-tour

side-team-member-bio

Animated side team member biography.

cross-reference-table

A responsive cross reference table

full-screen-popout-navigation

A Fixed menu that drives users' attention to a couple of call-to-action buttons first, then let them explore the full-screen navigation

squeezebox-portfolio-template

animated-svg-hero-slider

animated-intro-section

contact-form

client-testimonials-carousel

A responsive carousel showcasing selected client testimonials

immersive-video-template

A full-screen video presentation, that is resized and animated to become the content of a mobile device.

radial-svg-slider

clipped-svg-slider

A simple slider, with morphing preview images animated using SVG properties.

secondary-sliding-navigation

Secondary menu that slides over the main navigation

3d-bold-navigation

expandable-project-presentation

A gallery of project preview images that expand on click to reveal the full case study.

advanced-search-form

animated-sign-up-flow

animated-page-transition-2

3d-items-quick-view

A simple 3D animation for your gallery items.

3d-curtain-template

A list of split blocks that reunite on scrolling, simulating a movement along the z-axis.

zoom-out-intro-effect

A full-width header image, animated using the CSS3 scale property to simulate a 3D zoom-out effect and reveal the main content of the page

3d-animated-mockup

A simple template to showcase your application features through a smooth 3d animation.

bouncy-content-filter

A space-saving content filter to switch from one category to the other in a fancy way

3d-portfolio-template

project-cards-template

vertical-fixed-navigation-2

quick-add-to-cart

pagination

A mobile-friendly pagination component

icons-filling-effect

An eye-catching filling effect for your icons, that can be used to make a simple page look cool and dynamic.

animated-svg-image-slider

animated-svg-icon

How animate an SVG icon using CSS and Snap.svg library.

product-preview-slider

responsive-newsletter-form

A minimal and responsive newsletter form with the addition of some subtle CSS3 animations to enrich the user experience.

codyframe-template-for-codrops

A website template built with CodyFrame

bouncy-navigation

A full-screen navigation, with floating menu items.

2-blocks-template

pointy-slider

codyhouse-vscode-snippets

CodyFrame Snippets for VSCode.

svg-modal-window

codyframe-gulp-starter-template

Gulp starter template for CodyFrame

codyhouse-wp-config

Configuration files for your WordPress theme