Learn how to craft effective navigation for your website — on desktop or mobile. Design navigation that helps users easily find what they’re looking for.
Today we’re going to have some good clean fun by recreating the animated Mario Bros. question mark box with pure CSS3.
Along the way you’ll learn how to use several cool CSS3 technologies such as rounded corners, box and text shadows, and keyframe animations that work in both Safari and Firefox. Let’s jump in!
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.
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.
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.
Here at Design Shack we love a good navigation menu. Lately we’ve noticed a trend arising around menus that use icons either exclusively in place of text or as a support of additional textual information.
Adding icons to your navigation can not only give you an aesthetic boost but actually make for a quicker visual read of the link. Here’s a collection of over thirty icon-based navigation menus that we found online. We’ll conclude with a few resources you can use to snag some free icons to create your own fancy menus.
Sometimes the navigation menu can be one of trickiest parts of the design process. This single area can set the tone for the usability of the entire site.
Today we’ll look at 30 inspiring examples of good menu design. Though many are pure CSS, others add in some images and/or JavaScript to increase the aesthetic and functionality.
A site with fixed-position navigation is one that never allows the user to lose site of the directory links as they scroll.
This simple trick makes for a site that is incredibly easy to navigate and is ideally suited for specific types of content. Below we’ll take a look at both the most common and the most unique uses of fixed navigation in web design.
A strong footer can leave your visitors with a lasting positive impression.
There are tons of creative ways to boost the cool factor of your footers by focusing on both form and function. Below you’ll find 10 simple ideas to inspire you towards footer greatness.
Today we’ll be looking at how to add keyboard navigation to a website using a few simple lines of JavaScript. First we’ll create a simple site theme in Photoshop and then transform it into a working website that uses keyboard functions to switch pages.
Our partner site, 13 Styles has just released a new CSS menu called “Simple Hover“. It is, as the name suggests, a simple affair, with a link description appearing when hovered over.
The menu is completely free to download, use and customize, contains no images (it’s all CSS) and should work in any browser or operating system you use.
Please let me know if you find any problems or would like to contribute a menu in the future.
The ‘Dashboard’ feature on a Mac looks great, and the menu allowing you to add/remove widgets is a well designed feature. A similar effect can add a whole new level of functionality to a website, providing a simple slide-down menu at the top of a page. This tutorial will walk you through the process from beginning to end.
Before getting started, you may like to check out the demo, or download full source code here.
Our partner site, 13 Styles have just launched a new addition to their range of free CSS menus. It comes pre-built in red, orange and grey, working in all major browsers. Best of all, it’s completely free for you to download and use!