How To Create Menu With Images

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


Live Demo:
Menu Generator:
Free stock photos:
Online images editor:

Menu Generator
12/31/2019 (4610)


Follow Us

 © 2003-2020 APNSoft.
  All rights reserved.
Uploading ...