Navbar2

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

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

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

  
</head>

<body>

  <body>
  <nav>
    <ul>
      <li> <a href="#">Home </a></li>
      <li>
        <a href="#"> Products <span class="caret"> </span></a>
        <div>
        <ul>
          <li> <a href="#"> Chair </a></li>
          <li> <a href="#"> Table </a></li>
          <li> <a href="#"> Cooker </a></li>
         </ul>
        </div>
      </li>
      <li> <a href="#">About </a></li>
      <li> <a href="#">Help</a></li>
    </ul>
  <nav>
</body>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/StickyJoe/navbar2-QaxWzg */
body {
  background-color: #EBE9E4;
  color: #222;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 15px;
}
nav {
  background-color: #fff;
  border: 1px solid #dedede;
  border-radius: 4px;
  box-shadow: 0 2px 2px -1px rgba (0,0,0,0.255);
  color: #888;
  display: block;
  margin: 8px 22px 8px 22px;
  width: 90%;
  overflow: hidden;
}
nav ul {
  margin: 0;
  padding: 0;
}
nav ul li {
  display: inline-block;
  list-style-type: none;
  transition: all 0.2s;
  -web-transition: all 0.2s;
  -o-transition: all 0.2s;
  -moz-transition: all 0.2s;
}

nav>ul>li>a {
  color: #aaa;
  display: block;
  line-height: 56px;
  padding: 0 24px;
  text-decoration: none;
  
}

nav>ul>li>a >.caret {
  border-top: 4px solid #aaa;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content:"";
  display: inline-block;
  height: 0;
  width: 0;
  vertical-align: middle;
  transition: color 0.1s linear;
  -webkit-transition: color 0.1s linear;
  -moz-transition: color 0.1s linear;
  -o-transition: color 0.1s linear;
}
nav > ul > li:hover {
  background-color: rgb(40,44,47);
 }
nav > ul > li:hover > a {
  color: rgb(255,255,255);
}
nav > ul > li:hover > a > .caret {
  border-top-color: rgb(255,255,255);
}

nav > ul > li > div ul > li {
  display: block;
}
nav > ul > li > div ul > li > a{
  display: block;
  padding: 12px 24px;
  text-decoration: none;
  color: #fff;
}
nav > ul > li > div ul > li:hover > a{
  background-color: rgba (255,255,255,0.1);
}
nav > ul > li > div {
  background-color: rgb(40,44,47);
  border-top: 0;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 2px -1px rgba(0,0,0,0.255);
  margin: 0;
  width: 165px;
  position: absolute;
  opacity: 0;
  display: none;
  visibility: hidden;
  z-index: 100;
  transition: opacity 0.2s;
  -webkit-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
}
nav > ul > li:hover > div{
  display: block;
  opacity: 1;
  visibility: visible;
} 

Comments