Responsive Sidebar Navigation

Building responsive navigations for mega sites is never an easy task. If you’re working on an admin panel, chances are you’ll need to design and develop a vertical menu, with plenty of sub-categories. That’s why we decided to share today’s snippet! Our Sidebar navigation can make your life easier by providing a starting, simple template for your next project 😉

Continue reading Responsive Sidebar Navigation

Add To Cart Interaction

We’re used to different patterns when it comes to the “add to cart” process. The basic idea behind this pattern is to notify the user that an item has been added to the cart, and provide her/him with a link to proceed to the checkout.

Continue reading Add To Cart Interaction

Product Builder

A customizable and responsive product builder for your online store. Product builders are useful shopping tools, that allow potential customers to “build” an ideal version of a product by combining different options. At the end of this process the user is generally given an action to perform: save the build, share it or buy the product directly.

Continue reading Product Builder

Parallaxie Easiest, Responsive and Customizable Parallax jQuery Plugin

Parallaxie is a jQuery plugin to create parallax effects on your websites or templates. It is very lightweight to download and rendering by your browser.

Continue reading Parallaxie Easiest, Responsive and Customizable Parallax jQuery Plugin

Sliding Hover Transition

I want to create a hover transition that could be used for image links. A good hover effect can save space on showing more information until hover, while also creating an enticing and interesting effect. The diagonal effect is achieved through positioning a triangle attached to a long rectangle at the right of the image out of sight and transitioning it left through the image so it looks like it is filling up diagonally. This is a CSS only effect.

Continue reading Sliding Hover Transition

CSS3 Parallax scrolling slider

Haven’t you noticed that there have been appeared a lot of websites with the effect of parallax effect? This is optical effect (displacement or difference in the apparent position of an object viewed along two different lines of sight). Basically, this is when we can see several shifting layers during some action. And today, we will apply this effect for vertical slider. We won’t use javascript, but only pure css3 properties.”

Continue reading CSS3 Parallax scrolling slider

Flexible Slide-to-top Accordion

we’ll be creating a simple responsive accordion that, when opened, will slide to the top of the viewport and reveal the content by fading it in. The idea is to avoid that the user has to scroll the content area into place. We’ll also add some nice CSS3 transitions for the arrow to appear and to rotate when we click on an item. The accordion will be flexible, meaning that it will have a liquid width adjusting to the screen size.

Continue reading Flexible Slide-to-top Accordion

Multi-level slide and accordion effect for JQuery

{:navgoco} is a simple JQuery plugin which turns a nested unordered list of links into a beautiful vertical multi-level slide navigation, with ability to preserve expanded submenus between sessions by using cookies and optionally act as an accordion menu.

Continue reading Multi-level slide and accordion effect for JQuery

HTML5 and CSS3 accord effect

While reading more about HTML5 & CSS3 I just found an amazing css3 button styling. This time I wanted to do something which I was doing from past 2 years using JQuery. In this tutorial I am going to teach you how to make a toggle slideDown and slideUp function using CSS3 and HTML5.

Continue reading HTML5 and CSS3 accord effect