Category: Navigation

Categories

CSS / 3 Jul 2013

Create a Hidden Sliding Navigation Bar Using CSS3 Transitions

Typically web developers have been using JavaScript to create dynamic page animations. Hidden menus and subnavigation are just a couple examples for how these techniques would be used on a live website. Thanks to the addition of CSS3 transitions we can now mimic these animations, with no JavaScript in sight.

In this tutorial I want to demonstrate how to build an inner hidden content bar which slides down when hovering. You can place this into your header, footer, or even somewhere inside the page content. It is a very flexible technique which does not require a whole lot of time to get working. Plus all the modern web browsers will support CSS3 transition effects.

Navigation / 26 Apr 2013

To Infinite Scroll or Not to Infinite Scroll: Where We’ve Come So Far

Today we’re delving into the most relevant facts on how infinite scrolling turned out to become such an acclaimed technique all over the web, and why, despite its popularity, it’s not yet all that widely adopted in web design.

This feature appeared at a point in the history of the Internet when the amount of information to be presented on web pages increased, and the speed of connections allowed the reader to access and transfer information at greater rates. The question of infinite scrolling on web pages is one of the aspects involved in the user experience design, and isn’t as cut-and-dry as you might think.

JavaScript / 20 Mar 2013

Simple Steps for Creating a Fixed Navigation Bar

When designing a navigation system for your website it is important to consider dynamic alterations for handling mobile support and responsive designs. But another systematic approach is to keep your visitors in full control throughout the entire viewing process. This often requires a quick-to-access menu or dropdown area for pulling links to other webpages.

In this tutorial I’m going to be building a top navigation bar which appears only after moving beyond the header navigation. This effect is great if you have a few pages which are most commonly accessed by visitors. The sticky navbar will stay fixed at the top of the screen and only disappear when re-entering the header nav zone. To get an idea of what we will be making check out my live demo example after the jump!

CSS / 29 Nov 2012

Swap Your Page’s Background Image on Navigation Hover

I love the challenge of building something with CSS that uses one item to trigger another. It can get pretty tricky to wrap your mind around all of the pieces involved and come up with a way to flow your HTML in a way that is easily controlled in your CSS.

Today we’re going to embark on just such a challenge. We’ll build a basic home page that swaps out background images based on the link that you’re hovering over in the navigation. Along the way, you’ll learn all about the idea of remote hovers and how to wield them in your projects.

CSS / 14 Mar 2012

Code a Responsive Navigation Menu

Navigation menus used to be a fairly simple thing. Code up an unordered list, float it left and you’re good to go. With responsive design being all the rage these days though you’re faced with some new challenges when creating a menu design.

Follow along as we start from scratch and code a simple but effective responsive navigation menu that you can easily modify and reuse in your own projects.

Freebies / 10 Feb 2012

15 Impressive CSS and PSD Navigation Menus

Today’s awesome collection of design freebies brings you a veritable utopia of navigation menu bliss. Each of the fifteen navigation menus below are both completely gorgeous 100% free to download.

I’ve included both CSS and PSD menus so whether you’re just looking to create a mockup or need something fully functional, we’ve got you covered. Enjoy!

CSS / 6 Feb 2012

Code a Useful Expanding Vertical Navigation Menu

Today we have yet another awesome step-by-step CSS project for you! This time around we’re going to build a super useful expanding vertical navigation menu. It’s a great way to hide a lot of links in a fairly small space and the animations will add a nice touch to your site.

Even if you’re a complete beginner, you should be able to pull this off. I’ll guide you along every step of the way and explain how each chunk of code works so you can implement these same techniques in future projects and deepen your understanding of CSS. Let’s get started!

Navigation / 25 Oct 2011

The Ins and Outs of Dynamic Navigation Menus

All web designers go through phases struggling with creative ideas. It’s a natural part of the creation cycle, but it can become frustrating as you’re stuck on a website project for more than a few days. There isn’t any one-size-fits-all solution. But we can take a moment to analyze the design process for better solutions.

The main goal of any website is to lead visitors through your pages. This is accomplished via a navigation of some type, most commonly links. You can build tab bars, banners, block elements, or even float a nav menu off to the side.

Follow us in the guide below as we look through common trends in web navigation menu design. Both designers and developers have come up with tricks for expediting the process of building websites. And we hope to do the same by offering some unique tips for UI navigation.

Custom Web Design Techniques for Unusual Navigation
Navigation / 13 Jun 2011

Custom Web Design Techniques for Unusual Navigation

Page navigation is arguably the most important aspect to any properly constructed website. How easily your visitors can travel from page-to-page will affect the overall emotion and user interface of your website.

Great web designers always keep a surprise around every corner, and navigation menus can feature this big time. From fullpage to corner links I’ve shared a few great examples of unusual website navigation. Hopefully these ideas can incite a barrage of creativity within yourself and any future projects.

iOS Usability Tips and Resources for iPhone and iPad Apps
Layouts / 2 May 2011

iOS Usability Tips and Resources for iPhone and iPad Apps

The process required for designing mobile applications takes dedication and eye-numbing precision. Most graphics designers won’t spend their time in this area since pixel-perfect creation becomes tiresome quickly. And although mobile design isn’t for everyone it does hold a special place in the hearts of many.

For those out there interested to get started designing for mobile I’d recommend skimming a few of the ideas presented below. Previously we’ve discussed creative UI design techniques and offer solutions for iPhone and iPad designers.

Create a Fun Animated Navigation Menu With Pure CSS
CSS / 26 Aug 2010

Create a Fun Animated Navigation Menu With Pure CSS

In recent years jQuery has become the easiest and best supported way to implement simple animations online. JavaScript is exceptionally good at what it does and this article is in no way an argument against it.

However, CSS3 offers a glimpse into a possible future where basic animations are performed with straight CSS completely independent of scripting. Today we’ll take a look at how to use CSS3 to create a fun and unique navigation menu that uses @font-face, transforms and transitions.