Arrow Navigation Styles
In Playground by Manoela Ilic
Some inspiration for arrow navigation styles and hover effects using SVG icons for the arrows, and CSS transitions and animations for the effects.
#navigation
Dot Navigation Styles
In Playground by Manoela Ilic
Today we’d like to share some subtle effects and styles for simple dot navigation with you. These styles could, for example, be used for a page scroll navigation or a thumbnail preview, in a vertical or horizontal fashion.
Perspective Page View Navigation
In Playground by Manoela Ilic
Some effects for a perspective page view navigation where the page itself gets pushed away in 3D to reveal a menu or other items. This navigation idea is seen in mobile app design and we wanted to explore some more effects.
Elastic Stack: Elastic Dragging Interaction
In Playground by Manoela Ilic
ElastiStack is a little script that let’s you navigate through a stack of items by dragging away the first one. It comes with an elastic touch meaning that when dragging the top-most item, the other ones will follow as if they were connected elastically. When reaching a certain distance, the dragged item will release itself and the next item will pop out.
Sliding Horizontal Layout
In Playground by Manoela Ilic
A slider-like layout where the neighboring sections are positioned horizontally next to each other.
Transitions for Off-Canvas Navigations
In Playground by Manoela Ilic
Some inspiration for transition effects for off-canvas navigations.
Building a Circular Navigation with CSS Transforms
In Tutorials by Sara Soueidan
A tutorial on how to create a circular navigation using CSS transforms.
Fixed Background Scrolling Layout
In Blueprints by Manoela Ilic
A fixed background image scrolling layout with 100% height panels and smooth scrolling.
Full Width Image Slider
In Blueprints by Manoela Ilic
A very simple 100% width slider that scales down to mobile.
Creative Layouts and Interactions in Web Design
In Articles by Carrie Cousins
Creative design that differ from the usual layouts can be quite difficult to imagine and execute but when done well, they can make some of the most interesting and engaging websites.
CSS-Only Responsive Layout with Smooth Transitions
In Tutorials by Manoela Ilic
A tutorial on how to create a 100% width and height smooth scrolling layout with CSS only. Using a radio button navigation and sibling combinators we will trigger transitions to the respective content panels, creating a “smooth scrolling” effect.
Responsive Horizontal Layout
In Tutorials by Manoela Ilic
In this tutorial we’ll create a horizontal website layout with individually scrollable content panels. We’ll change the layout for smaller screens, making it responsive.
Examples of Fresh Effects in Web Design
In Articles by Manoela Ilic
Having some fresh and maybe even unexpected effects on a website, can juice up the experience for the user. Be it a whole new and experimental way of navigating through the website or just a tiny surprising hover effect – fresh effects can spice up your design and bring some life to it.
Portfolio Image Navigation with jQuery
In Tutorials by Marcin Dziewulski
Today we want to create a portfolio image navigation template with jQuery. The idea is to show some portfolio items in a grouped fashion and navigate through them in all 2D ways (horizontal/vertical). Either the arrows or the little boxes below the current image can be used in order to navigate.
Animated Text and Icon Menu with jQuery
In Tutorials by Manoela Ilic
Today we want to show you how to create a slick menu with a nice animation feature on hover. The idea is to make some elements slide out, change and animate the background color of the item and then slide the elements back in with a different color.
Sliding Background Image Menu with jQuery
In Playground by Manoela Ilic
Today we want to share another jQuery menu with you. This menu will have several panels, each one corresponding to a different background image that will show on all panels when we hover over a panel label. Also, a submenu will slide out from the bottom. This menu comes with some configuration possibilities, such as size of the image, the hover effect and custom default states.
Grid Navigation Effects with jQuery
In Playground by Manoela Ilic
Today we want to share some neat grid navigation effects using jQuery. In our examples we will show you ten ways how to navigate through a set of thumbnails. We’ll take a look at some of the possibilities and how to apply the effect.
Sliding Letters with jQuery
In Playground by Manoela Ilic
Today we have a neat little effect for you. We want to bring some life to the standard hover effect by playing around with the letters in an anchor word. […]