简单的Material Design风格手机App菜单特效-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

简单的Material Design风格手机App菜单特效

May 17, 2016 am 09:07 AM

　　简要教程
　　这是一款非常简单的Material Design风格手机App菜单特效。该特效使用CSS3和少量的jQuery代码来完成。在用户点击汉堡包菜单按钮之后，按钮会变形放大到整个手机APP屏幕，同时菜单选项会从屏幕下方滑动上来，效果非常酷。

　　制作方法
　　HTML结构
　　该APP菜单的HTML结构使用嵌套

的HTML结构。导航菜单使用

&lt;div class=&quot;phone&quot;&gt;
  &lt;div class=&quot;screen&quot;&gt;
    &lt;nav class=&quot;nav&quot;&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;搜　索&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;主　页&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;HTML5学习&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;CSS3学习&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;联系我们&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
    &lt;div class=&quot;nav-toggle&quot;&gt;
      &lt;div class=&quot;icon&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;lower-screen&quot;&gt;
      &lt;div class=&quot;card&quot;&gt;
        &lt;h2&gt;Material cards&lt;/h2&gt;
        &lt;p&gt;...&lt;/p&gt;
      &lt;/div&gt;
        
      &lt;div class=&quot;card&quot;&gt;
        &lt;h2&gt;..&lt;/h2&gt;
        &lt;p&gt;...&lt;/p&gt;
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

Copy after login

　　CSS样式
　　在这个APP节目设计中，手机的界面采用固定的宽度和高度，并设置为固定定位。手机的屏幕也设置了固定的宽度和高度，并设置为相对定位。

.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;
}

Copy after login

　　汉堡包图标的包裹元素设置为一个半径30像素的圆形。它的:before伪元素设置为和它同样的大小，后面会使用这个伪元素来制作圆形扩展的动画效果。

.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: &quot;&quot;;
  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;
}

Copy after login

　　在用户点击了汉堡包图标之后，特效中使用jQuery代码来为body元素切换class，当body元素被添加了.nav-openclass之后，.nav-toggle:before伪元素开始动画，圆形开始扩展。

body.nav-open .nav-toggle:before {
  width: 1200px;
  height: 1200px;
  background-color: rgba(74, 117, 230, 0.95);
}

Copy after login

　　整个效果的CSS代码十分简单，具体请参考下载文件。

以上就是简单的Material Design风格手机App菜单特效的内容，更多相关内容请关注PHP中文网（www.php.cn）！

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article

Repo: How To Revive Teammates

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

3 weeks ago By DDD

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

1 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?

3 weeks ago By 王林

Hot tools Tags

Code&IT

Voice

Business

Marketing

AI Detector

Chatbot

Design&Art

Hot Article

Repo: How To Revive Teammates

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

3 weeks ago By DDD

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

1 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?

3 weeks ago By 王林

Hot Article Tags

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7291

Java Tutorial

1622

CakePHP Tutorial

1342

Laravel Tutorial

1259

PHP Tutorial

1206

Related knowledge

Nothing shows brand new design of the CMF Watch Pro 2, reveals curious details about the CMF Phone 1 Jun 27, 2024 am 10:42 AM

Nothing shows brand new design of the CMF Watch Pro 2, reveals curious details about the CMF Phone 1

Tips and methods for implementing sidebar menu special effects with CSS Oct 24, 2023 am 10:33 AM

Tips and methods for implementing sidebar menu special effects with CSS

Cybertruck owner reviews the new Tactical Grey interior design and delivery experience Jun 30, 2024 pm 09:44 PM

Cybertruck owner reviews the new Tactical Grey interior design and delivery experience

HMD Slate Tab 5G leakes as mid-range tablet with Snapdragon 7s Gen 2, 10.6-inch display and Lumia design Jun 18, 2024 pm 05:46 PM

HMD Slate Tab 5G leakes as mid-range tablet with Snapdragon 7s Gen 2, 10.6-inch display and Lumia design

$HMD Global\'s Lumia-inspired smartphone could be a game-changer$ HMD Global\'s Lumia-inspired smartphone could be a game-changer Sep 03, 2024 pm 09:37 PM

HMD Global\'s Lumia-inspired smartphone could be a game-changer

HMD Slate Tab 5G leaks as mid-range tablet with Snapdragon 7s Gen 2, 10.6-inch display and Lumia design Jun 19, 2024 am 12:00 AM

HMD Slate Tab 5G leaks as mid-range tablet with Snapdragon 7s Gen 2, 10.6-inch display and Lumia design

Sony hides PS5 Pro design in plain sight in very ordinary social media post Sep 06, 2024 am 09:35 AM

Sony hides PS5 Pro design in plain sight in very ordinary social media post

Apple concept artist's designs may look 'too real” for comfort, says letter from Apple's lawyers Aug 19, 2024 am 04:58 AM

Apple concept artist's designs may look 'too real” for comfort, says letter from Apple's lawyers

See all articles