How To Create Menu With Images

Menu with images

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 menu to make website navigation more user-friendly?

In this post, I will describe how to add images to the website navigation system. 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.

Navigation panel for the cafe/restaurant website

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

Adding root elements

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

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

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.

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.

Multi-column submenu

Adding the menu to the web page

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

Adding to the web page

Image Preloading Mechanism

The navigation system 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.


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