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.

Plan a Webpage Outline

Before the design process begins, you should take a moment to consider the many styles of dynamic navigation available to you. You could have fly-out or dropdown sub-menus appear from a nav bar or fixed block, but alternatively you could have sub-links slide, fade in, or maybe you don’t even need sub-navigation. These are all important ideas to work through before you dive into Photoshop.

With the above example, Fork CMS is using a simple top-bar navigation which fits in very well. Nothing comes off as confusing or difficult to find and you have access to all of the important site information.

Your situation may greatly differ based on the number of important pages in your own website. This is why I suggest sketching out a diagram to build a more solid idea of how the navigation should work. This could take the form of a flowchart, where you draw in arrows to point towards the next page in a segment.

Attaching Sub-Menus

As an example, the popular design magazine Speckyboy features a sub-nav dropdown menu within each category. WordPress can set this up by default but you still need to utilize some form of jQuery. Meanwhile the niche gaming site Destiny Islands uses jQuery for a slide-down sub-menu for each game in the sidebar area.

You may also notice the header navigation is coupled with replacement images on mouseover. This small effect is handy if your layout works well holding fixed-width link buttons. jQuery is an option but CSS3 transitions may feel like a better alternative. Both CSS3 and JavaScript boast flaky support in mobile OS’, But for older legacy browsers you’re likely to see more success using a jQuery-based method.

And a sub-menu doesn’t have to stick within the standard formats, either. I think the newest Smashing Magazine re-design says it best with their small tag cloud. Hover over the icon next to their site logo and a menu of blog categories and tags appear. Keep these small yet refined ideas in mind for your own pop-out menus.

Ajax Tabs

To contain a large number of links in a smaller area, some content needs to be hidden by default. Hidden dropdown menus are one way, but a container with tabs is another option. And with Ajax you can asynchronously pull out data from your database or another webpage with each different tab on the div.

WordPress blogs are notorious for these kinds of features. The above screenshot from Webdesigner Depot focuses on a sidebar widget to pull out the most popular and recent articles. If you feel this method will suit your layout, it is one way of containing links in a very reduced space.

If You Go Big, Go Fancy!

Those of you who frequent design galleries have most likely stumbled across Coda’s page before. They use both a tabbed content area for loading dynamic information and a heading area with 3 links: Download, Buy, and Help.

This is just one perfect example of taking your web navigation to the next level. Big and bold lettering is often attention-grabbing if designed appropriately. And the hover effects added over each link area tack onto the magical feeling of the whole layout. This is all without mentioning the delicious pixel-crazed icons featured next to each large block.

This is a very flashy display of website effects and will not always be realistic within the scope of every project. But for low-numbered navigation links it’s almost better to jack up the size quite a bit. If you only have 3-4 pages these should be easily found and glossed over exquisitely. As for the icons, there are so many resources to check out it’s most likely you’ll run into something cool!

Ruling HTML5 Standards

The web has advanced a long way since 2001. In the past 10 years we have seen tremendous leaps of innovation between techies all around the world. And now HTML5 has swept the design world by storm offering a sound, stable declaration for even some convoluted page elements.

One such example is the <nav> tag which is slowly taking over the unordered list formats (or even coupling the two together). Here’s a great Stack Overflow question about semantic HTML and using the nav element properly. As quoted from the specs page “the nav element represents a section of a page that links to other pages or to parts within the page“.

A personal favorite article published earlier this year is titled How HTML5 Changes the Way We Think of Navigation and expresses a lot of strong benefits towards the switch in coding. The basic confusion stems from so many developers growing accustomed to XHTML and HTML 4.01 standards.

Conclusion

This guide has looked more into the semantics and markup of building a dynamic navigation menu. Between the new CSS3 animation effects and jQuery UI library there are tons of customizations you can build. Front-end web development has never been this much fun! And it’s easy to find great support communities for newbie developers just picking up the trade.

Have you built any dynamic menu systems on your own website? Or maybe you’ve run into a few really cool effects on other websites. Let us know your thoughts and ideas in the discussion area below.

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.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Some Fancy Animations

Back when Adobe (Macromedia) Flash ruled the web it wasn’t uncommon to see strange navigation animations. But these fell to the wayside as HTML/XHTML standards started to develop in the latter 2000s. Since then we’ve seen dramatically increasing support for HTML5 and CSS3 effects, as well as full browser support for JavaScript and more importantly jQuery.

The guys over at jQuery have made custom web animation child’s play. Anybody who understands the basics of scripting can model a great website around the jQuery library and come out with resoundingly positive feedback. Below I’ve included a screen capture of Cooper Design, which offers a brilliant surprise for their navigation.

As you click throughout the top links you’ll be sent flying horizontally about the page through jQuery effect. Alternatively this will open up a sub-menu with categories based upon your heading page. As you choose between these you’ll notice page effects scrolling vertically, too!

Their site is a puzzle board of animations providing an amazing demonstration of the power in web design today. Alternatively you can scroll vertically as normal and transition between pages left/right by clicking on the columns side-by-side.

