24

Jan 11

10 Drop-Down Navigation Menu Examples in Web Designs

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 appea.

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:

Carreras Con Futuro

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

drop down menu

Converse

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

Navigation menu

Bern

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

dhtml menu

Ski Alpine

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

navigation bar

Noizi Kidz

This navigation is bright and shaped unconventionally.

menu maker

Famous Cookies

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

Boden

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

web menu

Navigant Consulting

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

menu builder

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.

web menu maker

Mozilla

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

drop-down menu

Posted in Latest Samples | 3,271 Comments
Tags: , , , ,

21

Jan 11

5 Gorgeous Navigation Menus

In this post I’d like to take a look at more than 5 stellar examples of navigation menus that positively impact the design of a website. The list includes a great deal of variety. Regardless of what you personally prefer, there should be some inspirational examples in here for you.

Soula

web menu

Africa Oasis Project

DHTML menuTisha Creative

navigation bar

Tennessee Vacation

menu creator

Timothy Sykes

menu maker

Posted in Latest Samples | 2,319 Comments
Tags: , , ,

21

Jan 11

How to make navigation menu?

It is time to design new style for your website. With festival arrival, special day coming, website designers will work out new style to dress up the existing website. When web has been changed its style to new one, it is obviously outdated if navigation menu still keeps unchangeable.  For website that needs to transform frequently, you should solve the problem about how to build navigation menu to match with versatile website styles. To get perfect visual effect between website and navigation, you need to edit two elements in navigation menu, background image or color. Let’s see how Sothink DHTML Menu create navigation menu:

Step 1: Add Menu Items to scheme structure for navigation menu

Launch Sothink DHTML Menu, you can add menu item on the left panel. First, check one menu item; and then, choose the button to add the same-level menu items or sub-level menu items; final, click once to add one menu item, and click more add more.

navigation menu builderStep 2: Apply menu style from templates to navigation menu

After menu structure is done, you can edit the menu item, including text, link, and font. To quick Apply the menu style from template, you can choose “Template > Apply template to menu” command to apply template style to your navigation menu.

drop down menuStep 2: Publish navigation menu to website

Menu creation is finished. Click the button “Publish” to choose the best publishing method. After the option is check, you can follow the step to publish your navigation to website. And upload all the resources for navigation menu.

navigation menu

Posted in Tutorial Release | 1,931 Comments
Tags: , , , ,

19

Jan 11

15 Website Menus Made by Various Techniques – Part Two

Website menu has really important role in almost all websites, it makes website navigation easier and saves space to display the more contents. Besides, the modern website menu has the features of usability and appearance. A clear and usable menu can guide the users to the wanted page with one-click; and an attractive and eye-catching web menu can decorate the website better. To create a website menu, there are several techniques available, such as JavaScript, CSS, jQuery, Flash and Database. Let’s view the website menus made by various techniques:

Website menus made by jQuery

jQuery menu is a trend for website navigation, it is the easiest and best supported way to implement simple animation online.

  1. Create Vimeo-like top navigationWebsite Menu - jQuery Menu
  2. Menumatic mootoolsWebsite Menu - jQuery Menu
  3. jQuery website menu for navigation Website Menu - jQuery Menu

Website menus made by Flash

Flash website menu impresses the viewers because of the stunning animation and well cross-browser compatibility.

  1. Classic Flash menuWebsite Menu - Flash Menu
  2. Float Flash menuWebsite Menu - Flash Menu
  3. Crystal Flash menuWebsite Menu - Flash Menu

Database-driven website menu

This type of website menu is generated from database, such as ASP, PHP, JSP, ASP.NET, ColdFusion and more.

  1. Website menu generated by JSPWebsite Menu - Database Driven Menu
  2. Website menu generated by ColdFusionWebsite Menu - Database Driven Menu
  3. Website menu generated by VB.NETWebsite Menu - Database Driven Menu

Posted in Latest Samples | 2,403 Comments
Tags: , , , , ,

18

Jan 11

15 Website Menu Styles Made by Various Techniques – Part One

Website menu has really important role in almost all websites, it makes webiste navigation easier and saves space to display the more contents. Besides, the modern website menu has the features of usability and appearance. A clear and usable website menu can guide the users to the wanted page with one-click; and an attractive and eye-catching website menu can decorate the website better. To create a website menu, the several techniques are available, such as JavaScript, CSS, jQuery, Flash and Database. Let’s view the website menu styles made by various techniques:

Website menu styles made by JavaScript

dhtml-menunavigation menudrop down menuWebsite menu styles made by CSS

css-menu

css menu

drop-down menu

Posted in Latest Samples | 2,801 Comments
Tags: , , , ,

17

Jan 11

5 Beautiful Navigation Menus with Website Color Combination

The navigation of a website is meant to be clicked. It shouldn’t be hard to find. It’s important that it stands out from the rest of the elements on the page with elegant style but yet still matches the overall style and color of the design. Here is a showcase of websites that achieve this in a very stylish way. These navigations look amazing, have serious click appeal, and are guaranteed to inspire you for it’s beautifully color variation with the whole website.

navigation menu

Positive Impressions

DHTML Menu

Hart & Huntington

Amigo in Granada

drop down menu

Yankee Soda

web menu

Kelt

drop-down menu

Posted in Latest Samples | 3,013 Comments
Tags: , , , ,

13

Jan 11

8 Unusual Navigation Menus In CSS, Flash And JavaScript

What is one of the aspect of a website that always needed? It is the navigation menu. Navigation menu is a useful part of  the website because it leads the user to different part of the website. Interaction to the website is the main use of the navigation menu. More and more great looking and user-friendly navigation menus are being created that gives  life to the websites. I’ll be featuring 8 great looking and really unusual navigation menus which are CSS-based design solutions, JavaScript-based menus and Flash-designs.

Dave Werner

A creative person uses his own works to lead the users on his portfolio.

Enila.fr

Small squares that put together that acts as the navigation and collaboration of works.

Got Milk?

An interesting navigation in a ribbon with a simple hover effect. When an icon hovered, the content menu is presented.

Havaianas

A colorful map that has the touch of the slipper texture that Havaianas proud about.

HBO

HBO , a tv-movie network, creates an interactive selection of movies for its navigation.

Waterlife

The fluid navigation menu that brings you to the motion of a lake.

Cognigen

Presents a pressed and clear view of the navigation.

Jeff Sarmiento

Sloping Navigation that creates a creativity and a punk style looking menu that Jeff Sarmiento used.

Posted in Latest Samples | 2,177 Comments
Tags: , , , , , ,

12

Jan 11

How to Create Dynamic Tree Menu with Created Recordset from Dreamweaver

Step1. Follow the visual tutorial.

http://www.sothink.com/tutorials/how-to-create-dynamic-tree-menu-with-created-recordset-from-dreamweaver.htm

Step2.

Launch Sothink Tree Menu. Create a new menu item and Input ”

<%=sCatName%>

” in it.

Enter “Node Setting > Condition” and input the following codes in Prefix:
/*
<%
While Not Recordset1.EOF
sCatName=Recordset1.Fields.Item(“NAME”).Value
%>
*/

Then input the following codes in Suffix:

/*
<%
RecordSet1.MoveNext
Wend
%>
*/

Step3.

Create a sub item for this menu item, then input ”

<%=sProduct%>

” in it and input

<%=sLink%>

in link field.

Enter “Node Setting > Condition” and input the following codes in Prefix:
/*
<%
Recordset2.Filter = “CATID=” & Recordset1.Fields.Item(“ID”).Value
While Not RecordSet2.EOF
sProduct=Recordset2.Fields.Item(“NAME”).Value
sLink=Recordset2.Fields.Item(“LINK”).Value
%>
*/

Then input the following codes in Suffix:
/*
<%
RecordSet2.MoveNext
Wend
%>

*/
Step4.

Enter “Global Setting > Web Path” to set the webpath as below:

Script path:

http;//localhost/js

Image path:

http;//localhost/image
Step5.

Publish the menu to the ASP page we have just created in step1.

Now you have successfully use the created recordset from DW with Tree Menu.

Posted in Tutorial Release | 2,223 Comments
Tags: , , , , ,

11

Jan 11

Share 5 Drop Down Menus from Big Company

From a design standpoint, however, drop-down menus are an excellent feature because they help clean up a busy layout. If structured correctly, drop-down menus can be a great navigation tool, while still being a usable and attractive design feature.

web menu

navigation bar

drop-down-menu

dropdown-menu

dhtml-menu

Posted in Latest Samples | 2,304 Comments
Tags: , , ,

10

Jan 11

How to Create Black Menu?

Black menu symbolizes fashion, business, reliance, which is widely used for the various website, such as commerce, government and education. Black menu is easy to match with website color which ranges from light to dark, the classic color scheme includes black & white, red & black and black & blue. Black menu is plain and high capacity to contain almost all URL links to reach the target page quickly.

black-menu

How to Create Black Menu?

With Sothink DHTML Menu, you can choose the proper one from 2 methods to get your wanted black menu.

We will take this menu for example to learn setting black menu:

Navigation Menu

Method One: Insert image of black background as background for the whole menu.

The black menu created by this method will be like this:

Navigation Menu - Black Menu

  1. Check “Top-Level-Menu” in the menu panel, and enter “Popup menu > Background” to choose black image as background for the whole menu.

    Black Menu - Popup Menu

  2. Check all menu items, and enter “Menu Item > Background” to set background color as “Transparent”.

    Black Menu - Menu Item

Method Two: Set black background image or background color to every menu item

The black menu created by this method will be like this:

Navigation Menu - Black Menu

  1. Check all menu items, and enter “Menu Item > Background” to set background color as “black” or insert black image as background image.

    Black Menu - Menu Item

  2. Check “Top-Level-Menu” and enter “Menu Item > Border” to set border as 0; check the popup menu and enter “Popup Menu > Border” to set border as 0; and check menu items and enter “Menu Item > Border” to set border as 0.

Posted in Tutorial Release | 2,323 Comments
Tags: , , ,

Older Entries
Newer Entries