Dropdown Menus: Tips And Tricks – Part 2

Dropdown Menus: Tips and Tricks – Part 2

In Part 1, I have highlighted some tips and tricks to get a website menu more user-friendly. In this part, I will continue talking about other useful tips and tricks to get a website menu even more attractive to website visitors.

8. Headers and Separators

Just look at these two menus below. The second version includes headers and separators and looks much better.

Headers and Separators

The Header is a useful element which allows organizing the menu elements into groups.
The Separator is a simple element which represents a thematic break between the groups of elements.

Using these elements significantly increase the user-friendliness of your menu.

9. Web Fonts

Choosing the right font is an important aspect of any web design project. The look of your menu is not an exception.

What does it mean for website visitors? Quite simply, web fonts can help contribute to a focused brand identity and add value to the user experience.

Web Fonts

Menu Generator includes 50+ of the most popular web fonts.

10. Multi-color 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.

Menu Generator includes the collection of mono-color icons, but what about multi-color icons? You can easily use images as multi-color icons for the menu elements.

Multi-color icons

The menu uses a special mechanism for image preloading. Preloading is a technique where the image is loaded into the cache before it's needed. That way when the image is really needed it is retrieved from the cache and displayed immediately, without an "empty square".

It is recommended to use PNG format because it contains information about transparency. So PNG can easily be added on top of the colored background without editing them.

There is a fantastic icon search engine with more than 500,000 icons - IconArchive.

11. Menu with Logo Image

Adding a logo image to the navigation menu is a great way to promote your brand. It is pretty easy.

Logo Image

12. Element Paddings

Need more space around an element's content? The padding property allows you to specify how much space should appear between the content of an element and its border.

Element Paddings

The paddings help you to set the desired height/width of the menu items for seamless integration.

13. Tooltips

A tooltip is a powerful way to provide users with information about the element, when they need it, with minimal effort on their part. The tooltip appears when the user hovers the pointer over an element.


14. JavaScript on element click

Need to launch a client-side procedure, call JQuery method or execute JavaScript function in response to an element click?

Use the following syntax in the Link field: javascript: function(...);

JavaScript on element click

To call two or more functions, use the syntax: javascript: function1(...); function2(...); function3(...);

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