skewed navigation

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

Thumbnail
This awesome code was written by 1zm0, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 1zm0 ©
  • HTML
  • CSS
  • JavaScript
    <div class="wrapper">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Proflie</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <div class="main-content">
    <img src = "https://images.unsplash.com/photo-1517646458010-ea6bd9f4a75f?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=e114adfaa4d93bab66290a9817fa5ad4" width = 65% height="100%">
    </img>
  
  <div class='aside'>
    <p>
Lorem ipsum dolor sit amet consectetur adipiscing elit, vestibulum placerat molestie dui duis eleifend hendrerit, est dignissim suspendisse cum platea gravida. Sollicitudin nec scelerisque tellus dis odio habitant eu taciti dictumst interdum diam turpis cum tincidunt, montes nisi potenti luctus vulputate ut arcu a lacinia augue nascetur auctor. Convallis cubilia habitasse platea ridiculus phasellus integer vitae etiam dignissim, litora id porta placerat justo lacinia per enim. Tortor parturient senectus dui rutrum per fames phasellus, non duis vel facilisi nibh ridiculus, id quisque purus habitasse feugiat auctor. Condimentum venenatis praesent malesuada nisl convallis nam libero suscipit interdum tempor pulvinar fusce vulputate, et natoque habitasse cubilia dapibus potenti himenaeos lacinia a dictum at lectus. Nec rutrum nascetur laoreet tincidunt quam venenatis nullam ultricies, sapien tempus magnis rhoncus pulvinar molestie.</p>
  </div>
  </div>
  <footer>footer</footer>
</div>

/*Downloaded from https://www.codeseek.co/1zm0/skewed-navigation-jKbVvw */
    /* Body and content wrapper styles*/
body {
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 200vh;
  position: absolute;
  background-color: peru;
  display: grid;
  grid-template-rows: 75px repeat(10, 1fr) 300px;
  grid-template-columns: repeat(12, 1fr);
}
.wrapper{
  display: grid;
  grid-template-rows: 75px repeat(10, 1fr) 300px;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 5px;
  background-color: whitesmoke;
  grid-row: 1 / 13;
  grid-column: 2 / 12;
}

/* Navigation Styles*/
nav {
  background-color: red;
  grid-row: 1 /2;
  grid-column: 1/ 13;
}

nav ul {
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

li {
  display: flex;
  align-items: center;
  height: 100%;
  list-style-type: none;
  border-right: solid 2px black;
  margin: 0;
  transform: skewX(-10deg);
}
a {
  padding: 10px 20px;
  color: #fff;
  background-color: #285064;
  text-decoration: none;
}
a:hover {
  color: #fff;
  background-color: #12242d;
  transition: .15s;
}

/* Main Content*/
.main-content {
  display: flex;
  flex-direction: row;
  margin: 5px;
  overflow: scroll;
  background-color: #CFD8DC;
  grid-row: 2 / 6;
  grid-column: 1 / 13;
}

/* Footer*/
footer {
  background-color: grey;
  grid-row: 12 / 13;
  grid-column: 1 / 13;
}





/*Downloaded from https://www.codeseek.co/1zm0/skewed-navigation-jKbVvw */
    

Comments