Header

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

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

Technologies

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

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

  
</head>

<body>

  <!-- unrecognized -->
<div class="teacher-banner">
  Are you a teacher in need of funding? <a href="#">Set up your classroom »</a>
  <i class="fa fa-times" id="hidethisshit"></i>
</div>
<header class="unrecognized">
    <nav>
      <a href="#" id="DClogo">DonorsChoose.org</a>
      <a href="#" class="give-button">Give Now</a>
      <a href="#">About</a>|
      <a href="#">Help</a>
    </nav>
    <nav class="personalized">
      <a href="#">Sign In</a>
    </nav>
</header>

<!-- recognized donor -->
<header class="recognized donor">
    <nav>
      <a href="#" id="DClogo">DonorsChoose.org</a>
      <a href="#" class="give-button">Give Now</a>
      <a href="#">About</a>|
      <a href="#">Help</a>
    </nav>
    <nav class="personalized">
      <a href="#">My Account<i class="fa fa-caret-down"></i></a>
    </nav>
</header>

<!-- recognized teacher -->
<header class="recognized teacher">
    <nav>
      <a href="#" id="DClogo">DonorsChoose.org</a>
      <a href="#" class="give-button">Give Now</a>
      <a href="#">About</a>|
      <a href="#">Help</a>
    </nav>
    <nav class="personalized">
      <a href="#" id="classroom-trigger">My Classroom<i class="fa fa-caret-down"></i></a>|
      <div class="subnav classroom">
        <ul>
          <li><a href="#"><i class="fa fa-rocket"></i>Projects</a></li>
          <li><a href="#"><i class="fa fa-bookmark"></i>Public Page</a></li>
          <li><a href="#"><i class="fa fa-briefcase"></i>Classroom Info</a></li>
          <li class="new-project"><a href="#"><i class="fa fa-plus"></i>New Project</a></li>
      </div>
        <a href="#" id="account-trigger">My Account<i class="fa fa-caret-down"></i></a>
<div class="subnav account">
  <span class="greetings">Welcome Sebastian!</span>
        <ul>
          <li><a href="#"><i class="fa fa-smile-o"></i>Donor Profile</a></li>
          <li><a href="#"><i class="fa fa-heart"></i>Favorites</a></li>
          <li><a href="#"><i class="fa fa-flash"></i>Giving History</a></li>
          <li><a href="#"><i class="fa fa-flag"></i>Campaigns</a></li>
          <li><a href="#"><i class="fa fa-envelope"></i>Email Preferences</a></li>
          <li><a href="#"><i class="fa fa-gear"></i>Account Settings</a></li>
          <li><a href="#"><i class="fa fa-sign-out"></i>Sign Out</a></li>
      </div>        
    </nav>
</header>
<div class="cart-banner">
  <div class="message">
  Complete your donation of $50 to Mrs. Garrett’s classroom <a href="#" class="button"><i class="fa fa-shopping-cart"></i>Check Out</a>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/bephf/header-habcL */
