Category: Navigation

Categories

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.

30+ Innovative Icon-Based Navigation Menus
CSS / 15 Jul 2010

30+ Innovative Icon-Based Navigation Menus

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.

30 Gorgeous and Versatile CSS Menus
CSS / 30 Apr 2010

30 Gorgeous and Versatile CSS 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.

Simple Hover CSS Menu
Navigation / 11 Nov 2008

Simple Hover CSS Menu

Simple Hover MenuOur 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.

Visit

Creating a jQuery Dashboard
Navigation / 29 Oct 2008

Creating a jQuery Dashboard

jQuery Mac Dashboard Dock

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.

Top 10 CSS Navigation Menus
Articles / 26 Mar 2008

Top 10 CSS Navigation Menus

Creating navigation with CSS is one of the most crucial elements of website design. Get the navigation right, and people will feel welcomed and at home. Get it wrong, and it can spell trouble for your website. This is a great collection of 10 CSS navigation examples and tutorials to get you in the creative mood.

CSS Tabs Rollover Menu
Articles / 11 Jul 2007

CSS Tabs Rollover Menu

Using a tabbed rollover menu in the header of your website can add functionality, as well as making the navigation look good. Doing this in CSS means that you can use it to it’s greatest capacity, easily add or remove tabs and change the colour in different styles.

Pop Out CSS Menu
Articles / 11 Jul 2007

Pop Out CSS Menu

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.