Create Responsive Horizontal Dropdown Navigation Menu with HTML & CSS

Share:

Tutorial: Create Responsive Horizontal Dropdown Navigation Menu with HTML & CSS. Menu navigation is one of the important components in a website. Usually the navigation menu displays links from important pages of a website such as about, contact, archives, and other website pages to help visitors to get lots of sources of information about the website and its content.
Tutorial: Create Responsive Horizontal Dropdown Navigation Menu with HTML & CSS
Almost all websites have a navigation menu. Therefore, in studying website design, we should be able to create a navigation menu that responsive and attractive using html and some css code like horizontal ul and li style property because in this post we will create a horizontal dropdown navigation menu. Learn more, read the following tutorial :

Tutorial : Create Responsive Horizontal Dropdown Navigation Menu
with HTML & CSS

HTML Code To Create Horizontal Navigation Menu

First, we create a navigation menu using ul and li tag in basic html. Here’s an example of code the navigation menu:

<ul>
  <li><a href="" class="home">Home</a></li>
  <li><a href="" class="about">About</a></li>
</ul>

HTML Code To Create Dropdown Navigation Menu

To create a sub navigation menu with dropdown, we had to create ul and li tag inside each li tag on each main navigation menu. example :

<ul>
  <li><a href="" class="home">Home</a></li>
  <li><a href="" class="about">About</a>
  	<ul>
      <li class="about1"><a href="">The Team</a></li>
      <li class="about2"><a href="">History</a></li>
      <li class="about3"><a href="">Vision</a></li>
           </ul>
</li>
</ul>

The example above shows, the team, history and vision is a sub navigation menu of about.

CSS Code To Create Horizontal Navigation Menu

In the previous step, in every li tag has been inserted with the class tag, the goal is to make it easier to beautify every li tag using the help of the class tag. Example code:
Main navigation menu

ul li a.about {
	display: block;
	text-decoration: none;
	color: #ffffff;
	border-top: 1px solid #ffffff;
	padding: 5px 15px 5px 28px;
	margin-left: 1px;
	margin-right:5px;
	white-space: nowrap;
	-moz-border-radius: 5px;
    border-radius: 5px;
	background: #3271ba url("http://1.bp.blogspot.com/-JRx1umv9vKY/UezUZ7IC1PI/AAAAAAAAA4g/AAhbO2RcQvI/s1600/Create+Responsive+Horizontal+Dropdown+Navigation+Menu+about.png") no-repeat;
    background-size:24px 24px;
}

Sub Menu navigation
So that each sub navigation menu has a different color, we change the background on the li tag sub navigation menu is as follows :

.about1 a{
	background: #4f8bd0;
	}
.about2 a{
	background: #77a6db;
}
.about3 a{
	background: #9fc0e6;
}

Next is to create the main navigation menu is in a horizontal line, which is using display: inline-block;. Learn the following css tutorial:

ul li {
	display: inline-block;
	position: relative;
	float: left;
}