Another site Janette D. Council boasts a unique navigation which rearranges her portfolio items based on query data. Upon default you’ll be viewing all projects, but you may target print, logo, and illustration work individually.

Additionally her images and site information all open into the same page. This means if you’re running full JavaScript support you never need to reload your browser! Granted further inspection of her code shows there are no alternative pages for Google to crawl. This isn’t totally a bad thing, since all of the page information is strictly held within one file!

Full Page Takeover

When you think of unusual page navigation these next examples must take home the trophy. heartshapedwork is apparently a full portfolio running via WordPress. Upon entering their home page you’ll notice large horizontal bars cascading down the page. These all display great hover effects and lead to external articles and portfolio shots.

You’ll notice each bar has the project title in bold lettering with subtext containing the type of work developed. This includes websites, illustrations, mobile, and more. Their portfolio is exhaustive and actually pretty fun to flip through.

Another great example is the Work Life Balance Center site. The center was founded in 1991 and has seen a few updates to their website in that time. Currently running on Flash, their entire navigation functions by magnifying the currently focused navigation object.

So as you browse through you’ll notice large bars focusing on individual pages and sub-pages with links included. These links don’t go anywhere in particular, just drag you through the Flash layout. Interestingly this effect was seen earlier on Cooper’s website, all constructed with jQuery.

Grip Limited is possibly another epitome of fullscreen page navigation. Upon loading the site you’ll notice bars unfolding to display new information and page links. You’re able to click through the headers atop each bar to collapse the content and display more screen room.

Perhaps not the best use of navigation, although it is absolutely unique. At the very top there’s a bar titled Open Menu which drops even more links in front of your face. These include core company pages and case study links.

Obscure Designs

When you really start to examine the web many portfolios stand out as just plain arcane. Yuna Kim has a personal portfolio which truly takes on a life of its own. She has built the entire navigation through jQuery and CSS positioning.

For each portfolio item she has denoted a symbol to represent the project work. Square for digital work, Triangle for branding and Circle for print. As you scroll down you’ll notice each project link is a colorful shape marking her work.

Additionally her heading navigation drops down as you move throughout top links. The three options hello, Tweets, and contacts will display different content based on where you are. To be more specific, tweets and contacts will drop the same information: her latest update on Twitter along with e-mail and phone contact. hello will offer a brief introduction to Yuna Kim and her website. Pretty cool stuff!

Big Kid is a blog running WordPress which displays individual blocks of content. You can check out their site for yourself to see what I mean. The navigation isn’t all to uncommon, although quite unusual for a blog layout. Much of all the posts are portfolio updates which you can sort through.

What I really like is the individuality implied with their layout. It’s almost the most unique usage of block patterns I’ve ever seen on the web. From a user experience perspective it’s very easy to scroll through everything and sort project work based on personal interests. It’s also a very light website, quick to load in many of the browsers I tried (including Internet Explorer and Safari for Windows).

Site Gallery

Since there are so many weird and unusual navigation styles to cover, I’ve put together a small gallery of my personal favorites. These websites feature strange styles which I’ve never run into anywhere else on the web.

The popularity of awkward website design has risen dramatically in the past few years. Strange and unusual page layouts coupled with consideration for proper user interface have spurred some great projects. If you know of similar designs please offer your ideas in the discussion section below.

Amore

Amore boasts one colorful background. Quick to load, the page navigation is actually featured directly at the bottom-center alignment. As you move from each block the area expands to include informational text about the page. All their information opens in a lightbox window, saving the trouble of reloading each page view.

Organic Grid

Michael McDonald is the creator of Organic Grid, all built over Flash. The application takes a while to load on slower connections but I think you’ll really appreciate his style of design. Each navigation area appears as a horizontal bar which brings you to a full-page portfolio display. There is a lot of work to feature here and the enhanced visuals appeal brilliantly to UX design.

TinyTeam

What I like most about TinyTeam is their creativity in building the site. There are no extra graphics or flashy illustrations, and their solid blue backdrop is wonderful to limit distractions. Another site built over Flash which demonstrates just how unique a page menu can be. Clicking on the center box will open a new set of options for browsing their company portfolio.

LoveBento

At first appearance LoveBento is not easy on the eyes. There is a lot of content to consume and no direct navigation. Along the top right you’ll find drop-down panels, but the real items are located along the left side. Beneath the company logo you’ll find a unique display of images used to represent link hovers. Additionally there are numbered links at the bottom right for maneuvering between pages.

Lucuma

Here we’ve found another prosperous usage of horizontal scrolling. Their effects are built under the jQuery library. Lucuma also has links underneath their core content area offering XHTML and CSS validation. When designing portfolios for the web here they really mean business!

Andreas Smetana

Andreas Photography showcase truly brings the word unusual to the forefront. Once the page is fully loaded you’ll be given a notification explaining how to traverse their thumbnails gallery. By using either your mouse scroll wheel or arrow keys you can maneuver between the many categories of photographs. In the bottom-left hand corner is another small set of menu links which open on the side of whatever page you’re at. Pretty neat!

cypher13 Design Studio

