Six Revisions » Design Showcase / Inspiration

50 Examples of Drop-Down Navigation Menus in Web Designs

Jacob Gube — Fri, 09 Jul 2010 10:47:18 +0000

Having a clean and well-structured website navigation is key in designing an effective user interface. Drop-down menus are great for sites that have multiple levels of content hierarchy. The typical design pattern of a drop-down menu is that when a user hovers over the parent navigation item, a submenu of navigation items appears.

In this collection are many different types of drop-down menus used in websites all over the web for your navigation design inspiration.

Here are some related collections regarding site navigation that you may also be interested in:

1. Pure Grips

Pure Grips feature images in their drop-down menu to make it clear to the user which products are which.

2. Porsche

As you hover over each car, the image on the right changes. It also looks stunning with the semitranspart background.

3. B&Q

B&Q has a clean and eye-catching drop-down menu that lists columns of products that customers are looking for.

4. Red Brick Health

This drop-down navigation menu fits perfectly into the site design, and the pink hover highlight is a great touch of detail.

5. Carreras Con Futuro

This drop-down menu’s design embodies the hand-drawn theme of the website.

6. Galaico Folia

This drop-down submenu has a wonderful animation effect with the smaller pieces of wood folding down from the main menu item.

7. Callaway Golf

This is a masterfully neat drop-down navigation design that has an orange hover effect.

8. Converse

Converse has a grunge-styled drop-down menu that has a cloth-like texture with frizzy edges.

9. Puma

This dark drop-down menu really stands out from the rest of the site’s lighter colours.

10. Sunglass Hut

This drop-down menu is functional in that it also serves as an illustrated visual of the various styles of sunglasses.

11. Nettuts+

Netttuts+ has a clean drop-down navigation menu that works well with their header colours.

12. Tennessee Trails & Byways

This drop-down is unique because within the submenu, there’s also tabbed navigation.

13. Gateway

The drop-down menu in this design has nice curves and beautiful visuals that serve to display images of the computer manufacturer’s products.

14. Bern

This rough grunge style website has an edgy drop-down menu that complement the look-and-feel of the website’s general aesthetics.

15. Ski Alpine

This drop-down menu highlights the attention to detail that the site designer has.

16. Guitar Hero

This simple drop-down menu is practical and doesn’t distract away from the main areas of the web page layout.

17. Mac Appstorm

Here’s a clean drop-down menu that fits perfectly with the overall landscape of the site design.

18. Noizi Kidz

This navigation is bright and shaped unconventionally.

19. Audi

This drop-down menu contains thumbnails of the auto maker’s model of cars; when you hover over a car, it displays details about it along with relevant links to other pages.

20. Famous Cookies

This drop-down navigation menu showcases the yummy cookies that the store makes available to its hungry patrons.

21. Duchy of Cornwall Nursery

This paper-styled website design has a nice, clean dropdown menu.

22. EA

Electronic Arts has a playfully styled drop-down menu.

23. Bonfire Snowboarding

Bonfire Snowboarding has an awesome 3-column drop-down submenu on their "Products" main navigation item, placing their products within three categories.

24. Facebook

Facebook has their simple drop-down menu on the site’s "Account" main menu link with relevant links for editing your Facebook account.

25. Nick Ad

You have to click-and-hold your mouse pointer for the submenu to appear. Then you move onto the link you want on each drop-down and release your mouse button to visit that page; it’s an interestingly unconventional interaction design.

26. TN Vacation

This dark blue drop-down menu really stands out.

27. MTV UK

This site design features a clean and standard drop-down menu.

28. DC Shoes

The red and white text on the semitransparent black background really works its charm.

29. Envato Marketplaces

This is a really beautiful drop-down menu.

30. Tennessee Theatre

This navigation is special because it’s clean but creative at the same time. The brown really stands out from the rest of the site’s soft colours.

31. Boden

Each menu item has a different font and the drop-down menu is very clean.

32. White House

The white background, blue text, and red top and bottom borders utilizes the the USA flag’s colours.

33. Navigant Consulting

The colours used on this site work together like players of a football team.

34. Officers Club

Another clothing website with a drop-down; having a dropdown submenu makes it so much easier to find products. The Officers Club drop-down has a multi-column layout.

35. Fall For Tennessee

Fall for Tennessee has a horizontal drop-down menu that slides out to the right hand side. The menu items that have a drop-down submenu have a small arrow next to them to indicate that they can be expanded.

36. Sony

Sony has a very wide and simple drop-down menu on their main UK site.

37. Project Vino

This drop-down menu uses colours that fit the rest of the site. The big font size and the overall design looks amazing.

38. Media Temple

Media Temple has by far one of the best drop-down menus out there, aesthetically. The small thumbnail of each hosting type next to the name of them looks great, along with excellent JavaScript-based animation transitions.

39. Mozilla

This is a simple yet sleek drop-down menu on the Mozilla.

40. August

The semitransparency effect in this drop-down menu works will with the vivid background image.

41. Henleys Clothing

The main navigation colour creeps down onto the drop-down submenu.

42. Digg

The classic Digg drop-down submenus work with their website’s overall design.

43. Action Envelope

This drop-down menu is special because it has a nice shadow effect that really brings the drop-down menu out of the page from the rest of the site.

44. Very

Very, a new e-store, has a clean and structured drop-down navigation menu.

45. Incase

The Incase drop-down menu is slightly lighter in color shade than the navigation background, and works well with the site’s overall clean look-and-feel.

46. American Eagle

I really like the American Eagle drop-down menu because it fills the whole site’s width and also blends in with the clean paper-style look.

47. Mayflower Brewing

The colours used in this drop-down (and the site, in general) are gorgeous.

48. Select Clothing

Select Clothing’s drop-down menu has a dark background that stands out over the sliding images below.

49. Bird Malaysia

This drop-down menu is special because the colours stand out from the rest of the website, and I quite like the subtle background image at the bottom of each drop-down menu.

50. The Web Squeeze

The Web Squeeze has implemented jQuery into their drop-down menu to give it some nifty hover effects.

About the Author

Andy Johnson is a freelance web designer and developer living in the UK. Andy freelances through his own design studio Authentic, and also co-founded a lightning fast UK hosting company called Pixeno. You can follow him on Twitter: @Andy92.

Banner Ads: Excellent Examples for Inspiration

Jacob Gube — Sun, 20 Jun 2010 12:01:17 +0000

Advertising is everywhere, especially on the Web. Most websites I visit have some sort of web banner advertisements on them. For some websites, such as big design blogs, advertising is the main source of income.

With that in mind, it’s clear that website owners need to think very carefully about how their ads are displayed and where they are placed in relation to other elements on their site.

I have put together a showcase of different ways that a few websites show their ads, which might be helpful when it’s time to place banner ads on your site. Some are bang in your face while others are more subtle, blending in with the web design.

CSS Remix

The ads on CSS Remix are displayed along the top of the site and blend in well with the site listings.

Design Bombs

Design Bombs displays their 125px ads on the left-hand sidebar. The ads fit in with the other gallery listings on the site.

Noupe

Noupe displays their ads next to their site content and at the very top of their site. They also have a small line of text below each image ad. This structure is the same as Smashing Magazine, who aquired the site recently.

TheFWA

The FWA web gallery displays a huge variety of ads on their site’s top right-hand corner consisting of three web banners at a time.

Webdesigner Depot

A beautiful site should have beautiful ads, and that’s what Webdesigner Depot has. They display their ads in a clean and simple format on their right-hand sidebar.

InstantShift

This clean website design has a bunch of excellent banner ads that run seamlessly down the right-hand column. It looks great!

Behance Network

The new beta Behance Network website design has small sponsor boxes down the right-hand column that display ads next to their content. It works very well with the new site design.

PSD Graphics

PSD Graphics has a huge banner ad in between their layout’s header and sub-menu. It works well with the site design because it’s the right size, and I also think it grabs people’s attention.

Best Web Gallery

Nick La has used his dark website design to an advantage because all of the ads on the this CSS gallery are very bright and colourful, making them truly stand out.

BrushKing

BrushKing has a nice, rich, brown and red colour scheme. The web banner in their header works so well because it fits with their site design.

Web Designer Wall

Web Designer Wall has an in-content ad at the top of all their articles.

Creattica

Seven 125px banner ads are displayed in between Creattica’s design inspiration listings.

Tutorial9

Tutorial9’s colourful ad banners fit perfectly into the right-hand sidebar, and the ilustrative header helps the ads stand out.

Fuel Your Creativity

The colourful ads fit right in on the right-hand side of this design blog.

PSDFan

PSDFan has a large web banner that sits right above their blog posts, under the navigation.

WpRecipes.com

WpRecipes.com has a nice subtle sidebar in which they display 125px web banners. The background that curves around the site makes everything look more colourful.

CSS Drive

CSS Drive has many elements packed into their site. They even have enough room to include ads that blend into the site design very well.

Veerle’s blog

Veerle’s design blog displays ads via The Deck advertising network on her left-hand sidebar. Everything on the site has a lot of padding and space, which makes the viewer not miss the ad when scrolling.

kirupa.com

The huge Flash community, kirupa.com, displays small little adverts on the right-hand side of their site.

Vectortuts+

The popular site tuts+ network by Envato displays a large banner ad on the top of the site’s content, and also has ten smaller web banners on the right-hand sidebar. The banner has a nice rotated “advertise here” button next to it, which I like.

Function

Function displays their ad banners in a narrow but tall column in the center of their page.

Brusheezy

Brusheezy has a really clean web design, featuring their web banners on the sidebar.

About the Author

Web Designs that Use Textures Beautifully

Jacob Gube — Sun, 06 Jun 2010 15:30:33 +0000

Using textures in a web design gives it a unique look that roughens the sharpness and crispness that you can find in most other site designs. When used properly, the results of utilizing textures in a web layout can be stunning. This collection follows up on a collection posted last year called "30 Beautifully Textured Web Designs" (which you should check out if you haven’t already) with even more web designs that use textures masterfully.

BAHUR78

Dan Conaway

Vegas Uncork’d

Aussie BBQ Legends

Team Fannypack

Ministério de Artes Freedom

Mother Earth Brewing

Steve Mullen Creative

Tyler Gaw

Campus Vida

Mom & Popcorn

Occasions By Elizabeth

Coopers Kids

nykevanwyk

Kiwi

Sibling Rivalry

Revive Africa

The Crazy Love Campaign

Matt Salik

LE WEB DÉFI

Paloma Films

Zach Hendricks

Merge

icebolt.info

Tori’s Eye

The Blizzards

Design Embraced

CHRIS BENZ

Skiptracers Movie

Story Pixel

Last Letter

Mutt Ink

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and PHP development. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Beautiful Examples of 3D Elements in Web Design

Jacob Gube — Thu, 03 Jun 2010 11:00:29 +0000

3D elements used in web design can make a website more impressive and memorable. The purpose of 3D elements is to create a feeling of depth. For that reason, websites with 3D elements look interesting because most websites have a flat, 2-dimensional design.

In this collection, you will find 45 modern website designs that use 3D elements. I hope this showcase will be useful and inspiring to you.

Would you like to learn how to use 3D elements in your web designs? Check out our step-by-step tutorials:

3D Elements In Web Design Showcase

Hill Country Bible Church

DesignLovr

WebDesignFan

East Valley Bible Church

About the Author

Tomas Laurinavičius is interested in web design, graphic design and web development, based in Lithuania. He’s also the founder of Iniwoo, a site about photoshop, web design, wordpress and inspiration. If you’d like to connect with him, you can follow him on Twitter.

Beautiful and Useful 404 Error Pages for Inspiration

Jacob Gube — Sun, 30 May 2010 10:00:09 +0000

Errors don’t need to be ugly. On the Web, any links that are broken result in a 404 Not Found error message. There are two ways you can address this issue when your user navigates towards a broken link.

Option 1: Present the user with an old and boring default error page, which displays no information other than "There’s an error."

Option 2: The second solution is to present them with a custom error page design that can suggest alternative things they can see or do in order to resolve their problem.

Which one do you think is better? Obviously, the second option.

Here is a collection of 30 beautiful and creative 404 Not Found error message pages.

1. Mark Dijkstra

2. Chris Jennings

3. Carsonified

4. Astuteo

5. daniel karcher

6. HootSuite

7. Mixx

8. Frye / Wiles

9. Wufoo

10. deviantART

11. ferdaze.com

12. habrahabr.ru

13. Future of Web Design

14. Popscreen

15. Twurn

16. Propeller

17. CUOMA Design Studios

18. Product Planner

19. TattooSales.com

20. Spreadshirt

21. Bloqhead.com

22. Club Penguin

23. Jim Cromwell

24. Kochatelier Berlin

25. Acro Media Inc

26. South Park Studios

27. swissmiss

28. Dundee Living

29. Hornets247.com

30. iStockphoto

About the Author

Rishabh Agarwal is an Engineering student from India. In addition to that, he’s also a passionate Photographer and a Web Designer. He writes about technology on his blog, TechyLabs, and Photography on ShutterSkills. Follow him on Twitter: @rish404.

Beautiful Web Designs That Use Nature Themes

Jacob Gube — Fri, 28 May 2010 18:00:56 +0000

Giving your web design a natural look can make your website friendlier as well as show your appreciation of the environment. Nature-themed web designs can also give your website a unique character.

There are many ways you can use nature to make your website stand out or help you get a message across to your website visitors. Here is a showcase of over 40 exceptional web designs that use nature themes.

Here is another collection that you should also view: 30 Beautiful Web Designs Inspired by Nature.

Natural Elements

Using natural elements is a great way to subtly add a little bit of character and "green" into your website design.

Using Clouds

Clouds are also a good use of a subtle nature element, but instead of making a web design go in a "green" direction, clouds give the website more of a calming, peaceful, relaxing feel to it.

Silly Poems for Even Sillier Kids!

Photo Landscapes

Using photos or photo manipulations of landscapes gives you a realistic feel (obviously), but also a more serious and professional feel to your web design.

Villager Restaurant & Catering

Discover Tennessee Trails & Byways

Illustrated Landscapes

Using illustrated landscapes gives your web design that green feel, but it also gives a friendlier feel. The benefit of using illustrations is that — depending on the illustration style — you can get different moods and emotions across to your viewers.

The Shark Lab Aquarium and Research Facility

Orange Label Design Studio

Comcast Town

pallygiraffe.com

The Great Bearded Reef

About the Author

Tyler Denis is a part-time freelance designer from Ashland, New Hampshire. He is also the creator/writer of the design blog Denis Designs/blog, a website dedicated to bringing quality tutorials and inspiration. You can follow him on Twitter or at his personal site, Denis Designs.

Beautiful Footers in Modern Web Design for Inspiration

Jacob Gube — Sat, 22 May 2010 10:00:54 +0000

Over a year and a half ago, Six Revisions published a footer inspiration collection named 25 Stylish Website Footer Designs (which you should also check out). Today, we have the next generation of footer designs showcased in this collection.

1. Bits And Pixels

2. Urban Pie

3. Bristol Archive Records

4. Split Dadiz

5. BioWind

6. Sawyer Hollenshead

7. Vimeo

8. Blup

9. Future of Web Apps

10. Miss Web Lash

11. N.Design Studio

12. Viget Inspire

13. Studio Racket

14. Laura Alter

15. Soh Tanaka

16. David Hellmann

17. Kailoon

18. Sam Rayner

19. Caty Design Studio

20. Productive Dreams

21. Blogsolid

22. Store NVY

23. Manndible Cafe

24. ClanDrei

25. Cooper Live

26. Kulturbanause

27. TNT Pixel

28. Straw Poll Now

29. Freelenz

30. HomeProDecor

What Do You Think?

Have a look at some of the designs in our previous article compared to some of the footer designs of today’s modern websites. Do you prefer modern footer designs, or those of the previous 2 years?

About the Author

35 Astounding Examples of Waterscapes

Jacob Gube — Tue, 11 May 2010 11:22:54 +0000

There is not much that delights me more than the tranquility and serenity of waterscapes. Just the sound of the drifting and hustling waves brings me joy and relaxation.

Water has a unique assortment of calmness and aggression. For some, water is a symbol of composure, and for others, a symbol of pugnacity. Every waterscape has its own story to tell.

Here, we fill your monitor screen with some beautiful images of waterscapes. Every photographer of these scenes has captured a different and unparalleled perspective of water. Enjoy and be inspired!

The battle of elements continues

Chromatic Nature

Coogee Bay

Final Light below the Storm II

Ocean of Light

Ocean waterfall

Pringle

Rock Carved by the Ocean

Goodbye Winter – A Season Ends

About the Author

Bhanu Ahluwalia is a graduate in Computer Science and a social media enthusiast from India. He specializes in web design by qualification and photography by passion. He is an avid blogger, running TutZone and co-authoring DesignUnder and SloDive. You can reach him via Twitter.

Excellent Examples of Using Photos in Web Design

Jacob Gube — Fri, 07 May 2010 13:00:16 +0000

Using photos as a design element and central piece in a web design is a great way to get a point across to the viewers or to just add more depth into the design. We are going to look at some examples of two popular ways of using photos in a web layout: using a large photo as your background and using a photo as the central focus in the header.

Using Photos in the Background of a Web Design

Using a photo as a background can give your website an added visual element, as well as depth and space. On the other side of things, if the photo is poor quality or unappealing, it can bring down the entire look of the web page. So not every photo will work, but if you get one that does, it can really make the website stand out.

2K Games

Alley Pfannkuchen

The Bow Valley Club

Change Given

Eurostock Investimentos

Firefly Photography

Because It’s There

joshhemsley.com

Mission First

PRO FOODS

Property Pass

Radim Kurka

Raffaele Catania Designer

Rich Brown

Solegiallo

thesixtyone

Using Photos in the Header/Masthead of a Web Design

Another popular usage of incorporating photos in a web layout is by including them in the header/masthead section. Doing this can get across a visual element to attract people to your website, as well as give the viewer a sense of what you are trying to show them while not overwhelming them with an oversized photo. While a photo within the header probably won’t stand out as much as using it as a background, it can be a nice feature to work the rest of your website around.

AD60

Arnbäck Training

Bethany Care Society

Breezi

CapGrow

Duchy Originals

Emerald City Guitars

Fezzari

Hurco

HYBRIDWORKS

invisibleBracelet

Iron Fist Clothing

Island Dentistry

Life’s Not Fair But… My Knickers Are!

Matt Cronin

Max Tillich

Nick Cates Design

Omid for Iran

Sigma

Deep Standard

What do you think about using photos in web designs? What benefits and disadvantages does this have?

About the Author

7 Deadly Sins Represented with Web Design Colors

Jacob Gube — Thu, 06 May 2010 19:30:48 +0000

The Seven Deadly Sins represents vices and tendencies that were believed to be misdeeds in early Christian religion.

The sins are as follows: envy, pride, wrath, sloth, lust, greed, gluttony.

Each sin is said to be represented by a colour. For example, envy is best represented by the colour green, which — in many cultures — is also the symbolic color of money.

I thought it would be a fun experiment to compile a showcase of a few web designs based on the colours reflected by the seven deadly sins.

Note: The web designs featured were used for aesthetic purposes only, not to imply that they characterize the sins.

Green – Envy

Envy is best described as a desire for something more and to covet other people’s belongings and status. The opposite of envy is love.

Bam Creative

Free Gobbler

PSDChimp

Violet – Pride

Pride is when a person feels more special or important than others. At its worst, pride is narcissism. The opposite of pride is humility.

idt.net.cn

Newism

shizixiu.com.cn

Red – Wrath

Wrath can be best described as anger or hatred. It is the polar opposite of kindness.

Carsonified

KMX Karts

The Salon

Light Blue – Sloth

Sloth is the act of being lazy or idle. The opposite of sloth is zeal — or eagerness to achieve something good.

philipp doms

Iconjelly

Narhir Design

Blue – Lust

Lust is the act of giving into desire. The opposite of lust is self-control.

Strutta

Blue Water Productions

MediaCore

Yellow – Greed

Greed is the desire for wealth and status. The opposite of greed is generosity.

Nikon Festival

Booreiland

Champagne Warehouse

Orange – Gluttony

Gluttony is the act of consuming more than you need. The opposite of gluttony is temperance — being disciplined and wise with resources.

Cubicle Ninjas

scorchlondon

designedbynelleke

Why do you think these colours represent their respective sins? What emotions do you feel when seeing these colours in web designs?

About the Author

Nick Burd is a 23-year-old Freelance Web Developer from Ontario, Canada. He can be found at many places on the Net starting at his personal blog and portfolio, Twitter and LinkedIn.

Six Revisions » Design Showcase / Inspiration

50 Examples of Drop-Down Navigation Menus in Web Designs

1. Pure Grips

2. Porsche

3. B&Q

4. Red Brick Health

5. Carreras Con Futuro

6. Galaico Folia

7. Callaway Golf

8. Converse

9. Puma

10. Sunglass Hut

11. Nettuts+

12. Tennessee Trails & Byways

13. Gateway

14. Bern

15. Ski Alpine

16. Guitar Hero

17. Mac Appstorm

18. Noizi Kidz

19. Audi

20. Famous Cookies

21. Duchy of Cornwall Nursery

22. EA

23. Bonfire Snowboarding

24. Facebook

25. Nick Ad

26. TN Vacation

27. MTV UK

28. DC Shoes

29. Envato Marketplaces

30. Tennessee Theatre

31. Boden

32. White House

33. Navigant Consulting

34. Officers Club

35. Fall For Tennessee

36. Sony

37. Project Vino

38. Media Temple

39. Mozilla

40. August

41. Henleys Clothing

42. Digg

43. Action Envelope

44. Very

45. Incase

46. American Eagle

47. Mayflower Brewing

48. Select Clothing

49. Bird Malaysia

50. The Web Squeeze

Related Content

About the Author

Banner Ads: Excellent Examples for Inspiration

Related Content

About the Author

Web Designs that Use Textures Beautifully

Related Content

About the Author

Beautiful Examples of 3D Elements in Web Design

3D Elements In Web Design Showcase

Related Content

About the Author

Beautiful and Useful 404 Error Pages for Inspiration

1. Mark Dijkstra

2. Chris Jennings

3. Carsonified

4. Astuteo

5. daniel karcher

6. HootSuite

7. Mixx

8. Frye / Wiles

9. Wufoo

10. deviantART

11. ferdaze.com

12. habrahabr.ru

13. Future of Web Design

14. Popscreen

15. Twurn