Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Creative navigation using css

    @mukul.kant
    Recommendations Offline Message

    • 0
    • 1
    • 1
    • 1
    • 0
    • 0
    • 0
    • 0
    • 331
    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:-

    1.   <div class="wrap">
    2.     <input id="nav0" name="foo" type="radio" /><label for="nav0"></label>
    3.     <input checked="" id="nav1" name="foo" type="radio" /><label for="nav1"></label>
    4.     <input id="nav2" name="foo" type="radio" /><label for="nav2"></label>
    5.     <input id="nav3" name="foo" type="radio" /><label for="nav3"></label>
    6.     <input id="nav4" name="foo" type="radio" /><label for="nav4"></label>
    7.     <input id="nav5" name="foo" type="radio" /><label for="nav5"></label>
    8.   </div>

    HTML:-

    1. .wrap{width:300px;margin:0 auto;background:#0983bc;height:214px;position: relative;}
    2. input {
    3.   visibility: hidden;
    4. }
    5.  
    6. label {
    7.   position: absolute;
    8.   left: 10px;
    9.   right: 190px;
    10.   background: white;
    11.   cursor: pointer;
    12.   -webkit-transition: left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s, bottom 0.33s;
    13.           transition: left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s, bottom 0.33s;
    14. }
    15. #nav0 + label {
    16.   top: 14px;
    17.   bottom: 164px;
    18. }
    19. #nav1 + label {
    20.   top: 64px;
    21.   bottom: 114px;
    22. }
    23. #nav2 + label {
    24.   top: 114px;
    25.   bottom: 64px;
    26. }
    27. #nav3 + label {
    28.   top: 164px;
    29.   bottom: 14px;
    30. }
    31. :checked + label {
    32.   left: 122px;
    33.   right: 10px;
    34.   top: 14px !important;
    35.   bottom: 14px !important;
    36.   -webkit-transition: left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s 0.66s, bottom 0.33s 0.66s;
    37.           transition: left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s 0.66s, bottom 0.33s 0.66s;
    38.           background: #e5e5e5;
    39. }

    Output :-

    css navigation menu transition css3
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: