Blog

Creating Advanced Drop-Down Menus

Posted: January 15, 2016  |  By Andrei Pogorelov


Creating Advanced Drop-Down Menus

Today, a simple CSS menu is the most common tool for website navigation. Unfortunately, in many cases, a CSS menu does not meet all requirements of usability.

In this short post, I will show you how to create a truly user-friendly website menu with the following "sweet" features:
  • Headers & Separators
  • Arrow indicators
  • Icons
  • Multi-column drop-down menu
To create the menu, we will use the popular online tool - Drop Down Menu Generator.


Menu Elements / Arrow Indicators


The menu consists of the three types of elements: Links, Headers, and Separators.
  • Link (1) is a basic menu element. It can include an icon, text (label) and link (URL) to the web page or document. The browser is directed to the URL when a user clicks on the Link Element.
  • Header (2) is a useful text-only element which allows organizing the menu elements into groups.
  • Separator (3) is a simple element (line) which represents a thematic break between the groups of elements.
Three types of elements: Links, Headers, and Separators

  • To add an element, we click the corresponding button (4).
  • To move an element, we just select it and drag it to another location (5).
  • To make an element as a child (as a submenu) for the parent element, we drag it and put it to the same location with a small indent on the left (6). Arrow indicator (7) displayed automatically if the Link Element has child elements (submenu).
  • To edit the properties, we select the element (click on it). The Properties Form (8) is located on the right below the Design Window (9).
  • After the changes, we just click on the "Refresh" button. The result we see in the Design Window.

Icons


Icons are very important to the user-interface. Menu with icons stands out from the crowd and looks a lot better than the other ones. The presence of icons proves the quality of the website, makes a great impression on visitors and increases the site traffic.

To add an icon to the Link Element, we select the element (1), then open the collection of icons (2) and select the appropriate icon by one mouse click (3).


Drop-Down Menu with Icons

Menu Generator includes the collection of 100+ most popular icons. We can choose from the general icons (Home, Help, E-mail, etc.), icons for social networking (Facebook, Twitter, etc.), multi-purpose icons (arrows, dots, etc.) and others.

If necessary, we can upload a custom icon set. Details are described in this blog post: How to Add Vector Icons to Drop-Down Menu.

Menu Generator does not use images for icons. Icon collection is an additional font with Unicode symbols. Therefore, the menu does not lose in performance, because it is not required to make numerous requests to the server to display each image.



Multi-column drop-down menu


In our menu, the "Products" element (1) has a large number of child elements (including headers and separators). As a result, the submenu height is too large.

The feature "Multi-column submenu" (2) allows us to split the submenu into columns. This feature gives an effective solution to displaying a lot of content while keeping a clean layout.

To add a vertical line between each column to make the layout more visually appealing, we enable the "Column separators" option (3).

The "Submenu alignment" value specifies the horizontal submenu position relative to its parent element.


Drop-Down Menu with a large number of elements

Additional customization (by using the "Customize" button) is based on drag-and-drop functionality and allows us to define how many columns required and define the place for each submenu element.


Multi-column drop-down menu


Live Demo


This Live Demo demonstrates the menu with multiple-column drop-down submenu. Details:
  • The "Products" submenu is split into three columns.
  • Elements are arranged into groups (with headers).
  • The "All Devices" element has also a submenu.
  • The submenu includes a vertical line between each column.

Conclusion


I hope this short post will inspire you to create an advanced Drop-Down Menu for your website or blog. Please do not hesitate to ask any questions.


Links


Live Demo: http://www.dropdownmenugenerator.com/Demos/MultiColumn/
Menu Generator: http://www.dropdownmenugenerator.com
Question Form: http://www.dropdownmenugenerator.com/ContactUs.aspx






     Menu Generator  04/27/2017 (1663)         Follow Us         Links
   
APNSoft.com
 © 2003-2017 APNSoft.
  All rights reserved.
Uploading ...