Software Engineering And Technologies: create attractive navigation bar with dropdown list in HTML and CSS

responsive navigation bar with dropdown list

In the above image we can see attractive navigation bar.This navigation bar have also some sub options these are appear in dropdown list.This is happened when mouse(cursor) is over main menu then sub menu's are appear.This nav bar is developed in HTML,CSS.In this you can see hover effect that is text color is changed,background color is also change.Below is full code of above navigation bar.

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<title>Navigation bar with dropdown list</title>
</head>
<body>
<div class="demo">
<ul class="nav">
<li><a href="https://webcoderscode.blogspot.in/">Home</a></li>
<li><a href="https://webcoderscode.blogspot.in/">Tutorials</a>
<ul class="subs">
<li><a href="https://webcoderscode.blogspot.in/">HTML</a></li>
<li><a href="https://webcoderscode.blogspot.in/">CSS</a></li>
<li><a href="https://webcoderscode.blogspot.in/">PYTHON</a></li>
<li><a href="https://webcoderscode.blogspot.in/">MONGO DB</a></li>
<li><a href="https://webcoderscode.blogspot.in/">ANDROID</a></li>
<li><a href="https://webcoderscode.blogspot.in/">AJAX</a></li>
<li><a href="https://webcoderscode.blogspot.in/">RUBY</a></li>
</ul>
</li>
<li><a href="https://webcoderscode.blogspot.in/">Resources</a>
<ul class="subs">
<li><a href="https://webcoderscode.blogspot.in/">DBMS</a></li>
<li><a href="https://webcoderscode.blogspot.in/">C#</a></li>
<li><a href="https://webcoderscode.blogspot.in/">ASP.NET</a></li>
<li><a href="https://webcoderscode.blogspot.in/">Ajax</a></li>
<li><a href="https://webcoderscode.blogspot.in/">OPERATING SYSTEM</a></li>
</ul>
</li>
<li><a href="https://webcoderscode.blogspot.in/">About Us</a></li>
<li><a href="https://webcoderscode.blogspot.in/">HELP</a></li>
</ul>
</div>
</body>
</html>

CSS Code

.demo {
position:relative;
width:520px;
height:382px;
margin:20px auto;
padding:15px;
}
.nav,.nav ul {
list-style:none;
margin:0;
padding:0;
}
.nav {
position:relative;
}
.nav ul {
height:0;
left:0;
overflow:hidden;
position:absolute;
top:46px;
}
.nav li {
float:left;
position:relative;
}
.nav li a {
background-color:#0FB88F ;
border:1px solid ;
color:#FFF;
display:block;
font-size:16px;
line-height:35px;
padding:5px 20px;
text-decoration:none;
}
.nav li:hover a {
background:#CED8D5 ;
border-color:#6E67A6;
color:red;
}
.nav li:hover ul.subs {
height:auto;
width:180px;
}
.nav ul li {

transition:0.5s;
width:100%;
}
.nav li:hover ul li {
opacity:2;
-moz-transition-delay:0.1s;
-o-transition-delay:0.1s;
-webkit-transition-delay:0.1s;
transition-delay:0.1s;
}
.nav ul li a {
background:#7770B4;
border-color:#6E67A6;
color:#fff;
line-height:1px;

}
.nav li:hover ul li a {
line-height:35px;
}

Software Engineering And Technologies

NavBar

Saturday 27 January 2018

create attractive navigation bar with dropdown list in HTML and CSS

1 comment: