Categories

Featured templates

HTML. How to create a menu

Chris Diaz March 13, 2020
Rating: 4.0. From 6 votes.
Please wait...

This tutorial shows how to create a menu in HTML. Usually to create a menu we use an onordered list. You can for sure use the div, span, p or other tags but unordered list gives you more flexibility in future stling of the menu.

First of all open your HTML page with your editor.

The onordered list is created using the <ul> tags. Open the ul tag and close it:

<ul></ul>

Then you need to add the list items to the list. Each menu button will be asingle list item.

Let’s create a menu with 5 items:

<ul>
	<li>Home</li>
	<li>About</li>
	<li>Services</li>
	<li>Partners</li>
	<li>Contacts</li>
</ul>

The last thing that we need is to add links to our menu buttons. Links in HTML are created using the <a> tag.

<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Services</a></li>
	<li><a href="#">Partners</a></li>
	<li><a href="#">Contacts</a></li>
</ul>
 

As you can see each <a> tag has a href parameter. Href parameter defines the URL or the file that the menu item is linked to. Replace the # symbol with the filename or the URL to activate the links.


Zemez Responsive Navbar JavaScript

Zemez Responsive Navbar JavaScript.

Demo | Download

When developing the site, “the fewer clicks, the better” concept should be considered. You should help your visitors find the information they want as quickly as possible. The site must respond instantly to the user’s request. How to make sure your website navigation meets all these requirements? Take a moment to check a highly customizable Navbar JavaScript developed by Zemez.

The product offers a fully responsive and cross-browser compatible design. Zemez provides 8 amazing layouts for you to choose the most suitable option for your project. Pick up fixed and fullwidth layouts either in a dark or light color scheme. Easy-to-integrate Navbar Script does not require any specific technical knowledge.

More features:

  • Dropdowns and megamenus
  • Mobile app style look
  • jQuery 1.11+/jQuery Easing 1.1+ are required
  • Single code for all devices
  • Effective 24/7 support
This entry was posted in Working with HTML and tagged HTML, list, menu. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket

  • Tim

    What if you want the same menu on every page? Do you have to paste this menu HTML into every page?

    Rating: 5.0. From 1 vote.
    Please wait...
    • Anonymous

      Yes, thats correct. You need to paste the same code into each HTML page.

      Rating: 5.0. From 1 vote.
      Please wait...