Skribe - Header

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

Thumbnail
This awesome code was written by lucademian_, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright lucademian_ ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

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

  
</head>

<body>

  
<header id="header">
  <div id="logo"><img src="https://rawgit.com/Kirpal/skribe/master/src/images/logo.svg"/></div>
  <nav id="nav">
    <ul>
      <li>Home</li>
      <li id="genre-link">Genres</li>
      <li>Stories</li>
      <li id="live-button">Signup</li>
      <div id="genres">
        <div class="genre">
          <div class="overlay">
            <div class="titles">
              <div class="genre">Fantasy</div>
            </div>
            <div class="stories">
              <div class="icon"></div>
              <div class="number">156</div>
            </div>
          </div>
        </div>
        <div class="genre">
          <div class="overlay">
            <div class="titles">
              <div class="genre">Fantasy</div>
            </div>
            <div class="stories">
              <div class="icon"></div>
              <div class="number">156</div>
            </div>
          </div>
        </div>
        <div class="genre">
          <div class="overlay">
            <div class="titles">
              <div class="genre">Fantasy</div>
            </div>
            <div class="stories">
              <div class="icon"></div>
              <div class="number">156</div>
            </div>
          </div>
        </div>
        <div class="genre">
          <div class="overlay">
            <div class="titles">
              <div class="genre">Fantasy</div>
            </div>
            <div class="stories">
              <div class="icon"></div>
              <div class="number">156</div>
            </div>
          </div>
        </div>
        <div class="genre">
          <div class="overlay">
            <div class="titles">
              <div class="genre">Fantasy</div>
            </div>
            <div class="stories">
              <div class="icon"></div>
              <div class="number">156</div>
            </div>
          </div>
        </div>
        <div class="genre">
          <div class="overlay">
            <div class="titles">
              <div class="genre">Fantasy</div>
            </div>
            <div class="stories">
              <div class="icon"></div>
              <div class="number">156</div>
            </div>
          </div>
        </div>
        <div class="genre">
          <div class="overlay">
            <div class="titles">
              <div class="genre">Fantasy</div>
            </div>
            <div class="stories">
              <div class="icon"></div>
              <div class="number">156</div>
            </div>
          </div>
        </div>
        <div class="genre">
          <div class="overlay">
            <div class="titles">
              <div class="genre">Fantasy</div>
            </div>
            <div class="stories">
              <div class="icon"></div>
              <div class="number">156</div>
            </div>
          </div>
        </div>
      </div>
    </ul>
  </nav>
</header>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/lucademian_/skribe-header-eMwWMx */
@import url("https://fonts.googleapis.com/css?family=Fira+Sans|PT+Serif:700");
#header {
  padding: 10px;
}
#header #logo {
  float: left;
}
#header #logo img {
  height: 30px;
}

#nav {
  font: 20px "Fira Sans", "sans-serif";
  float: right;
}
#nav ul {
  margin: 0;
  padding: 0;
  cursor: pointer;
}
#nav ul li {
  display: inline-block;
  color: #000;
  padding: 5px 0px;
  margin: 0px 15px;
  cursor: pointer;
  transition: 0.1s all;
}
#nav ul li::after {
  content: "";
  height: 3px;
  width: 0px;
  margin-left: 1px;
  margin-top: 0px;
  background: #ff4a4a;
  display: block;
  transition: all 0.2s;
}
#nav ul li:hover {
  padding-bottom: 2px;
}
#nav ul li:hover::after {
  width: 80%;
}
#nav ul li#live-button {
  border-right: 15px #FFF solid;
  background: #FFF;
  border: 3px #ff4a4a solid;
  color: #ff4a4a;
  padding: 5px 15px;
  margin: 0;
  margin-left: 15px;
  font-weight: bold;
  transition: 0.14s all;
}
#nav ul li#live-button::after {
  display: none;
}
#nav ul li#live-button:hover {
  border: 3px #ff4a4a solid;
  color: #FFF;
  background-color: #ff4a4a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='charlie-brown' fill='%23FFF' fill-opacity='0.4'%3E%3Cpath d='M9.8 12L0 2.2V.8l10 10 10-10v1.4L10.2 12h-.4zm-4 0L0 6.2V4.8L7.2 12H5.8zm8.4 0L20 6.2V4.8L12.8 12h1.4zM9.8 0l.2.2.2-.2h-.4zm-4 0L10 4.2 14.2 0h-1.4L10 2.8 7.2 0H5.8z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  -webkit-animation: zig-zag-move 1s infinite linear;
          animation: zig-zag-move 1s infinite linear;
}

@-webkit-keyframes zig-zag-move {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: 100% 0px;
  }
}

@keyframes zig-zag-move {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: 100% 0px;
  }
}
#genres {
  position: absolute;
  width: 100%;
  max-width: 527px;
  right: 30px;
  top: 80px;
  box-shadow: 0px 10px 30px -10px rgba(0, 0, 0, 0.2), 0px -10px 30px -10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  border-radius: 15px;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
  opacity: 0;
  visibility: hidden;
  cursor: default;
  transition: all 0.2s, display 0s 0s;
}
#genres.active {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
  display: block;
  visibility: visible;
  transition: all 0.2s, display 0s 0.2s;
}
#genres::before {
  content: "";
  display: block;
  position: absolute;
  border: 20px transparent solid;
  border-bottom-color: #FFF;
  top: -35px;
  right: 230px;
}
#genres .genre {
  cursor: pointer;
  text-align: left;
  border-radius: 8px;
  overflow: hidden;
  width: 250px;
  display: inline-block;
  font: 15px "Lora", "sans-serif";
  height: 60px;
  position: relative;
  background: #ff4a4a;
  margin: 5px;
}
#genres .genre .overlay {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
#genres .genre .overlay .titles {
  position: absolute;
  top: 0;
  left: 0;
  padding: 13px;
}
#genres .genre .overlay .titles .genre {
  font: 20px "Fira Sans", "sans-serif";
  color: #FFF;
  opacity: 1;
  font-weight: bold;
}
#genres .genre .overlay .stories {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  padding-right: 13px;
  padding-bottom: 13px;
}
#genres .genre .overlay .stories .icon {
  background-image: url("https://rawgit.com/Kirpal/skribe/master/src/images/ic_description_black_24dp_2x.png");
  width: 15px;
  height: 15px;
  background-size: cover;
  -webkit-filter: invert(100%);
          filter: invert(100%);
  opacity: 0.7;
  display: inline-block;
  vertical-align: middle;
}
#genres .genre .overlay .stories .number {
  font: 12px "Fira Sans", "sans-serif";
  display: inline-block;
  color: #FFF;
  opacity: 0.7;
  vertical-align: middle;
}


/*Downloaded from https://www.codeseek.co/lucademian_/skribe-header-eMwWMx */
$("#genre-link").click(function(){
	$("#genres").addClass("active");
});
$(document).click(function(){
	if($("#genres:hover").length == 0 && $("#genre-link:hover").length == 0)
	{
		$("#genres").removeClass("active");
	}
});

Comments