Responsive Full Width Tabs

A full width tab component with some example media queries for adjusting the icons of the tabs and the content layout. The main idea is to show only icons for the mobile view and allow the text to appear when there’s enough space. The content columns and the containing media boxes have three different layouts.

Continue reading Responsive Full Width Tabs

Responsive Tab Content Slider

This Blueprint is a simple jQuery content slider. It has a sliding area for content and a tab-like navigation at the bottom. The slider is fluid, meaning that it will adjust to the parent’s container width and height. A couple of media queries show how to minimalise the look by just leaving icons for the navigation when the screen is very small. The content area will become scrollable if there isn’t enough space available. Every list item is a slide and and it has a corresponding link element in the navigation.

Continue reading Responsive Tab Content Slider

Easy Responsive Tabs to Accordion

Easy responsive tabs – is a lightweight jQuery plugin which optimizes normal horizontal or vertical tabs to accordion on multi devices like: web, tablets, Mobile (IPad & IPhone). This plugin adapts the screen size and changes its action accordingly.

Continue reading Easy Responsive Tabs to Accordion

Multi-Level Accordion Menu

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

Today’s resource is a handy accordion menu with support for groups/subitems. It works with CSS only, using the :checked pseudo-class selector on the checkboxes input elements. However we included a version with jQuery as well, in case you prefer a subtle animation compared to the instant default effect. Your call!

Continue reading Multi-Level Accordion Menu

ScrollTrigger – Scroll Based Animations with Ease

Triggers classes on html elements based on the scroll position. It makes use of requestAnimationFrame so it doesn’t jack the users scroll, that way the user / browser keeps their original scroll behaviour.

Continue reading ScrollTrigger – Scroll Based Animations with Ease