CSS3 single-page switch navigation menu interface design implementation

This is a single-page toggle navigation Menu Interface Design effect made with pure CSS3. In this page effect, a set of navigation buttons is released vertically on the left side of the page, and when you click the navigation button, the corresponding page slides from the right side of the screen, which is very cool.

How to use

HTML Structure

The HTML structure of the single-page toggle navigation menu interface is as follows:

<p class= "CT" id= "T1" > <p class= "ct" id= "t2" > <p class= "CT" id= "T3" > <p class= "CT" id= "T4" &G         T <p class= "CT" id= "T5" > <ul id= "menu" > <a href= "#t1" ><li class= "icon fa Fa-bolt" I D= "Uno" ></li></a> <a href= "#t2" ><li class= "icon fa fa-keyboard-o" id= "DOS" &GT;&LT;/LI&G            t;</a> <a href= "#t3" ><li class= "icon fa fa-rocket" id= "tres" ></li></a> <a href= "#t4" ><li class= "icon fa fa-dribbble" id= "cuatro" ></li></a> <a href= "#t5" &G T;<li class= "icon fa fa-plus-circle" id= "cinco" ></li></a> </ul> <p class= "Pag E "id=" P1 "> <section class=" icon fa fa-bolt "><span class=" title ">bolt</span><span Clas s= "hint" >...</section> </p> <p class= "page" id= "P2" > <section class= " Icon FA Fa-keYboard-o "><span class=" title ">Type</span></section> </p> <p class=" page "I d= "P3" > <section class= "icon fa fa-rocket" ><span class= "title" &GT;ROCKET&LT;/SPAN&GT;&LT;/SECTION&G          T </p> <p class= "page" id= "P4" > <section class= "icon fa fa-dribbble" > &lt  Span class= "title" >Dribbble</span> <p class= "hint" > Im ready to play, <span class= "Hint Line-trough" >invite me </span> Find me </p> <p class= "hint" ;...</p> </section> </p> <p class= "page" id= "P5" > <sect Ion class= "icon fa fa-plus-circle" > <span class= "title" >More</span> <p class= "      Hint "> ... </p> </section> </p> </p> </p&Gt </p> </p></p>

CSS Styles

The single-page toggle navigation menu interface uses transform and transition to animate the transitions of the page. And through: Target pseudo-element to complete the button click on the page switch. The complete CSS code is as follows, and the browser vendor prefix is not added to the code.

HTML, body,. page {width:100%;     height:100%;     margin:0;     padding:0;     Transition:all. 6s Cubic-bezier (. 5,. 2,. 2, 1.1);     Color: #fff;    Overflow:hidden;   } * {font-family: ' Open sans ', ' lato ', ' Helvetica ', Sans-serif;   }. page {position:absolute;   } #p1 {left:0;   } #p2, #p3, #p4, #p5 {left:200%;   } #p1 {background:darkslateblue;}   #p2 {Background:tomato;}   #p3 {background:gold;}   #p4 {background:deeppink;}   #p5 {background: #9b59b6;}     #t2: Target #p2, #t3: Target #p3, #t4: Target #p4, #t5: Target #p5 {Transform:translatex (-190%);   Transition-delay:. 4s!important;   #t2: Target #p1, #t3: Target #p1, #t4: Target #p1, #t5: Target #p1 {background:black; #t2: Target #p1. Icon, #t3: Target #p1. Icon, #t4: Target #p1. Icon, #t5: Target #p1. icon {-WEBKIT-FILTER:BL     ur (3px);   Filter:blur (3PX);     }. Icon {color: #fff;     font-size:32px;   Display:block;  } ul. icon:hover {opacity:0.5;   }. Page. icon. title {line-height:2;     } #t2: Target ul. icon, #t3: Target ul. icon, #t4: Target ul. icon, #t5: Target ul icon{Transform:scale (. 6);   Transition-delay:. 25s;    #t2: Target #dos, #t3: Target #tres, #t4: Target #cuatro, #t4: Target #cinco {transform:scale (1.2)!important;     } ul {position:fixed;     Z-index:1;     top:0;     bottombottom:0;     left:0;     Margin:auto;     height:280px;     width:10%;     padding:0;    Text-align:center;     } #menu. icon {margin:30px 0;   Transition:all. 5s Ease-out!important;   } a {text-decoration:none;   }. title,. hint {display:block;   }. title {font-size:38px;   }. hint {font-size:13px;   } #p4. hint {display:inherit!important;     }. Hint a {color:yellow;   Transition:all 250ms ease-out;   }. Hint A:hover {color: #FFF;   }. line-trough {text-decoration:line-through;}. Page. icon {position:absolute;     top:0;     bottombottom:0;     rightright:10%;     left:0;     width:270px;     height:170px;     Margin:auto;     Text-align:center;     font-size:80px;     line-height:1.3;     Transform:translatex (360%);   Transition:all. 5s Cubic-bezier (. 25, 1,. 5, 1.25);   }. page#p1. icon {height:220px; }. page#p1. Icon {Transform:translatex (10%)!   Important     #t2: Target. Page#p2 icon, #t3: Target page#p3. Icon, #t4: Target page#p4. Icon, #t5: Target page#p5. Icon {     Transform:translatex (0)!important;   Transition-delay:1s; }

Above this pure CSS3 single-page switch navigation menu interface design Simple implementation is the small part to share all the content, hope to give you a reference, but also hope that we support a lot of topic.alibabacloud.com.