Create Responsive Vertical Dropdown Navigation Menu with HTML & CSS

Share:

Tutorial : Create Responsive Vertical Dropdown Navigation Menu with HTML & CSS​​. Having a responsive website has become imperative so the website can be easily accessed by all users of the Internet from anywhere. Because we have discussed about how to create a horizontal dropdown navigation menu, in this tutorial we will try to discuss something that is not far from the previous tutorial that is create a vertical navigation menu with a responsive and attractive dropdown effect. So that we know exactly how to make different types of menu navigation on a website.
Create Responsive Vertical Dropdown Navigation Menu with HTML & CSSTo note, not all visitors always enable javascript in their browser because it’s in this tutorial we will discuss how to create a navigation menu that remains responsive because it only uses basic html and css code. Other advantages, the search engine spider bots can crawl navigation menu with ease thus speeding up a website and blog to get google sitelinks. Without wasting time, below are the steps how to create responsive vertical dropdown navigation menu using basic html and css code.

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

HTML Code To Create Vertical Dropdown Navigation Menu

The first step is create an html document to display a vertical navigation menu. Html structure in vertical dropdown navigation menu same as the previous tutorial on how to create a horizontal dropdown navigation menu. The following fragment of basic html to create navigation menu :

<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="about1"><a href="">History</a></li>
      <li class="about1"><a href="">Vision</a></li>
           </ul>
</li>
</ul>

CSS Code To Create Vertical Dropdown Navigation Menu

Each li tag for the main navigation menu such as home, about and from about sub navigation menu will be enhanced with some properties of css code. Here’s an example of the css code:
CSS code the main navigation menu

ul li {
    background:#555;
    height:35px;
    width:100px;
    line-height:26px;
    list-style:none;
    padding-left:35px;
    border-top:#fff solid;
    border-bottom:#fff solid;
    border-width:1px;
    cursor:pointer;
  -moz-border-radius: 5px;
  border-radius: 5px;
  margin-top:3px;
}

ul li a {
	color:#FFF;
	text-decoration:none;
	text-transform:uppercase;
}

Css code above is to determine the length and width of the main navigation menu until to the font used is capital letters. Next is to create a background image on the main navigation menu li tag. In this tutorial we will use the class tag, for example :

.about{
    background: #2c64a7 url('http://1.bp.blogspot.com/-dvnFgJtmzeA/UezVJqa7-7I/AAAAAAAAA5E/xirusMIRJcY/s1600/Create+Responsive+Vertical+Dropdown+Navigation+Menu+about.png') no-repeat;
	color:#FFF;
	padding-top:5px;
	padding-left:55px;
	text-decoration:none;
	text-transform:uppercase;
	background-size:45px 40px;
	opacity:0.7;
}

CSS code for the sub navigation menu
To beautify sub navigation menu, we will use the help of class tag. The following example code css class tag on one of the sub-navigation menu :

.about1 {
    background: #0095e6 url('http://2.bp.blogspot.com/-21k0tiY6Q8s/UezVdu6zauI/AAAAAAAAA5c/CV1Niz0qefE/s320/Create+Responsive+Vertical+Dropdown+Navigation+Menu+about+1.png') no-repeat;
	height:35px;
	background-size:28px 28px;
    background-position:5px 5px;
    padding-top:5px;
    padding-left:38px;
}

All components of ul tag inside li tag about, will be a sub navigation menu that will only be seen when the mouse is directed on the main navigation menu about. The following css code to give dropdown effect :

ul ul {
	display: none;
	position: absolute;
}

Overall, html and css code for vertical navigation menu is the following. 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> Responsive Vertical Dropdown Navigation Menu with HTML & CSS | Tutorial.World.Edu </title>
<style type="text/css">
body {
	font-family:inherit;
	font-weight:bold;
	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:420px;
}
ul {
	margin:0px;
	-moz-border-radius: 5px;
    border-radius: 5px;
}
ul li {
    background:#555;
    height:35px;
	width:100px;
	line-height:26px;
	list-style:none;
	padding-left:35px;
	border-top:#fff solid;
	border-bottom:#fff solid;
	border-width:1px;
	cursor:pointer;
	-moz-border-radius: 5px;
    border-radius: 5px;
	margin-top:3px;
}

