simple navbar

In this example below you will see how to do a simple navbar with some HTML / CSS and Javascript

This is simple navigation menu created just using Html and CSS. It just contains some transition and some shadow effects in blue and white color.

Thumbnail
This awesome code was written by -dhaval-, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -dhaval- ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>simple navbar</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="main">
  <ul class="ul1">
    <li class="li1" id=""><a href="#">Home</a></li>
    <li class="li1" id=""><a href="#">Tuts</a></li>
    <li class="li1" id=""><a href="#">Download</a></li>
    <li class="li1" id=""><a href="#">Blog</a></li>
    <li class="li1" id="abt"><a href="#">About</a></li>
  </ul>
  <div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/-dhaval-/simple-navbar-XJOOLb */
body{
  margin-top:0px;
  margin-left:0px;
  background-color:#111;
}
#main{
  margin-top:20px;
  margin-left:20px;
  color:white;
  font-family:sans-serif;
  font-stretch:ultra-expanded;
}
li{
  list-style-type:none;
  display:block;
  clear:both;
  width:160px;
  border-bottom:1px solid #0099ff;
  background-color:white;
  text-align:center; 
  padding-top:10px;
  padding-bottom:10px;
  transition:all 0.2s linear;
}
a{
 text-decoration:none;
 color:#0099ff;
  text-shadow:1px 0px 50px;
  font-weight:bold;
}
li:hover{
  color:white;
  background-color:#0099ff;
  box-shadow:1px 1px 20px #111 inset;
}
li:focus{
  
}
li:hover a{
  color:white;
  text-shadow:2px 2px 8px white;
}
#abt{
  border-bottom:0px solid black;
}

Comments