Pure CSS3 single page toggle navigation menu Interface Design

Brief tutorials

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:

<div class= "CT" id= "T1" > <div class= "ct" id= "t2" > <div class= "CT" id= "T3" > <div class= "CT" I d= "T4" > <div class= "CT" id= "T5" > <ul id= "menu" > <a href= "#t1" ><li clas s= "icon fa fa-bolt" id= "Uno" ></li></a> <a href= "#t2" ><li class= "icon fa fa-keyboard-o" Id= "DOS" ></li></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" ><li class= "icon fa fa-plus-circle" id= "cinco" ></li></a> </ul> <div class= "page" id= "P1" > <section class= "icon fa fa-bolt" ><span class= "title" >bolt&lt            ;/span><span class= "hint" >...</section> </div> <div class= "page" id= "P2" > <section CLass= "icon fa fa-keyboard-o" ><span class= "title" >Type</span></section> </div> <div class= "page" id= "P3" > <section class= "icon fa fa-rocket" ><span class= "title" >rocket&lt ;/span></section> </div> <div class= "page" id= "P4" > <section class= "I                Con fa fa-dribbble "> <span class=" title ">Dribbble</span> <p class=" hint "> Im ready to play, <span class= "hint Line-trough" >invite me </span> Find me &LT;/P&G              T <p class= "hint" >...</p> </section> </div> <div class= "page" id= "p              5 "> <section class=" icon fa fa-plus-circle "> <span class=" title ">More</span> <p class= "hint" > ... </p> </section> </d  Iv>       </div> </div> </div> </div></div> 

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. I  Con, #t4: Target #p1. Icon, #t5: Target #p1. Icon {-webkit-filter:blur (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;  bottom: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;  bottom:0;  right: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:tran  Slatex (0)!important; Transition-delay:1s;}

The above is pure CSS3 single page switch navigation menu interface design content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