ul li a {
	color:#FFF;
	text-decoration:none;
	text-transform:uppercase;
}
ul li:hover {
	background-color:#a1a1a1;
	position:relative;
}
ul ul {
	display:none;
	position:absolute;
	left:120px;
	top:5px;
}
ul li:hover ul {
	display:block;
}
ul ul li {
	width:150px;
	float:left;
	display:inline;
	border:none;
    margin-top:3px;
}
 ul ul li:hover {
	text-decoration:none;
	border:none;
}
.home {
    background: #64a72c url('http://4.bp.blogspot.com/-X9kP7_RF4ao/UezVD2qNZuI/AAAAAAAAA48/lKv3226KDHo/s1600/Create+Responsive+Vertical+Dropdown+Navigation+Menu+home.png') no-repeat;
	color:#FFF;
	padding-top:5px;
	padding-left:55px;
	text-decoration:none;
	text-transform:uppercase;
	background-size:45px 40px;
	opacity:0.7;
}
.about{
    background: #2c64a7 url('http://1.bp.blogspot.com/-dvnFgJtmzeA/UezVJqa7-7I/AAAAAAAAA5E/xirusMIRJcY/s1600/Create+Responsive+Vertical+Dropdown+Navigation+Menu+about.png') no-repeat;
	color:#FFF;
	padding-top:5px;
	padding-left:55px;
	text-decoration:none;
	text-transform:uppercase;
	background-size:45px 40px;
	opacity:0.7;
}
.services{
    background: #e65100 url('http://4.bp.blogspot.com/-e1Nc6y7k170/UezVPRTYt9I/AAAAAAAAA5M/zMlHUeNtm-w/s1600/Create+Responsive+Vertical+Dropdown+Navigation+Menu+services.png') no-repeat;
	color:#FFF;
	padding-top:5px;
	padding-left:55px;
	text-decoration:none;
	text-transform:uppercase;
	background-size:45px 40px;
	opacity:0.7;
}
.contact{
    background: #a72c64 url('http://4.bp.blogspot.com/-k9c7ySpxM_o/UezVVf9l5dI/AAAAAAAAA5U/VF3rmGXS5ZA/s1600/Create+Responsive+Vertical+Dropdown+Navigation+Menu+contact.png') no-repeat;
	color:#FFF;
	padding-top:5px;
	padding-left:55px;
	text-decoration:none;
	text-transform:uppercase;
	background-size:45px 40px;
	opacity:0.7;
}
.about1 {
    background: #0095e6 url('http://2.bp.blogspot.com/-21k0tiY6Q8s/UezVdu6zauI/AAAAAAAAA5c/CV1Niz0qefE/s320/Create+Responsive+Vertical+Dropdown+Navigation+Menu+about+1.png') no-repeat;
	height:35px;
	background-size:28px 28px;
    background-position:5px 5px;
    padding-top:5px;
    padding-left:38px;
}
.services1 {
    background: #e65100 url('http://3.bp.blogspot.com/-GAqHVCBGHTs/UezVi3XcDUI/AAAAAAAAA5k/eFm82CMuEg0/s1600/Create+Responsive+Vertical+Dropdown+Navigation+Menu+services+1.png') no-repeat;
	height:35px;
	background-size:24px 24px;
    background-position:5px 5px;
    padding-top:5px;
}
.services2 {
    background: #e65100 url('http://3.bp.blogspot.com/-GAqHVCBGHTs/UezVi3XcDUI/AAAAAAAAA5k/eFm82CMuEg0/s1600/Create+Responsive+Vertical+Dropdown+Navigation+Menu+services+1.png') no-repeat;
	height:55px;
	background-size:24px 24px;
    background-position:5px 13px;
}
.services3 {
    background: #e65100 url('http://3.bp.blogspot.com/-GAqHVCBGHTs/UezVi3XcDUI/AAAAAAAAA5k/eFm82CMuEg0/s1600/Create+Responsive+Vertical+Dropdown+Navigation+Menu+services+1.png') no-repeat;
	height:75px;
	background-size:24px 24px;
    background-position:5px 28px;
}
.contact1 {
    background: #ca3b7d url('http://3.bp.blogspot.com/-tDJVGZI4t8M/UezVrO1ISQI/AAAAAAAAA5s/GrsMUjXaSQA/s1600/Create+Responsive+Vertical+Dropdown+Navigation+Menu+contact+1.png') no-repeat;
	height:35px;
	background-size:24px 24px;
    background-position:5px 5px;
    padding-top:5px;
}
</style>
</head>

<body>
<h1> <a href="http://tutorial.world.edu/website-design/create-responsive-vertical-dropdown-navigation-menu-html-css/">Responsive Vertical Dropdown Navigation Menu<br/> with HTML & CSS</a> | <a href="http://tutorial.world.edu">Tutorial.World.Edu</a></h1>
<div class="content">
  <ul>
    <li class="home"><a href="#">Home</a></li>
    <li class="about"><a href="#">About</a>
      <ul>
      <li class="about1"><a href="">The Team</a></li>
      <li class="about1"><a href="">History</a></li>
      <li class="about1"><a href="">Awards</a></li>
	  <li class="about1"><a href="">Vision</a></li>
      </ul>
	</li>
    <li class="services"><a href="#">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="services2"><a href="">Search Engine Optimisation</a></li>
      <li class="services2"><a href="">Social Media Marketing</a></li>
      </ul>
    </li>
    <li class="contact"><a href="#">Contact</a>
      <ul>
      <li class="contact1"><a href="">Message</a></li>
      <li class="contact1"><a href="">Online Chat</a></li>
      </ul>
	</li>
  </ul>
</div>
</body>
</html>

When we see the result in the browser it will be like below. Hope you like it
Create Responsive Vertical Dropdown Navigation Menu with HTML & CSS
This tutorial is finished. We hope this can be useful and help you
Thanks for reading Tutorial : Create Responsive Vertical Dropdown Navigation Menu with HTML & CSS

[Tutorial.World.Edu]

5 thoughts on “Create Responsive Vertical 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>