Blog posts

Blog

How to Add Images to Drop-Down Menu

Posted: October 09, 2018  |  By Andrei Pogorelov


How to Add Images to Drop-Down Menu

It's a well-known fact that images can help attract more visitors to the website, and ultimately help to achieve business goals such as sales. So why not add images to the drop-down menu to make website navigation more user-friendly?

In this post, I will describe how to add images to the website navigation menu. Knowledge of HTML, CSS or JavaScript is not required.

Let's assume that we manage a website linked to a cafe or restaurant business. Our website needs a simple navigation bar which includes the "Food Menus" root element with the child elements "Breakfast", "Lunch", "Dinner" and others.


Menu for the cafe/restaurant website

To create such a menu, no need to write HTML/CSS code - all we need is Drop Down Menu Generator (the online tool which does everything automatically).


Adding root elements

The main part of the Menu Generator is the Structure Editor. It is based on drag-and-drop functionality and enables us to easily create a menu structure with multiple levels of hierarchy.

To add an element to our navigation menu, we click on the "Add Element" button. Under the "Element Properties" Tab we set the Text and the Link (URL) of the page.


Menu Generator - Structure Editor


Adding child image elements

When the root elements have added to the structure, we add images and make them child elements (as a submenu) of the parent "Food Menus" element.

To make an element as a child, we drag it and put it underneath the parent element to the same location with a small indent on the left.


Menu Generator - Child image elements


Splitting the submenu into columns

On the next step, we split the "Food Menus" child elements into columns. Multi-column submenus look more attractive to users. We select the "Food Menus" (just click on it) and enable the "Multi-column submenu" option under the "Submenu Options" Tab.

Now our website navigation menu looks and serves much better.


Menu Generator - Multi-column submenu


Adding the menu to the web page

To add our menu to the web page, we copy the menu's Embed Code and paste it in the page HTML anywhere between the <body> and </body> tags. Pretty simple and efficient.


Menu Generator - Adding to the web page


Image Preloading Mechanism

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


Live Demo

This Live Demo demonstrates the plain web page with a simple navigation menu for the cafe/restaurant website. The "Food Menus" element includes the child elements with images.


Links

Live Demo: http://www.dropdownmenugenerator.com/Demos/FoodMenus/
Menu Generator: http://www.dropdownmenugenerator.com
Free stock photos: https://www.pexels.com/
Online images editor: http://picresize.com/






     Menu Generator  01/21/2019 (3887)         Follow Us         Links
   
APNSoft.com
 © 2003-2019 APNSoft.
  All rights reserved.
Uploading ...