Hi all,

Here is an example of awesome navigation. mainly we use css transition to move the element with help of radio button.

css:-

  <div class="wrap">
    <input id="nav0" name="foo" type="radio" /><label for="nav0"></label>
    <input checked="" id="nav1" name="foo" type="radio" /><label for="nav1"></label>
    <input id="nav2" name="foo" type="radio" /><label for="nav2"></label>
    <input id="nav3" name="foo" type="radio" /><label for="nav3"></label>
    <input id="nav4" name="foo" type="radio" /><label for="nav4"></label>
    <input id="nav5" name="foo" type="radio" /><label for="nav5"></label>
  </div>

HTML:-

.wrap{width:300px;margin:0 auto;background:#0983bc;height:214px;position: relative;}
input {
  visibility: hidden;
}

label {
  position: absolute;
  left: 10px;
  right: 190px;
  background: white;
  cursor: pointer;
  -webkit-transition: left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s, bottom 0.33s;
          transition: left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s, bottom 0.33s;
}
#nav0 + label {
  top: 14px;
  bottom: 164px;
}
#nav1 + label {
  top: 64px;
  bottom: 114px;
}
#nav2 + label {
  top: 114px;
  bottom: 64px;
}
#nav3 + label {
  top: 164px;
  bottom: 14px;
}
:checked + label {
  left: 122px;
  right: 10px;
  top: 14px !important;
  bottom: 14px !important;
  -webkit-transition: left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s 0.66s, bottom 0.33s 0.66s;
          transition: left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s 0.66s, bottom 0.33s 0.66s;
          background: #e5e5e5;
}

Output :-