<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>website nav bar</title>
<link rel="stylesheet" href="slide_bar.css">
</head>
<body>
<header>
<nav class="nav">
<ul type="none">
<li><a href="#"> Home </a></li>
<li><a href="#"> Contact </a>
<ul>
<li><a href="#"> Phone </a></li>
<li><a href="#"> Email </a></li>
<li><a href="#"> Message </a></li>
</ul></li>
<li><a href="#"> Purchase </a></li>
<li><a href="#"> About us </a></li>
</ul>
</nav>
</header>
</body>
</html>
style
*{
margin: 0;
padding: 0;
}
.nav{
width:100%;
height: 60px;
background-color: rgb(14, 13, 13);
box-shadow: rgba(53, 1, 1, 0.829) 0 7px 9px 0;
}
ul li {
float: left;
width: 140px;
height: 60px;
font-size: 20px;
line-height: 60px;/*to make list item im center*/
text-align: center;
}
ul li a{
text-decoration: none;
color:white;
}
ul li a:hover{
background-color: aqua;
transition: 1.1s ease;
}
ul li ul li{
display: none;
background-color: black;
color:whitesmoke;
transition: 3s all;
box-shadow: rgba(53, 1, 1, 0.829) 0 7px 9px 0;
}
/*jab ham contact ke upar mouse lekar jaye to slide bar dikh jaye*/
ul li:hover ul li{
display:block;
animation: drop 1s ease;
}
/* we use @keyframe so that it holds the animation settings
we put 0% and 100% so that it defines how animation will work from starting to end */
@keyframes drop{
0%{
/* transform: scale(2,2) rotate(90deg); for Y asix*/
transform: scale(2,2) rotatex(90deg);/*for x axis*/
}
100%{
transform: scale(1,1) rotatex(0deg);
}
}
Comments
Post a Comment