A Pen by Constantine Karnauhov

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Constantine Karnauhov</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.38/css/uikit.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <nav class="hh-navbar uk-navbar-container uk-navbar-transparent uk-background-primary uk-light" uk-navbar>
  <div class="uk-navbar-left">
    <ul class="uk-navbar-nav">
      <li class="uk-active"><a href="#">Active</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
    </ul>
  </div>
</nav>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.38/js/uikit.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/hustlahusky/a-pen-by-constantine-karnauhov-GQvomM */
.hh-navbar .uk-navbar-nav:hover > li > a {
  color: rgba(255, 255, 255, 0.5);
}
.hh-navbar .uk-navbar-nav > li {
  transition: 0.25s all ease-in-out;
}
.hh-navbar .uk-navbar-nav > li > a {
  color: #fff;
}
.hh-navbar .uk-navbar-nav > li:hover > a,
.hh-navbar .uk-navbar-nav > li.uk-active > a {
  color: #fff;
}
.hh-navbar .uk-navbar-nav > li.uk-active {
  background: rgba(0, 0, 0, 0.1);
}


/*Downloaded from https://www.codeseek.co/hustlahusky/a-pen-by-constantine-karnauhov-GQvomM */
var links = $('.hh-navbar .uk-navbar-nav a');
links.on('click', function (e) {
  e.preventDefault();
  links.parents('li').removeClass('uk-active');
  $(e.target).parent().addClass('uk-active');
});

Comments