<!DOCTYPE html>
<html>
<head>
  <title>Code Challenge 03.12</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
  <ul class="nav-menu">
    <li class="title">
      <h1>Es</h1>
      <p>Elemental Shift</p>
    </li>
    <li class="blog">
      <h2>Bg</h2>
      <p>Blog</p>
      <div class="red"></red>
    </li>
    <li class="portfolio">
      <h2>Po</h2>
      <p>Portfolio</p>
      <div class="yellow"></div>
    </li>
    <li class="laboratory">
      <h2>Xp</h2>
      <p>Laboratory</p>
      <div class="blue"></div>
    </li>
    <li class="about">
      <h2>Ab</h2>
      <p>About</p>
      <div class="pink"></div>
    </li>
    <li class="contact">
      <h2>Co</h2>
      <p>Contact</p>
    </li>
  </ul>
  
</body>
</html>
@import "url('https://fonts.googleapis.com/css?family=Lato:100,200,400|Exo:300,400');";

body {
  b
}
ul li {
  list-style-type: none;
  margin-left: -50px;
  margin-top: 5px;
  padding: 10px 10px 10px 30px;
}
h1 {
  font-family: 'Lato', sans-serif;
  font-weight: 400px;
  font-size: 32px;
}
h2 {
  font-family: 'Lato', sans-serif;
  font-weight: 400px;
  font-size: 24px;
}
p {
  margin-top: -20px;
  font-family: 'Lato', sans-serif;
  font-weight: 200px;
  font-size: 16px;
}
.title {
  background-color: #252525;
  width: 200px;
  color: #fff;
  margin-left: -50px;
  padding: 20px 20px 50px 40px;
}
.title:hover {
  cursor: pointer;
}
.blog {
  border-left: solid 10px #8cc63f;
}
.blog:hover {
  cursor: pointer;
  border-left: solid 100px #8cc63f;
  color: #8cc63f;
  transition-duration: 0.5s;
  transition-property: border;
  transition-timing-function: ease;
}
li.blog:hover ~ .portfolio::after {
    display: block;
    content: " ";
    width: 28px;
    height: 5px;
    background-color: #8cc63f;
}
.portfolio {
  border-left: solid 10px #ef3724;
}
.portfolio:hover {
  cursor: pointer;
  border-left: solid 100px #ef3724;
  color: #ef3724;
  transition-duration: 0.5s;
  transition-property: border;
  transition-timing-function: ease;
}
li.portfolio:hover ~ .laboratory::after {
    display: block;
    content: " ";
    width: 28px;
    height: 5px;
    background-color: #ef3724;
}
.laboratory {
  border-left: solid 10px #ffa61a;
}
.laboratory:hover {
  cursor: pointer;
  border-left: solid 100px #ffa61a;
  color: #ffa61a;
  transition-duration: 0.5s;
  transition-property: border;
  transition-timing-function: ease;
}
li.laboratory:hover ~ .about::after {
    display: block;
    content: " ";
    width: 28px;
    height: 5px;
    background-color: #ffa61a;
}
.about {
  border-left: solid 10px #1ab1ff;
}
.about:hover {
  cursor: pointer;
  border-left: solid 100px #1ab1ff;
  color: #1ab1ff;
  transition-duration: 0.5s;
  transition-property: border;
  transition-timing-function: ease;
}
li.about:hover ~ .contact::after {
    display: block;
    content: " ";
    width: 28px;
    height: 5px;
    background-color: #1ab1ff;
}
.contact {
  border-left: solid 10px #fc1dcf;
}
.contact:hover {
  cursor: pointer;
  border-left: solid 100px #fc1dcf;
  color: #fc1dcf;
  transition-duration: 0.5s;
  transition-property: border;
  transition-timing-function: ease;
}
.red {
  visibility: hidden;
  display: block;
  content: "";
  width: 28px;
  height: 5px;
  background: #ef3724;
}
.yellow {
  visibility: hidden;
  display: block;
  content: "";
  width: 28px;
  height: 5px;
  background: #ffa61a;
}
.blue {
  visibility: hidden;
  display: block;
  content: "";
  width: 28px;
  height: 5px;
  background: #1ab1ff;
}
.pink {
  visibility: hidden;
  display: block;
  content: "";
  width: 28px;
  height: 5px;
  background: #fc1dcf;
}
$(document).ready(function() {
  $('.portfolio').mouseenter(function() {
    $('.red').css('visibility', 'visible');
  });
  $('.portfolio').mouseleave(function() {
    $('.red').css('visibility', 'hidden');
  });
  $('.laboratory').mouseenter(function() {
    $('.yellow').css('visibility', 'visible');
  });
  $('.laboratory').mouseleave(function() {
    $('.yellow').css('visibility', 'hidden');
  });
  $('.about').mouseenter(function() {
    $('.blue').css('visibility', 'visible');
  });
  $('.about').mouseleave(function() {
    $('.blue').css('visibility', 'hidden');
  });
  $('.contact').mouseenter(function() {
    $('.pink').css('visibility', 'visible');
  });
  $('.contact').mouseleave(function() {
    $('.pink').css('visibility', 'hidden');
  });
});
  
 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.