Here we come to another design studio with a corresponding portfolio set in a black-and-white theme. The layout is built with HTML/CSS and uses jQuery animation effects to transition between portfolio items. The great thing here is how elegant each motion becomes. You feel gracefully offered a guide as you browse through their portfolio. It’s possible to sort items based on client and category, or take advantage of their search bar which displays results in real-time.

Studio Output

Studio Output brings a new feature into their portfolio display. The home page boasts a beautiful collage of project images which can be clicked to bring up more information in a lightbox effect. They offer lots and lots of example images and even display related projects when possible. Here I’ve clipped a piece from their portfolio of some Spongebob artwork and graphics.

Duane King

The portfolio of Duane King is another excellent example of keyboard support. Once loaded on the home page you may scroll between segments left and right with your arrow keys. You may click on a project to expand the image and display a bit more information. This is also another example where portfolio items don’t load onto a new page, really taking advantage of the jQuery library and featured plugins.

Sideshow Press

What I really like about Sideshow Press is their use of a hash mark(#) between pages. This indicates to search engines that all new content is not loaded onto a new page, but dynamically controlled through JavaScript. In this case we’re looking at a Flash application, but this is why the technique works so well. The page navigation offers some colorful animation effects on hover state. Each page transition displays a sliding effect as well, highly unique and composed perfectly.

Conclusion

I hope you’ve enjoyed these examples of unusual navigation techniques and that they’ve inspired you to create your own unique experiments.

If you know of any crazy navigation menus that we missed, leave a comment with a link below so we can check it out!

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.

Here I’ve offered a few tips for getting started from the most basic level. Creating interfaces requires immense skill and keeping your users happy should be priority number one. This may seem stressful, but once you’ve corrected your mindset designing for user experience will seem natural and energizing.

Where’s the Audience?

It should not matter whether you’re designing an app for yourself or a client. Try approaching each project from the same mindset and don’t get yourself too caught up into perfection.

To begin examine the purpose of each app and what tasks it would need to perform. This seems basic, but starting from square one will open unlimited options for your next move. Ideally you should be the first person to be targeted under your user’s list. However you are not the only person who will likely be using your app.

Photo licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 License. Attribution: http://www.larre.com

Try to keep your opinions open and malleable. After releasing your app into the online store generally download numbers will soar. This means a much higher audience with greater demands. If possible offer a link or contact form to your users where they may send you suggestions for UI updates. Nobody expects to create flawless interfaces on the first try, and real feedback is invaluable to a designer.

Keep the Mood Light

The majority of your audience will be looking through the app store under boredom or curiosity. Playfulness is the nature of mobile apps and your user interface should fit this. Consider the most important aspects of your app and how this could fit into the experience.

For example when creating an analytics app for website traffic you’ll likely want to make numbers the focal point. The data could be displayed in a table, tabbed screen, graph, pie chart, or many other scenarios. You could spend some time drawing out the possibilities and pulling a test run in your mind.

This process allows you to get the full experience of how your app may run without applying any intensive graphic design work. This process may also be named the general flow of how a user may experience your app. Taking the same example as before you should consider what some of the most important topics would be. Don’t clutter your screens with 8 tabs when you could handle the same job under 4. This will keep the mood light and allows even a child to pick up your app and start using right away!

Build a Companion Website

If possible I highly recommend taking some time out to build a quick website for your app. If you’re working for a freelance client or design firm ask if they will foot the bill for hosting and domain purchases.

The process isn’t very complicated and most mobile app websites only need a few bits of information. It’s helpful to offer an e-mail or contact address for support along with your iTunes download link to the app store. If you need some inspiration we’ve gathered some awesome iPhone/iPad app website designs to spark your creativity.

Strive Towards Minimalism

Ultimately you should consider how different the user experience can be on mobile screens from a desktop. Even accessing web apps on a laptop offers a very different feeling than any iOS platform. Simplicity truly is the key to success and your userbase will value this.

The less work required to get something done the quicker things can be accomplished! This is a very simple mantra but does illustrate the situation in a neat box. If tasks can be shifted into context menus or other places out of sight it will remove unnecessary screen clutter.

Another secondary benefit with minimalism offers your users a lightning fast experience with your application. If you can halt processes and keep a small amount running you can reduce load times drastically. This offers a brilliant example of switching between tasks with ease at no cost to user experience.

Essential Design Resources

The above tips are just bridges to get you thinking properly about app design. Ultimately it will be up to you as an artist to spend time practicing and understanding just how intricate the process can become.

I often share my ideas for mobile design as a new frontier currently under exploration. We are entering new spaces as humanity evolves and our technology, especially software, is undergoing dramatic transformation. Soon we’ll see 3-D holographic technology and ideas even further than our imagination can conceive!

But for now I’ve got a few more helpful links aspiring iOS designers should check out. Each of the resources below are free to download and share around to friends or co-workers. Check out a few and see how you feel about mobile application design. On the same token if you have ideas or links to other resources happily share them in the comments below.

iPhone 4 GUI

Unretiner

iOS App Icon Template

LiveView for iPhone & iPad

iPhone Mockup Toolkit

iPad GUI Kid(PSD)

iPhone PSD Vector Kit

iPad GUI PSD

OSX Leopard GUI set

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.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

The Menus

David Jonnson

KK Media

Bite Club

Mac Rabbit

Toffeenut Design

Listal

Narwhal Company

Pixel Resort

Fishing Cactus

Tutorial 9

Envira Media

Duarte Pires

Weblifting

We Graphics

Nando

Inset

Yanis Markin

Steven Little Design

Daniel Marques

Axel Sears

CV Studio

The Peach Design

Genocom

Michael Hogenmiller

Rather Splendid

Eichi Creative Design

Dan Wiersema

Music Thoughts

Fresh

Dishizzle

Lelegins

Boxee

Tripping Words

Free Icon Sets

Now that you’ve had your dose of inspiration, it’s time to start the original creation step. Use the resources below to help you create your own beautiful navigation menu!

gCons: Free All-Purpose Icons for Designers and Developers (100 icons + PSD)

478 Free SVG Vector Icons – The “Seven” Icon Pack

Icons: Free iPhone Toolbar Icons

iPhone Toolbar Icon Set

Freebie: 20 High Quality 3D Icons

NIXUS Icon Pack: 60 Beautiful Premium Icons (Free)

WooFunction: 178 Amazing Web Design Icons

Colorful Stickers Icon Set :: 20 Icons

Designer Icons – Professionally Hand-Crafted Free Icon Set

Default Icon

Icon Search Engines

Looking for something specific? Check out these great free icon search engines.

Icon Finder

Icon Seeker

Iconlet

Conclusion

With the inspiration and resources above, you should now be fully armed to go out and make some great icon-based navigation menus.

Also, be sure to leave a link to any icon-based navigation menus that you’ve found on the web.

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.

Delving Deeper

It’s always more helpful to get a feel for the process of the development than to merely see an image, so in this section we’ll briefly discuss the aesthetic of each menu and how the developer accomplished the effect. This way you can gain inspiration into how to use new methods to create your own unique menus.

Silk Tide

This is one of the most minimal menus on the list. It’s basically just plain text with an extended blue box rollover but it’s really easy to implement and results in a nice effect.

Glenn Sorrentino

This example uses CSS borders on the top and bottom of the menu that increase in thickness when you hover over them.

Strutta

If you have a textured background, consider using transparency in your menu to increase the aesthetic. This could easily be done with RGBa in CSS3.

Elbow Park

Another example of transparency in the navigation area. This one uses a similar effect to the first example with the selection box extending up to the top of the page. This increases visibility and makes for a more seamless design.

Thoughtbot

As you rollover these buttons the background changes to a brighter red. This combined with the glossy look (accomplished with a transparent PNG) creates the illusion of the area lighting up.

Toffee Nut Design

This beautiful example uses CSS sprites for the navigation. The entire menu is one PNG showing each of the tabs in three states: off, on, and on+selected.

Safarista

Here we see each section of the navigation as a hybrid of image and text. The icon, gradient and smaller background make each section’s image while the larger text is styled HTML with a underline hover effect.

David Jonsson

Another simple hover effect that bleeds to the top. This one had hidden icons that only display when you mouse over. A nice effect!

Asvalia

I really like the colors and the crooked text on this menu. The glowing rollovers are perfect.

Bonsai Studios

This one is an extremely simple vertical menu with transparency and a darkening hover. It gets the job done, looks great and can be built in minutes.

Great Expectations Church

Another vertical navigation menu. This one implements some basic but attractive icons and a background GIF with a gradient for the hover.

Ryan Couser

This one uses some simple sprites to accomplish the hover. Each icon is an image with both the on and off states.

Kk Media

Here we see a vertical menu with more detailed icons. Each link is an HTML list item with a simple background image applied in CSS.

Bite Club

I really loved this navigation bar. The brightness really grabs your attention and the reversal of the colors makes a perfect rollover. This also uses a sprite for each menu item, each with three states.

Capital City Equipment Company

I though the house shaped navigation selection was clever on this one. The text in each link is part of the image, if you replicate something like this it would be simple just to use live text over the background image instead.

Strawberry Leisure

This dropdown menu uses a small repeating transparent PNG to pull of the reduced opacity effect. Again, we can look forward to this being much easier in the near future with RGBa when more browsers get on board.

Artificial Studio

Yep you guessed it, more image sprites (sensing a trend here?). The big buttons and excellent gradients make for a beautiful navigation area.

Cognigen

This was by far one of the most original concepts I came across in my search. To pull of the unique 3D effect, the designer has used a whopping four states for each button that change depending on whether the button is selected, hovered over, or has an adjacent selection.

More CSS Menu Goodness

Now that we’ve discussed quite a few great examples, here are a bunch more to check out. Use your browser’s inspect feature to check out the code and images behind any that you like!

Manndible Cafe

Code Greene

Opera

Mac Rabbit

Clark Builders

Mr. B and Friends

Subvert

The Swish Life

Mystery Tin

LiveResto

FeelSocial

Gowalla

NZ Festival

Download Prebuilt Menus!

Need a good starting point for your own CSS menus? Check out these great free resources.

• 13 Styles: The menus are list based, very light-weight, easy to implement, and cross-browser compliant.
• CSS Menu Maker
• CSS Play: Menus
• CSS Menus
• Free Cross Browser CSS Menus

Now Show Us Yours

Do you have a CSS menu that you’re particularly proud of? Use the comments below and leave a link so we can see. Also let us know which of the examples above you liked best.

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.

1: Make It the Primary Navigation Tool

This sounds crazy right? Why would anyone in their right mind take the primary navigation, traditionally placed in the header, and put it at the bottom of the page? It goes against so many rules and can be an absolute disaster for usability. However, if executed properly, footer-based navigation can be easy to use and refreshingly different. The example above uses a large stationary footer that lays on top of a scrolling page. You can even toggle off the navigation menu to view the page content in its full glory. This is an excellent implementation of a risky idea. Two thumbs up to Madfrog for originality.

2: Give It a “Back to Top” Button

One feature that I really love in a footer is a button that takes you back to the top of the page. On lengthy pages, you’ve done some serious scrolling by the time you reach the footer and the trek back up can be a long one. You can overcome this annoyance with a simple JavaScript button that sets the scroll position. See the implementation in the examples above as well as on the Madfrog footer from the previous tip.

3: Give It Contrast

If you want a strong footer, don’t leave any doubt as to where it begins. Using a simple line or graphic to differentiate the main content from the footer helps, but giving the footer a drastically darker (or lighter) background color goes even further. The example above actually uses both techniques. The dark footer background contrasts nicely with the white page background and they’ve added a beautifully eye-catching graphic that is engineered to steer your attention toward the contact form. To take the example further, placing a simple contact form within the footer is another way you can increase it’s functionality.

4: Illustrate the Heck Out of It

If you’re a talented illustrator, the footer can be a great opportunity for a creative element that allows you to break away from the strict but necessary utility of the page above. If the footer is going to be the last thing a user sees on the site, you might as well go out with a bang. The two sites above have implemented huge, ridiculously amazing illustrations that serve almost no purpose beyond just looking really cool.

5: Pack It with Content

There’s definitely a strong argument for keeping footer content simple, and trust me, I’d be the first to make it. But there’s also plenty of occasions where it’s appropriate to just cram a bunch of stuff into your footer (in a stylish and organized fashion of course). The three sites above have opted to do just that. There is often plenty of content, such as legal copy and blog archive links, that you want the user to see without cluttering up the primary content of your page. An oversized footer is a convenient and logical place to put such content.

Notice from the examples above that this is also a great place to put a list of free resources for your users. No matter what kind of site you have, providing a list of free external resources is an easy way to add value to your site in the eyes of your visitors.

6: Stick Your Head in It

Can’t think of anything to put in your footer? Try your face! If you’re creating a blog or portfolio, it’s appropriate to include information about the site owner (be that you or your client). Write yourself a short, witty bio, throw it next to your ugly mug and suddenly your site is transformed from cool and professional to inviting and personal. Obviously, contact information is a natural complement to this setup if you’re looking to add even more content.

7: Make It a Social Media Hub

Along the same lines as the personalization in the previous tip, the footer is also a natural place to include all of your various social media links and widgets (you know you’ve got a ton you social media nerd). This is a common enough practice that the footer often the first place I look for social links. Don’t stop at Facebook either, go crazy and throw in your Twitter feed, Flickr stream, and even a MySpace link if you’re unfortunate enough to have one.

Just remember to style each peace to fit your theme and give the footer elements a cohesive look instead of throwing in a bunch of prefab, mismatched widgets. The example above uses rocket ships and CSS styling to tie it all together in a fun and unique way.

8: Update It Daily

Another great feature for your footer is to come up with a unique idea for a brief daily feature that complements your site. Try to think of something useful enough that a user would conceivably check in from time to time just to see it. The example above is a designer’s website featuring a free, downloadable daily color scheme in the footer. This is both practical and relevant to the site’s audience. Think about who is visiting your site and what they might be interested in.

9: Throw In an Infographic

The site above was the only example I came across that used an interactive infographic in the footer. Consequently, I spent more time playing with that footer than I did staring at any of the others. To get a feel for what I mean by infographic, check out this post on 25+ Useful Infographics for Web Designers. Essentially, infographics are a way of conveying boring data in a visually creative and interesting way. Think about the information in your footer and how you can present it in a more interactive and attractive way.

10: Bring It To Life

A little bit of animation goes a long way towards adding visual interest to your page. The footer in the example above features animated insects dancing around a candle flame. The effect is an eye-catching footer that you can’t help but stare at for a few seconds. I recommend keeping your animations simple. The goal is to make it appealing without detracting too much from your primary content. Other ideas for subtle animations could include pulsing colors, floating clouds, and scrolling news tickers.

Conclusion

There you have it, enough creative footer suggestions to keep you going all year. Use the comments below to let us know which examples you think are the best and be sure to tell us about any that we missed!
Footer examples found on Footer Fetish.

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

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.

Starting in Photoshop

1) Create a grate repeat background.

