手机端svg图标导航页面切换代码

手机端svg图标导航页面切换代码

一款jQuery css3 svg制作移动端图标导航触屏点击页面背景切换效果代码。

使用方法
在页面引入相关CSS样式

1
<link rel="stylesheet" href="css/style.css">

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
<div class="phone">
  <div class="page">Home</div>
  <nav>
    <div class="wave-wrap">
      <svg version="1.1" id="wave" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 119 26">
          <path class="path" d="M120.8,26C98.1,26,86.4,0,60.4,0C35.9,0,21.1,26,0.5,26H120.8z"/>
        </svg>
    </div>

    <ul class="list-wrap">
      <li data-color="#eccc68" title="Home">
        <i class="icon ion-ios-home"></i>
      </li>
      <li data-color="#ff6b81" title="Profile">
        <i class="icon ion-ios-person"></i>
      </li>
      <li data-color="#7bed9f" title="Get a beer!">
        <i class="icon ion-ios-beer"></i>
      </li>
      <li data-color="#70a1ff" title="Files">
        <i class="icon ion-ios-folder-open"></i>
      </li>
      <li data-color="#dfe4ea" title="Settings">
        <i class="icon ion-ios-settings"></i>
      </li>
    </ul>
  </nav>
</div>
当前内容只有登录了才能查看,如果您已经注册,请登录
3

发表评论