这是一款使用纯CSS3制作的单页切换导航菜单界面设计效果。该页面效果中，在页面的左侧垂直排放一组导航按钮，当点击导航按钮时，相应的页面会从屏幕右侧滑动出来，效果非常炫酷。
使用方法
HTML结构
该单页切换导航菜单界面的HTML结构如下：
XML/HTML Code复制内容到剪贴板
<divclass="ct"id="t1"><divclass="ct"id="t2"><divclass="ct"id="t3"><divclass="ct"id="t4"><divclass="ct"id="t5"><ulid="menu"><ahref="#t1"><liclass="iconfafa-bolt"id="uno"></li></a><ahref="#t2"><liclass="iconfafa-keyboard-o"id="dos"></li></a><ahref="#t3"><liclass="iconfafa-rocket"id="tres"></li></a><ahref="#t4"><liclass="iconfafa-dribbble"id="cuatro"></li></a><ahref="#t5"><liclass="iconfafa-plus-circle"id="cinco"></li></a></ul><divclass="page"id="p1"><sectionclass="iconfafa-bolt"><spanclass="title">Bolt</span><spanclass="hint">...</section></div><divclass="page"id="p2"><sectionclass="iconfafa-keyboard-o"><spanclass="title">Type</span></section></div><divclass="page"id="p3"><sectionclass="iconfafa-rocket"><spanclass="title">Rocket</span></section></div><divclass="page"id="p4"><sectionclass="iconfafa-dribbble"><spanclass="title">Dribbble</span><pclass="hint">Imreadytoplay,<spanclass="hintline-trough">inviteme</span>findme</p><pclass="hint">...</p></section></div><divclass="page"id="p5"><sectionclass="iconfafa-plus-circle"><spanclass="title">More</span><pclass="hint">...</p></section></div></div></div></div></div></div>CSS样式
该单页切换导航菜单界面使用transform和transition来制作页面的切换动画效果。并通过:target伪元素来完成按钮点击时的页面切换。完整的CSS代码如下，代码中没有添加浏览器厂商的前缀。
CSS Code复制内容到剪贴板
html,body,.page{width:100%;height:100%;margin:0;padding:0;transition:all.6scubic-bezier(.5,.2,.2,1.1);color:#fff;overflow:hidden;}*{font-family:'opensans','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: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:targetul.icon,#t3:targetul.icon,#t4:targetul.icon,#t5:targetul.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:30px0;transition:all.5sease-out!important;}a{text-decoration:none;}.title,.hint{display:block;}.title{font-size:38px;}.hint{font-size:13px;}#p4.hint{display:inherit!important;}.hinta{color:yellow;transition:all250msease-out;}.hinta: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.5scubic-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;}以上这篇纯CSS3单页切换导航菜单界面设计的简单实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