@import "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";
/* GLOBAL RESETS TO MIMIC ACTUAL STYLES */
body {
  font-family: arial;
  color: #424242;
  line-height: 1.4;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

a {
  color: #20A1D4;
  text-decoration: none;
}

.teacher-banner {
  background: #fafafa;
  margin: 0 -1em 1em;
  padding: .75em 0;
  text-align: center;
  font-size: 14px;
  font-style: italic;
  color: #666;
  border-bottom: 1px solid #eaeaea;
  position: relative;
}
.teacher-banner .fa {
  position: absolute;
  right: 1em;
  color: #ccc;
  top: 1em;
}

.cart-banner {
  background: #424242;
  margin: -6em -1em 1em;
  padding: .75em 1em;
  color: #dcdcdc;
  font-style: italic;
  font-size: 14px;
  border-top: 1px solid #222;
  border-bottom: 1px solid #222;
  box-shadow: inset 0 2px 0 #333;
}
.cart-banner .message {
  margin: 0 auto;
  max-width: 960px;
  text-align: right;
}
.cart-banner .button {
  display: inline-block;
  background: #1CBC2C;
  text-shadow: 0 1px 1px #1AB029;
  border: 1px solid #1AB029;
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: bold;
  margin-left: 1em;
  padding: 0 1em;
  height: 40px;
  line-height: 40px;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 0 #1AB029;
  cursor: pointer;
}
.cart-banner .button .fa {
  margin-right: .5em;
}
.cart-banner .button:hover {
  border-color: #169923;
  text-shadow: 0 1px 1px #169923;
  box-shadow: inset 0 -1px 0 0 #169923;
}
.cart-banner .button:active, .cart-banner .button.loading {
  box-shadow: none;
  line-height: 52px;
}

header {
  position: relative;
  max-width: 960px;
  margin: 0 auto 6em;
}

nav {
  line-height: 40px;
  height: 40px;
  color: #eaeaea;
  font-size: 14px;
}
nav a {
  color: #444;
  display: inline-block;
  padding: 0 .75em 0 .5em;
  vertical-align: middle;
}
nav a:hover {
  color: #222;
}
nav a#DClogo {
  padding-left: 0;
  color: #EF5F3C;
}
nav a.give-button {
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: inset 0 -1px 0 0 #eaeaea;
  border-radius: 3px;
  height: 40px;
  line-height: 40px;
  padding: 0 1em;
  font-weight: bold;
  text-shadow: 0 1px 0 #fff;
}
nav a.give-button:hover {
  border-color: #dcdcdc;
  box-shadow: inset 0 -1px 0 0 #dcdcdc;
}
nav a.give-button:active {
  box-shadow: none;
  line-height: 42px;
}
nav.personalized {
  position: absolute;
  right: 0;
  top: 0;
  /* Stroke */
  /* Fill */
}
.recognized nav.personalized > a {
  position: relative;
}
.recognized nav.personalized > a .fa {
  margin-left: .5em;
}
nav.personalized .triggered {
  position: relative;
}
nav.personalized .triggered:before,
nav.personalized .triggered:after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-top: 0;
  z-index: 2;
}
nav.personalized .triggered:before {
  bottom: -1px;
  right: 32px;
  /* If 1px darken stroke slightly */
  border-bottom-color: #dcdcdc;
  border-width: 8px;
}
nav.personalized .triggered:after {
  bottom: -2px;
  right: 32px;
  border-bottom-color: #fff;
  border-width: 8px;
}
nav .subnav {
  display: none;
  position: absolute;
  right: 0;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 3px;
  width: 200px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
  color: #828282;
}
nav .subnav .greetings {
  display: block;
  padding: 0 .75em;
  font-style: italic;
  border-bottom: 1px solid #fafafa;
}
nav .subnav .fa {
  color: #dcdcdc;
  width: 16px;
  text-align: center;
  margin-right: .5em;
  font-size: 16px;
}
nav .subnav.classroom {
  left: -5em;
}
nav .subnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav .subnav ul li a {
  display: block;
  border-bottom: 1px solid #fafafa;
  padding: 0 .75em;
}
nav .subnav ul li a:hover {
  background: #fafafa;
}
nav .subnav ul li:last-child a {
  border-bottom: 0;
}
nav .subnav ul .new-project a {
  background: #F4FAFD;
  font-weight: bold;
  border-top: 1px solid #eaeaea;
  margin-top: -1px;
}
nav .subnav ul .new-project a:hover {
  background: #EEF7FC;
}


/*Downloaded from https://www.codeseek.co/bephf/header-habcL */
$("#account-trigger").click(function() {
  $(".account").toggle();
  $(this).toggleClass('triggered');
});
$("#classroom-trigger").click(function() {
  $(".classroom").toggle();
  $(this).toggleClass('triggered');
});
$("#hidethisshit").click(function() {
  $(".teacher-banner").slideUp();
});

Comments