Dropdown Menus: Tips And Tricks – Part 1

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

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

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

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

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

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

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

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

To be continued ...


Featured Posts
Contact Us
We are always here to help answer your questions. So, if you have any concerns or requests, please feel free to contact us, and we’ll get back to you soon.

Contact Us

Online Logo Maker
Uploading ...