Start by creating a 56 (W) x 64 (H) px image in Photoshop. Then make a 3 coloured gradient going from #111111 to #313131 and finally back to #111111. It should look like this.

Now it’s time to add the dimples.

Select the brush tool and pick a square brush that is 2px in size and #000000. Create a new layer and make sure it is selected. Begin by making one dot anywhere on this new layer. Now move that dot 3px from the top of the image and 1px from the left side. You can then duplicate this layer 11 times (so you have a row of 12 dots in total) and each time move the dot down 5px.

You can now merge all of these layers (except for the background.) Duplicate this new row of dots 6 times, and each time move the row to the right 8px.

Using the first row created, duplicate it one more time and move it 4px right and 2px down. This new row can also be duplicated 6 times and each moved 8px right. You should now have the background of the dashboard.

2) Find an icon pack like the one used in this tutorial. Mine was found at: http://www.smashingmagazine.com/2008/10/01/dellipack-2-a-free-icon-set/

3) Create a text area for the icon tips.

Create a new image 292px (W) x 34px (H) and create a new layer. Delete the background layer. Now draw a rounded rectangle path again just like we did for the icon, however this time it wants to be 290px (W) x 32px (H) and make it a selection again filling it with a white. Set the fill on this layer to 10%. Now all that is left to do is add a 1px white stroke around it leaving you with this. (I’ve put a black background on the example that you will not have, just so you can see what it should look like)

