Blog

Drop-Down Menus: Tips and Tricks – Part 2

Posted: November 22, 2017  |  By Andrei Pogorelov


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


Tooltips


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


Links


Tips and Tricks – Part 1: http://www.dropdownmenugenerator.com/Blog.aspx?ID=20170215
Menu Generator: http://www.dropdownmenugenerator.com
Question Form: http://www.dropdownmenugenerator.com/ContactUs.aspx
IconArchive: http://www.iconarchive.com






     Menu Generator  12/12/2017 (2075)         Follow Us         Links
   
APNSoft.com
 © 2003-2017 APNSoft.
  All rights reserved.
Uploading ...