Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Creative navigation using css

    • 0
    • 1
    • 1
    • 1
    • 0
    • 0
    • 0
    • 0
    • 307
    Comment on it

    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 :-

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: