Posts Tagged ‘navigation menus’

Successful, eye-catching and mainly user-friendly site navigation sometimes is key to whole web design, because users usually search for navigation at first, when they visit website. Also don’t shy to experiment – portfolio websites can stand out just by that, creating something beautiful and unusual. In our days there are times when whole websites slide over your eyes, possibilities are pretty limitless. Keeping in mind such parameters, I created a list with 10 innovative, beautiful, creative and eye-catching navigation menus for your inspiration in web development process.

  1. Panic – Coda
  2. Popular menu already, you may know about this one before.

  3. Helmy-Bern
  4. Excellent example of well implemented grunge website and JavaScript navigation

  5. SkiAlpine
  6. Simple yet well designed navigation dropdown menu.

  7. TapTapTap
  8. Exceptional navigation, you gonna love this one.

  9. TheHoleInOurGospel

  10. Apple
  11. Whole website is one big beauty and MAC section has interesting sliding menu.

  12. Creasenso
  13. Beautiful rollover effects in navigation.

  14. Branded07

  15. Aperfolio

  16. AteBits

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.

KK Media

dhtml menu

Bite Club

icon navigation menu

Mac Rabbit

drop down menuNarwhal Company

icon menu

Pixel Resort

navigation bar

Fishing Cactus

drop down menu

Tutorial 9

tab menu

Envira Media

javascript menu

Duarte Pires

horizontal menu

Weblifting

Navigation menus have to be intuitive, precise and easy-to-use. One simple, basic principle, which is common for all kinds of nav bars you would ever want to use for your projects. In fact, navigation menu is probably the most important element in web design: after all, it is being used more often than any other element on a given page. Therefore it’s important to make sure that your visitors will find they way around the site structure – however complex the latter might be.

So how do designers cope with a challenging task to create an attractive and usable menu? Which results can be achieved? OK, that’s a tough one. Let’s take a look around.

Below you’ll find 8 beautiful and user-friendly Navigation Menus and solutions.

BREAKER DESIGN

nav bar

folietto

drop down menu

Pulmad, peod, lillesalong… – Annilill Peoteenindus

dhtml menu

coda.coza

drop-down menu

EGOLOUNGE *Büro für digitales Design

menu bar

Convan Design – Howdy

popup menu

far from fearless

pop up menu

Erika Greco – Blog

At present, website designers can complete the various navigation menus by different technologies, like CSS menu, JavaScript Menu, Flash menu, HTML menu and jQuery menu. Then, which is the popular way to create navigation bar? The website guru prefers to design web menu by JS and CSS code; but for majority of us, we’d like to make navigation menu by professional menu creator. Here lists three reasons why choose menu creator:

We will take Sothink DHTML Menu for example to explain advantages about menu creator.

WYSWYG Menu Creator Makes Menu Creation Simple

  1. Get a clear menu structure from menu panel; and freely adjust the position for menu item by clicking.menu-creator-panel
  2. Preview JavaScript menu in real time with menu creator.
    menu creator
  3. Choose menu properties and customize the corresponding menu style in menu creator.menu-creator-property

Finish Functional Menus in Easy Way

  1. Set menu type as Float to float menu in fixed position on webpage.float-menu
  2. Edit highlight settings for highlight menu to show where the user is on the web site.Menu Creator - Highlight Menu
  3. Make long menu items scroll and keep their scrolling in a fixed depth.Menu Creator - Scrolling Menu

Quick Start Menu from Rich Resources

  1. Start web menu from the various free menu templates.menu-creator-template
  2. Apply preset menu style to the menu item.
  3. Apply resources from image library to design menu in less time.

The above-mentioned features are only in menu creator; download Sothink DHTML Menu to get more features which other technologies are unable to achieve.

Usability is an essential goal of any website, and usable navigation is something every website needs. It determines where users are led and how they interact with the website. Without usable navigation, content becomes all but useless. Menus need to be simple enough for the user to understand, but also contain the elements necessary to guide the user through the website — with some creativity and good design thrown in.
Below we present over 10 excellent navigation menus — we feature CSS-based design solutions, CSS+JavaScript-based menus and Flash-designs. However, they all have something in common: they are user-friendly yet creative and perfectly fit to the style of their respective websites.

  • Nopokographics8
    Vertical navigation menus are used very rarely, for the simple reason: they are harder to use. However, some designers risk unusual approaches. Nopoko Graphics uses an arrow and a hover-effect for its vertical navigation menu.

    drop-down-menu-1

  • Cosmicsoda10
    This large and colorful menu is very noticeable and uses a slight hover effect to further define the menu items.

    drop-down-menu-2

  • Clearleft14
    Clearleft uses a couple of paper pieces for its navigation.

    navigation-menu-3

  • Water’s Edge Media19
    Patricia Abbott uses clothespins for the navigation options.

    dhtml-menu-4

  • Jeff Sarmiento24
    Why not try a sloping navigation options once in a while?

  • Mac Rabbit
    One more example of a large and clean menu. This one uses icons to aid the reader in recognizing each item’s function.

  • DFW UPA34
    Icons reinforce the menu items on this website and add emphasis to each option.

    menu-samples-7

  • Duarte Pires36
    This menu is located close to the content, where it is easy to use. It uses large icons, which adds a visual element to the navigation. Also, the menu on other pages uses the same icons in a vertical layout, bringing consistency to the website. The icons may not fit perfectly, but it’s a nice idea.

    menu-templates-8

  • Eric Johansson42
    Eric Johansson, a designer from Sweden, uses tall vertical blocks and images for his navigation.

  • Bern45
    I am a big fan of this navigation layout. I like how the menu fits in with the grunge theme. It also uses another jQuery drop-down effect.

The article is from smashingmagazine.com.