Below is the complete script of responsive horizontal dropdown navigation menu above, please copy into notepad or adobe dreamweaver.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Create Responsive Horizontal Dropdown Navigation Menu
with HTML & CSS | Tutorial.World.Edu</title>
<style>
body{
	background: url("http://4.bp.blogspot.com/-oZm7x6OiBDM/UezTLH-_mkI/AAAAAAAAA38/niGzY0pVB1E/s1600/back+Create+Responsive+Vertical+Horizontal+Dropdown+Navigation+Menu.jpg") repeat;
}
h1 {
	font-family: Arial, Verdana;
	font-size: 24px;
    text-align:center;
	color:#fff;
    margin-top:50px;
}
a{
	font-family: Arial, Verdana;
	font-weight:bold;
    text-align:center;
	color:#fff;
	text-decoration: none;
}
.content{
    margin-top:30px;
    margin-left:380px;
}
ul {
	font-family: Arial, Verdana;
	font-size: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
ul li {
	display: inline-block;
	position: relative;
	float: left;
}
li ul {
	display: none;
}
ul li a {
	display: block;
	text-decoration: none;
	padding: 5px 15px 5px 15px;
	margin-left: 1px;
	margin-right:5px;
	white-space: nowrap;
	color: #ffffff;
	-moz-border-radius: 10px;
    border-radius: 10px;
}
ul li a.home {
	display: block;
	text-decoration: none;
	color: #ffffff;
	border-top: 1px solid #ffffff;
	padding: 5px 15px 5px 28px;
	margin-left: 1px;
	margin-right:5px;
	white-space: nowrap;
	-moz-border-radius: 5px;
    border-radius: 5px;
	background: #d06203 url("http://2.bp.blogspot.com/-c1B-G000djQ/UezUUWf-c6I/AAAAAAAAA4U/WstXa7ed8Ro/s1600/Create+Responsive+Horizontal+Dropdown+Navigation+Menu+home.png") no-repeat;
    background-size:24px 24px;
}
ul li a.about {
	display: block;
	text-decoration: none;
	color: #ffffff;
	border-top: 1px solid #ffffff;
	padding: 5px 15px 5px 28px;
	margin-left: 1px;
	margin-right:5px;
	white-space: nowrap;
	-moz-border-radius: 5px;
    border-radius: 5px;
	background: #3271ba url("http://1.bp.blogspot.com/-JRx1umv9vKY/UezUZ7IC1PI/AAAAAAAAA4g/AAhbO2RcQvI/s1600/Create+Responsive+Horizontal+Dropdown+Navigation+Menu+about.png") no-repeat;
    background-size:24px 24px;
}
ul li a.contact {
	display: block;
	text-decoration: none;
	color: #ffffff;
	border-top: 1px solid #ffffff;
	padding: 5px 15px 5px 28px;
	margin-left: 1px;
	margin-right:5px;
	white-space: nowrap;
	-moz-border-radius: 5px;
    border-radius: 5px;
	background: #4c7f22 url("http://2.bp.blogspot.com/-mfm8YmO5oQk/UezUnIdXhHI/AAAAAAAAA4k/XEf673TdZlo/s1600/Create+Responsive+Horizontal+Dropdown+Navigation+Menu+contact.png") no-repeat;
    background-size:24px 24px;
}
ul li a.services {
	display: block;
	text-decoration: none;
	color: #ffffff;
	border-top: 1px solid #ffffff;
	padding: 5px 15px 5px 28px;
	margin-left: 1px;
	margin-right:5px;
	white-space: nowrap;
	-moz-border-radius: 5px;
    border-radius: 5px;
	background: #ca3b7d url("http://1.bp.blogspot.com/-h-M_Ho7U2Z4/UezUrobjHHI/AAAAAAAAA4s/vXGh62aMxdA/s1600/Create+Responsive+Horizontal+Dropdown+Navigation+Menu+services.png") no-repeat;
    background-size:24px 24px;
}
li:hover ul {
	display: block;
	position: absolute;
}
li:hover li {
	float: none;
	font-size: 16px;
	font-weight:bold;
	margin-top:3px;

}
.about1 a{
	background: #4f8bd0;
	}
.about2 a{
	background: #77a6db;
}
.about3 a{
	background: #9fc0e6;
}
.contact1 a{
	background: #64a72d;
}
.contact2 a{
	background: #7dcb3c;
}
.services1 a{
	background: #d56398;
}
.services2 a{
	background: #e08bb3;
}
.services3 a{
	background: #ebb3cd;
}
.services4 a{
	background: #f6dbe8;
	color:#d56398;
}
.services5 a{
	background: #fbeff5;
	color:#ca3b7d;
}
</style>
</head>
<body>
<h1><a href="http://tutorial.world.edu/website-design/create-responsive-horizontal-dropdown-navigation-menu-html-css/"> Responsive Horizontal Dropdown Navigation Menu<br/> with HTML & CSS </a> | <a href="http://tutorial.world.edu">Tutorial.World.Edu</a></h1>
<div class="content">
<ul>
  <li><a href="" class="home">Home</a></li>
  <li><a href="" class="about">About</a>
  	<ul>
      <li class="about1"><a href="">The Team</a></li>
      <li class="about2"><a href="">History</a></li>
      <li class="about3"><a href="">Vision</a></li>
    </ul>
  </li>
  <li><a href="" class="contact">Contact</a>
  	<ul>
      <li class="contact1"><a href="">Message</a></li>
      <li class="contact2"><a href="">Online Chat</a></li>
    </ul>
  </li>
  <li><a href="" class="services">Services</a>
  	<ul>
      <li class="services1"><a href="">Website Design</a></li>
      <li class="services2"><a href="">Website Maintenance</a></li>
      <li class="services3"><a href="">Content Management System</a></li>
      <li class="services4"><a href="">Search Engine Optimisation</a></li>
      <li class="services5"><a href="">Social Media Marketing</a></li>
    </ul>
  </li>
</ul>
</div>
</body>
</html>

The result will be as below :
Tutorial: Create Responsive Horizontal Dropdown Navigation Menu with HTML & CSS
Hopefully this tutorial useful and can help you
Thanks for reading Tutorial : Create Responsive Horizontal Dropdown Navigation Menu with HTML & CSS

[Tutorial.World.Edu]

2 thoughts on “Create Responsive Horizontal Dropdown Navigation Menu with HTML & CSS




Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>