這是一款使用純CSS3製作的單頁切換導航菜單界面設計效果。該頁面效果中，在頁面的左側垂直排放一組導航按鈕，當點擊導航按鈕時，相應的頁面會從屏幕右側滑動出來，效果非常炫酷。 線上預覽 源碼下載 使用方法 該單頁切換導航菜單界面的HTML結構如下： 1 2 3 4 5 6 7 8 9 10 11 12 ...
這是一款使用純CSS3製作的單頁切換導航菜單界面設計效果。該頁面效果中，在頁面的左側垂直排放一組導航按鈕，當點擊導航按鈕時，相應的頁面會從屏幕右側滑動出來，效果非常炫酷。
使用方法
HTML結構
該單頁切換導航菜單界面的HTML結構如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<div class="ct" id="t1">
<div class="ct" id="t2">
<div class="ct" id="t3">
<div class="ct" id="t4">
<div class="ct" id="t5">
<ul id="menu">
<a href="#t1"><li class="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</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</span></section>
</div>
<div class="page" id="p4">
<section class="icon 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
</p>
<p class="hint">...</p>
</section>
</div>
<div class="page" id="p5">
<section class="icon fa fa-plus-circle">
<span class="title">More</span>
<p class="hint">
...
</p>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
|
CSS樣式
該單頁切換導航菜單界面使用transform和transition來製作頁面的切換動畫效果。並通過:target偽元素來完成按鈕點擊時的頁面切換。完整的CSS代碼如下，代碼中沒有添加瀏覽器廠商的首碼。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 |
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: 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: translateX(0) !important;
transition-delay: 1s;
}
|
