Loading

Tiny Navigation

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Tiny Navigation</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      @import url("https://fonts.googleapis.com/css?family=Lato:300,400,700");
@import url("https://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:before, :after {
  content: '';
  display: block;
  position: absolute;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  font: 16px/1 'Lato', sans-serif;
  color: #777;
  background: #eee;
}

.main {
  flex: 1;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

.nav {
  width: 90px;
  background: #4b6c8b;
}
.nav .link {
  position: relative;
  display: block;
  width: 90px;
  height: 80px;
  font: 20px/80px fontawesome;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  color: #eee;
  box-shadow: inset 0 -1px 0 #364d63;
  cursor: pointer;
  transition: .2s all;
}
.nav .link:hover {
  background: #466481;
}
.nav .link.active {
  box-shadow: inset 0 -1px 0 #364d63, inset 5px 0 0 #0af, inset 6px 0 0 #364d63;
  background: #405d77;
}

.title {
  position: absolute;
  top: 50%;
  left: 150px;
  font-size: 60px;
  font-weight: 300;
  margin-top: -30px;
}

    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <div class='nav'>
  <div class='link'>&#xf00a;</div>
  <div class='link active'>&#xf012;</div>
  <div class='link'>&#xf018;</div>
  <div class='link'>&#xf08d;</div>
  <div class='link'>&#xf002;</div>
  <div class='link'>&#xf085;</div>
  <div class='link'>&#xf08b;</div>
</div>
<div class='main'>
  <div class='title'>
    Tiny Navigation
  </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://ahoj.co.uk/ */
@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700");
@import url("https://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:before, :after {
  content: '';
  display: block;
  position: absolute;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  font: 16px/1 'Lato', sans-serif;
  color: #777;
  background: #eee;
}

.main {
  flex: 1;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

.nav {
  width: 90px;
  background: #4b6c8b;
}
.nav .link {
  position: relative;
  display: block;
  width: 90px;
  height: 80px;
  font: 20px/80px fontawesome;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  color: #eee;
  box-shadow: inset 0 -1px 0 #364d63;
  cursor: pointer;
  transition: .2s all;
}
.nav .link:hover {
  background: #466481;
}
.nav .link.active {
  box-shadow: inset 0 -1px 0 #364d63, inset 5px 0 0 #0af, inset 6px 0 0 #364d63;
  background: #405d77;
}

.title {
  position: absolute;
  top: 50%;
  left: 150px;
  font-size: 60px;
  font-weight: 300;
  margin-top: -30px;
}
/* Downloaded from https://ahoj.co.uk/ */
$(document).ready(function() {

  $('.link').on('click', function() {
    $('.link').removeClass('active');
    $(this).toggleClass('active');
  });
  
});

This awesome code is write by dissimulate, you can se more from this user in the personal repository