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.
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.
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!
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!
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.
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!
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 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.
For websites with a complex hierarchy of navigation, using a pop out menu can allow you to easily find your way to what you want quickly. Using CSS to create one is a snap, and is easy to update.