Blog

Drop-Down Menus: Tips and Tricks

Posted: February 15, 2017  |  By Andrei Pogorelov


Drop-Down Menus: Tips and Tricks

In this short post, I’m going to show how to use Menu Generator more effectively. The main goal is to make a website menu most user-friendly.


Right float element


The elements such as "Login", "Your Cart", "Search", "Help", etc. should be placed on the right side of the menu bar.


Right float element

The Right float property specifies that the element will float on the right side.


Right float property


Submenu alignment


Set the correct submenu alignment, especially for the elements on the right side of the menu bar.


Submenu alignment

To set the alignment, select the parent element and open the "Submenu Options" tab.
The Submenu alignment property specifies the horizontal submenu position relative to its parent element.


Submenu alignment property


Scrollable submenu


Is the submenu a long list of elements? Make the submenu scrollable.

The Submenus height property specifies the maximum height in pixels for submenus. A submenu automatically becomes scrollable if its height less than the real height of its contents.


Scrollable submenu


Multi-column submenu


Has the element too many child elements? As an alternate way just split them into two or more columns.

Select the parent element (the "Products" in our example) and open the "Submenu Options" tab. The Multi-column submenu property allows splitting the submenu into columns.


Multi-column submenu


Transparent menu


By default, the menu bar has a background. If your website has ist own background you want to show through the menu bar, check the Transparent menu option.


Transparent menu


Line breaks in the element text


The menu element can include a long text. To add a line break, just insert the "<br>" code.


Line breaks

Unexpected line breaks? In some cases, the browser adds line breaks if the page does not include the correct !DOCTYPE directive. To remove the line break, use the "&nbsp;" instead of the space.


Line breaks


Element highlighting


To indicate which page the user is currently viewing, highlight the corresponding menu element with a small JavaScript code. Paste this code into the page below the menu's code.

The code highlights the selected element as well as all the parent elements (the whole navigation path).


Element highlighting

To get the code, click on the element; the highlighting code is under the "Element Properties" tab.


Code to highlight the Element


Links


Menu Generator: http://www.dropdownmenugenerator.com
Question Form: http://www.dropdownmenugenerator.com/ContactUs.aspx






     Menu Generator  10/13/2017 (1685)         Follow Us         Links
   
APNSoft.com
 © 2003-2017 APNSoft.
  All rights reserved.
Uploading ...