Now we are ready to put some HTML and CSS into this and make it!

HTML and CSS

In order to build this example, you’ll need the latest J-Query release.

First thing to do is prepare the HTML. We are going to need to DIV tags, one as an overall container of everything, which will ensure that the dashboard spans the width of the browser window. The other will act as a container for the icons, keeping them restrained within a 945px width. This is to ensure they will all be visible on most common screen resolutions.

1
2
3
4
5
6
7
8

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Dashboard</title>
<link href="index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<body>
<div id="advanceMenu">
<div id="advanceContainer"> </div> </div> </body> </html>

A you can see from this I have attached a stylesheet called index.css, I have added a few styles on that style sheet to ensure these DIV will look and perform the way I wish.

1
2
3
4
5
6
7
8
9
10
11

#advanceMenu { 
background:url(images/gratingRepeat.png) repeat-x; 
height:64px; 
display:none;
}
 
#advanceContainer { 
width:945px; 
margin:auto;
 
}

The background image has a repeat-x on it to enable the image to span the width of the browser window. The height should be the same height as the gratingRepeat.png we created earlier.

The advance container has a 945px width on it to allow even the smallest screen resolutions to view the dashboard in full. I always design my websites to a minimum of 1024 x 768 because this tends to be the most common screen resolution at the time of writing. Also, by having margin: auto set on the container, the browser will centre the icons no matter how wide the browser is set to. For this to work, the element must have a width set.

