Animated - Main Navigation

animated-main-navigation.markdown

Animated - Main Navigation

A Pen by Chris Bautista on CodePen.

License.

index.html

<div class="main">

  <div class="cb-header">
    <a href="https://www.codespud.com" rel="noreferrer nooopener" target="_blank">
      <h1>Code Spud</h1>
      <p>Web Services</p>
    </a>
  </div>

  <div class="cb-article">
    <p> My best approximation of the code work and decisions to create the main navigation design on <a href="https://https://eiger-extreme.mammut.com/">eiger-extreme.mammut.com</a>
    </p>

    <p><strong> Inspiration: </strong><br /> <a href="https://eiger-extreme.mammut.com/en/development">https://eiger-extreme.mammut.com/en/development</a></p>

  </div>

</div>
<div class="menu">
  <div class="stub"></div>
  <svg width="168" height="33" viewBox="0 0 168 33" fill="none" class="stub-clip-svg">
    <clipPath id="Stub-Button-Clip">
      <path d="M0.988281 -0.12793H167.016L145.491 25.1077C141.691 29.5627 136.13 32.1288 130.274 32.1288H38.4755C32.7372 32.1288 27.2753 29.664 23.4787 25.3612L0.988281 -0.12793Z" fill="white"></path>
    </clipPath>
  </svg>
  <nav>
    <ul>
      <li><a href="#">Codespud <div>Our Story</div></a> </li>
      <li><a href="#">Products <div>Our Pride</div></a> </li>
      <li><a href="#">Services <div>Our Help</div></a> </li>
      <li><a href="#">Company <div>Our Work</div></a> </li>
    </ul>
  </nav>
</div>

style.scss

/**
Hide navigation and chrome by default
when menu "stub" is hovered over show the navigation.
**/

%menu-style {
  position: absolute;
  background-color: #fff;
  padding: 0;
  box-sizing: border-box;
  transition: all 400ms;
}

.menu {
  @extend %menu-style;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  height: 0;

  nav {
    position: absolute;
    display: flex;
    width: 100vw;
    top: -40px;
    left: 0;
    height: 0;
    transition: all 400ms;
    overflow: hidden;
    justify-content: center;
  }

  ul,
  li {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.125rem;
    display: inline-flex;
    padding: 0;
    margin: 0;
  }

  ul {
    display: flex;
  }

  li {
    height: 100%;
    width: calc((100vw / 4) - 1.5rem);

    a {
      padding: 2.7rem 0;
      display: flex;
      width: 100%;
      height: 100%;
      flex-direction: column;
      border-top: 8px solid #888;
      margin-right: 3px;
      color: #000;

      &:hover {
        color: #333;
        border-top-color: #333;
      }
    }

    div {
      display: block;
      color: #888;
    }
  }

  .stub {
    position: absolute;
    background-color: #fff;
    width: 168px;
    height: 34px;
    left: 50%;
    top: 0;
    transform: translateX(-84px);
    transition: all 400ms;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    -webkit-clip-path: url(#Stub-Button-Clip);
    clip-path: url(#Stub-Button-Clip);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &::before,
    &::after {
      content: " ";
      display: inline-flex;
      width: 2rem;
      border-bottom: 2px solid #888;
      box-shadow: 0 2px 4px 1px rgb(0 0 0 / 15%);
      margin: 0 0 8px;
    }

    &:before {
      margin-top: 0.5rem;
    }
  }

  .stub-clip-svg {
    position: absolute;
    left: -100vw;
    top: -100vh;
  }

  &:before,
  &:after {
    @extend %menu-style;
    content: " ";
    height: 100vh;
    width: 0;
    transition: width 400ms ease-in-out;
  }

  &::before {
    top: 0;
    left: 0;
  }

  &::after {
    top: 0;
    right: 0;
  }

  &:hover {
    height: 140px;

    nav {
      height: 140px;
      top: 0;
    }

    .stub {
      top: 130px;
    }

    &::before,
    &::after {
      width: 1.5rem;
    }
  }
}

body {
  background: url(https://source.unsplash.com/random/1200x768?landscape);
  background-size: cover;
  font-size: 16px;
  color: #000;
}

a {
  color: blue;

  &:visited,
  &:active {
    color: blue;
  }
}

.main {
  display: flex;
  min-height: 2000px;
  padding: 0;
  font-family: sans-serif;

  .cb-header {
    display: inline-flex;
    flex-direction: column;
    margin: 25vh auto 0;
    justify-content: flex-start;
    color: #fff;
    padding: 0 16vw;
    text-align: center;
    text-shadow: 0 3px 6px rgb(0 0 0 / 15%);
    line-height: 0.9;
    letter-spacing: -0.8px;

    a {
      color: #fff;
    }

    h1 {
      font-size: 12vw;
      text-transform: uppercase;
      margin: 0;
    }

    p {
      font-size: 5vw;
      margin: 0;
    }
  }

  .cb-article {
    background-color: white;
    display: inline-flex;
    flex-direction: column;
    min-height: 10vh;
    max-width: 400px;
    left: 80px;
    transform: translateX(10px);
    top: 800px;
    position: absolute;
    padding: 2.5rem 3.5rem;

    a {
      color: blue;
      text-decoration: underline;
    }
  }
}

a {
  color: #333;
  text-decoration: none;

  &:hover {
    color: red;
  }
}