這是一款非常簡(jiǎn)單的Material Design風(fēng)格手機(jī)App菜單特效。該特效使用CSS3和少量的jQuery代碼來(lái)完成。在用戶點(diǎn)擊漢堡包菜單按鈕之后，按鈕會(huì)變形放大到整個(gè)手機(jī)APP屏幕，同時(shí)菜單選項(xiàng)會(huì)從屏幕下方滑動(dòng)上來(lái)，效果非常酷。
制作方法
HTML結(jié)構(gòu)
該APP菜單的HTML結(jié)構(gòu)使用嵌套<div>的HTML結(jié)構(gòu)。導(dǎo)航菜單使用<nav>元素來(lái)制作。div.nav-toggle是用于制作圓形的擴(kuò)展動(dòng)畫(huà)，div.icon是漢堡包圖標(biāo)。
- <div class="phone">
- <div class="screen">
- <nav class="nav">
- <ul>
- <li><a href="#">搜 索</a></li>
- <li><a href="#">主 頁(yè)</a></li>
- <li><a href="#">HTML5學(xué)習(xí)</a></li>
- <li><a href="#">CSS3學(xué)習(xí)</a></li>
- <li><a href="#">聯(lián)系我們</a></li>
- </ul>
- </nav>
- <div class="nav-toggle">
- <div class="icon"></div>
- </div>
- <div class="lower-screen">
- <div class="card">
- <h2>Material cards</h2>
- <p>...</p>
- </div>
-
- <div class="card">
- <h2>..</h2>
- <p>...</p>
- </p>
- </div>
- </div>
- </div>
- </div>
CSS樣式
在這個(gè)APP節(jié)目設(shè)計(jì)中，手機(jī)的界面采用固定的寬度和高度，并設(shè)置為固定定位。手機(jī)的屏幕也設(shè)置了固定的寬度和高度，并設(shè)置為相對(duì)定位。
- .phone {
- position: fixed;
- top: 50%;
- left: 50%;
- -webkit-transform: translateX(-50%) translateY(-50%);
- -ms-transform: translateX(-50%) translateY(-50%);
- transform: translateX(-50%) translateY(-50%);
- width: 280px;
- height: 580px;
- border-radius: 40px;
- background-color: white;
- }
- .phone .screen {
- width: 260px;
- height: 450px;
- background-color: #ECEBE9;
- display: block;
- margin: 65px auto;
- overflow: hidden;
- position: relative;
- border-radius: 2px;
- border: 4px solid #262626;
- }
漢堡包圖標(biāo)的包裹元素設(shè)置為一個(gè)半徑30像素的圓形。它的:before偽元素設(shè)置為和它同樣的大小，后面會(huì)使用這個(gè)偽元素來(lái)制作圓形擴(kuò)展的動(dòng)畫(huà)效果。
- .nav-toggle {
- width: 60px;
- height: 60px;
- z-index: 2;
- border-radius: 50%;
- margin: 10px;
- position: absolute;
- cursor: pointer;
- box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
- -webkit-transition-duration: 0.66s;
- transition-duration: 0.66s;
- -webkit-transition-timing-function: swing;
- transition-timing-function: swing;
- }
- .nav-toggle:before {
- width: 60px;
- height: 60px;
- border-radius: 50%;
- background-color: #4A75E6;
- content: "";
- position: absolute;
- top: 50%;
- left: 50%;
- -webkit-transform: translateX(-50%) translateY(-50%);
- -ms-transform: translateX(-50%) translateY(-50%);
- transform: translateX(-50%) translateY(-50%);
- -webkit-transition-duration: 0.66s;
- transition-duration: 0.66s;
- -webkit-transition-timing-function: swing;
- transition-timing-function: swing;
- }
在用戶點(diǎn)擊了漢堡包圖標(biāo)之后，特效中使用jQuery代碼來(lái)為body元素切換class，當(dāng)body元素被添加了.nav-openclass之后，.nav-toggle:before偽元素開(kāi)始動(dòng)畫(huà)，圓形開(kāi)始擴(kuò)展。
- body.nav-open .nav-toggle:before {
- width: 1200px;
- height: 1200px;
- background-color: rgba(74, 117, 230, 0.95);
- }
本文版權(quán)屬于jQuery之家，轉(zhuǎn)載請(qǐng)注明出處：http://www.htmleaf.com/css3/daohangcaidan/201507132222.html
【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過(guò)測(cè)試外，其他素材未做測(cè)試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請(qǐng)勿用于商業(yè)用途。如損害你的權(quán)益請(qǐng)聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。