The next thing we need to add is the UL, which will hold all of our icons.

1
2
3

<ul id="advanceList">
<li class="home"></li> <li class="monitor"></li> <li class="green"></li> <li class="interact"></li> <li class="people"></li> <li class="phonebook"></li> <li class="school"></li> <li class="vault"></li> <li class="world"></li> <li class="plus"></li>
</ul>

As you can see each LI has a different class attached to it. This is so that we can assign different attributes to each icon. Be sure to name your classes to correspond to the icon so that you will understand where to put everything.

First we will go through the main areas of the styling on the UL and the LI.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

ul { 
list-style:none; 
margin:0; padding:0; /*fixes ul padding and margin */
}
 
ul#advanceList { 
float:left; 
width:645px; 
margin-top:6px;
 
}
 
#advanceList li { 
height:48px; 
width:48px; 
float:left; 
margin-left:15px;
 
}

Firstly, the UL list-style: none takes off any unwanted bullet points. I have also put a padding: 0 and margin: 0 here, this should stop any browser compatibility issues placing things in unexpected areas. I have put these to attributes on UL site wide because we will use another UL later and these settings will apply as well.

On the advanceList specifically I have chosen to position the icons using the float method. (I find this gives me the greatest control over positioning.) The width is important when floating to ensure accurate placement. I have chosen 645px because we have to leave space for the tips area, which will be added later.

The LI within this UL have then been given a height and width (the same height and width as the icons) and then floated left. Doing this places the LI in a horizontal line overwriting the default vertical alignment of UL. The margin-left here is placed on every individual LI meaning there will be a 15px gap between each icon.

The next section of CSS needs to be repeated and slightly modified for each icon class. I will include one example for guidance. It’s very simple, set the background to the icon.png and then set the background for the icon’s hover state. This means that when the icon is hovered over (in all browsers except for IE6) the icon will change colour.

1
2
3
4
5
6
7

.info { 
background:url(images/icon.png);
}
 
.info:hover { 
background:url(images/iconHover.png);
}

Make sure you replicate this changing the class for every icon you choose to use. Make sure you also change the image that they use as a background.

Finally, we will add the Tip area and style it. The HTML is very similar to that of the icon set. Using UL and LI. However, we only use one LI with a series of different DIV CLASSES within it.

1
2

