Sliding Radio Button Menu

md.shakil hossain

1711

 <input id="li0" name="foo" type="radio" /><label for="li0"></label><input checked="" id="li1" name="foo" type="radio" /><label for="li1"></label><input id="li2" name="foo" type="radio" /><label for="li2"></label><input id="li3" name="foo" type="radio" /><label for="li3"></label><input id="li4" name="foo" type="radio" /><label for="li4"></label><input id="li5" name="foo" type="radio" /><label for="li5"></label>

Try it Yourself >>

 html {
  background: #ff6461;
}

body {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 214px;
  width: 336px;
  margin: -107px -168px;
}

input {
  visibility: hidden;
}

label {
  position: absolute;
  left: 0;
  right: 228px;
  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;
}
#li0 + label {
  top: 14px;
  bottom: 164px;
}
#li1 + label {
  top: 64px;
  bottom: 114px;
}
#li2 + label {
  top: 114px;
  bottom: 64px;
}
#li3 + label {
  top: 164px;
  bottom: 14px;
}
:checked + label {
  left: 122px;
  right: 0;
  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;
}

Try it Yourself >>