<ul id="contactList">
<li class="advanceTip"> <div class="plusTip">Menu Item 10</div> <div class="worldTip">Menu Item 9</div> <div class="vaultTip">Menu Item 8</div> <div class="schoolTip">Menu Item 7</div> <div class="phonebookTip">Menu Item 6</div> <div class="peopleTip">Menu Item 5</div> <div class="interactTip">Menu Item 4</div> <div class="greenTip">Menu Item 3</div> <div class="monitorTip">Menu Item 2</div> <div class="homeTip">Menu Item 1</div> </li> </ul>

While this may look like a daunting piece of code it is in fact very simple. Each DIV relates to one icon and using CSS only one or no DIV will be visible at a time. Be sure to give every DIV a separate class relating to the icon it will be highlighting. This will be needed in the next step.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

ul#contactList { 
margin-top:16px; 
float:right; 
width:292px;
}
 
.advanceTip { 
background:url(images/textArea.png) no-repeat; 
height:34px;
 
}
 
.plusTip, .worldTip, .vaultTip, .schoolTip, .phonebookTip, .peopleTip, .interactTip, .greenTip, .monitorTip, .homeTip { 
display:none; 
height:34px; 
width:292px; 
text-align:center; 
line-height:35px; 
color:white; 
font-family:Verdana, Arial, Helvetica, sans-serif;
 
}

To start, I have floated the UL right and given it a width. This will position the tip area to the right of the icons, as the width given to the icon UL allows both elements to sit on the same line.

I have then given the class a background, loading in the textArea.png created earlier. This has been given a height to enable it to be visible.

I have every DIV class to display: none meaning that every DIV within the LI will initially be hidden. We will use javascript to enable them later.

Every DIV is set to be the same height and width as textArea.png, this is so that we can position the text within precisely. Text-align: centre moves all of the text to the middle of the DIV and therefore the text area. Finally, the line-height:35px; ensures the text is vertically centred. This value will differ depending on the font-size and font-family choice, trial and error may be needed a little here.

Finally, we will need a button to click to make the dashboard visible. Outside of the two DIV we have created insert a link and give it a class of advanceMenuBtn. This will be needed when calling it within the javascript later.

1
2
3
4
5
6

</div>
<a href="#" class="advanceMenuBtn"><img src="images/showhide.png" alt="Show and Hide the Dashboard" border="0" /></a>
<a href="#" class="closeMenuBtn"><img src="images/close.png" alt="Show and Hide the Dashboard" border="0" /></a>
</body>
 
</html>

If you load this into a browser you will be able to see the dashboard at the top and the icons will change colour when you place your mover over them, very exciting!

Now it is time to add the javascript functionality. Be sure to place all of the subsequent javascript within the HEAD tags at the top of your page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script
$(document).ready(function(){
$("a.advanceMenuBtn").click(function () {
$("a.advanceMenuBtn").toggle();
$("a.closeMenuBtn").toggle();
$("div#advanceMenu").slideToggle("slow");
});
 
$("a.closeMenuBtn").click(function () {
$("a.advanceMenuBtn").toggle();
$("a.closeMenuBtn").toggle();
$("div#advanceMenu").slideToggle("slow");
});
 
});
</script>

This first chunk of code toggles the visibility of the dashboard when the advanceMenuBtn button is clicked. To make sure that the dashboard begins invisible you should now place a display: none on the advanceMenu DIV in the CSS.

The second line of this chunk sets up the function to be ready to run when the page is ready and loaded, meaning that it will work any time the page is visible. The next line focuses on the advanceMenuBtn and sets up another function to run when that button is clicked. When using JQuery to focus on elements the syntax used is very similar to that of CSS. Firstly you declare the element type with the ‘a’ and then you declare the class using ’.advanceMenuBtn.’

The next line then calls the dashboard and declares what function is to be performed and states a variable telling it how to perform. .slideToggle is a JQuery function that is built into the framework and has different speed variables attached to it. You can choose between slow, normal or fast. The dashboard will now appear hidden when viewing the page. Clicking on the link will then make the dashboard appear.

The final piece of javscript will cause the text area to show the tip when the user hovers over an icon. Again this script is very repetitive so I will show you one example that needs to be slightly adjusted for the other icons.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script type="text/javascript">
$(document).ready(function(){ $("li.home").mouseover(function () {
 
$("li.advanceTip .homeTip").show();
 
});
 
$("li.home").mouseout(function () {
$("li.advanceTip .homeTip").hide();
});
 
});
 
</script>

This script is again very simple and very effective. Once again the function is ready to be used when the page is loaded, as stated by the third line. The next line then calls on the icon with a class of info and sets a function to run when the user puts their mouse over it.

Next the class which displays the piece of text associated with that icon is focused on and told to ‘.show’ when this happens. This function then needs to be reversed in order for other snippets of text to show when other icons are hovered over.

The last few lines are doing the exact reverse of the first function changing ‘mouseover’ to ‘mouseout’ and ‘.show’ to ‘.hide’

These two function then need to be repeated for every icon changing the classes that are being called to coordinate with the icon in question.

Now we should be ready to see it working in it entirety!

Check out the demo and download full source code here

Well done and I hope you can put this to good use.

Please note that due to IE6 not understanding the :hover function this example will be of very limited use in that particular browser. However there are fixes for it that can be found using further javascript.

Prosems – Ecommerce Web Design & Development Solutions

Download the menu

1. CSS Fancy Menu

This article gos through the creation of a custom navigation bar with some cute Javascript effects that will certainly impress your friends. Thanks to the great Mootools library, this beauty is contained in 1.5kb. Not only that, but it’s also cross browser (tested on Internet Explorer 6/7, Firefox and Safari) and accessible!

2. cssMenus

This navigation menu works both vertically and horizontally, being fully compatible with all browsers.

3. Advanced CSS Menu

This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let’s take it to the next level – code an advanced (un-typical) list menu utilizing the CSS position property.

4. Taming CSS Lists

In this article, I’ll demonstrate how to use CSS to bring unwieldy lists under control. It’s time for you to tell lists how to behave, instead of letting them run wild on your web page. Specific attention is paid to using a list as a vertical CSS menu.

5. Mini Tabs

I came up with these little “mini tabs” for navigation while working on a few projects. They’ll probably appear in the real world eventually. They are generated with pure CSS of course, and require no images.

6. Inverted Sliding Doors Tabs

This is an explanation of how I adapted Doug Bowman’s Sliding Doors technique to work with inverted tabs for a recent redesign of netrelations.se.

7. A collection of free CSS menus

8. A simple gradient CSS menu

9. A walk-through of different CSS navigation techniques

10. Mini sliding navigation

1. Decide on the Navigational Elements and Colours

It is initially important to decide on which tabs you will want to place on your site, and what the colour scheme will be. You need to have an idea of how many tabs there will be, and what the default background and rollover background colour will be. Make a note of these!

2. How It Works

The tab area is set as a layer, to hover over a specific part of the page – you set this manually, based on where you would like it to be located.

Simply take the CSS code (see below), and change the commented values to fit in with the colour scheme of your website. You can go deeper and change elements such as the height, width and position of the menu bar if you want.

3. Download the CSS Code

Download a copy of the CSS code, then link to it as explained below.

4. Insert the CSS file into your HTML Code

Upload the tabsample.css file to your server, then place the following line in your area to link to the stylesheet.

1

<link rel="stylesheet" type="text/css" href="tabsample.css" />

5. Place the Tabs in your HTML Code

OK, so you’ve got all the formatting done for tabs in the CSS file, now you just need to place the correct HTML code in your index.php page.

For each tab you want to display, enter:

1
2
3
4
5
6

<ul id="supernav">
<li<?php if ($page=="home") { echo " id="selected""; } else {} ?>>
   <a href="/index.php" title="The Weblog">Blog</a>
</li>
-- Repeat as necessary for other tabs --
</ul>

For each different tab, change the following:

"home" – this is a one word description of the page (for the reason why, see below)
"/index.php" – this is the link to that particular page
"The Weblog" – a description of the page you’re linking to
Blog – the word you want to appear in your navigation bar as a link

Note: It doesn’t really matter where you place this source code, as the position they appear in is set in the CSS file. I would recommend somewhere near the header area.

6. What’s the PHP for?

The PHP code in the above line allows you to have an alternative look and feel for the tab on the current page (see the ‘Blog’ tab above?) Simply place this line underneath the http://designshack.net/articles/pop-out-css-menu/ http://designshack.net/articles/pop-out-css-menu/#comments Wed, 11 Jul 2007 13:33:25 +0000 David Appleyard http://localhost:8888/?p=480 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.

Example

View the Pop Out Menu Example

This is a simple menu, coded semantically with XHTML and CSS. It uses a list to show the menu, and generates the layout of the links from the CSS file. You will need to download our style sheet, download the whatever:hover file from Peter Nederlof to get the menu working in Internet Explorer. You add the following HTML to your code, altering it to fit your needs:

HTML Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<div id="menu">
<ul>
  <li><h2>Navigation Menu</h2>
    <ul>
      <li><a href="" title="">Option 1</a>
        <ul>
          <li><a href="" title="">Sub Option 1</a></li>
          <li><a href="" title="">Sub Option 2</a></li>
          <li><a href="" title="">Sub Option 3</a></li>
        </ul>
      </li>
    </ul>
    <ul>
      <li><a href="" title="">Option 2</a>
        <ul>
          <li><a href="" title="">Sub Option 1</a></li>
          <li><a href="" title="">Sub Option 2</a></li>
          <li><a href="" title="">Sub Option 3</a></li>
        </ul>
      </li>
    </ul>
    <ul>
      <li><a href="" title="">Option 3</a>
        <ul>
          <li><a href="" title="">Sub Option 1</a></li>
          <li><a href="" title="">Sub Option 2</a></li>
          <li><a href="" title="">Sub Option 3</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>				
</div>

CSS Code

You can download a copy of the CSS code for this example, then copy and paste it into the head section of your page. Combine that with the whatever:hover file from above in the same directory, and the detailed HTML code – you’ll have a beautiful popup menu in no time!