CSS3仿移动淘宝左下角扇形菜单效果

来源：互联网发布：洗发露有哪些牌子知乎编辑：程序博客网时间：2024/05/12 10:52

一：淘宝效果

分析：

动画效果--CSS3
显示隐藏--jquery
橙色背景---图案

等下的例子里面用的是CSS背景色配合 border-top-left-radius: 100%样式实现，但在移动端的浏览器中查看，是不兼容的，所以说如果用在移动端的话建议和淘宝一样的做法，用背景图实现。

移动端：

PC端：

二：前期准备：

关于不规则图形上的点击事件：

建议用热点

注意：

area 位置相当于定位了的z-index，越是靠前相当于z-index越大如下面圆形热点circle 就是在页面中最靠近我们的，画热点的时候位置一定要对应好，免得点击范围有误。

技巧：

用dw打开菜单背景图，在图案上面直接绘制热点，然后把代码复制出来就ok。

三：上代码

用到的素材：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>CSS3仿移动淘宝左下角扇形菜单效果</title>  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>  <style>       * {-webkit-tap-highlight-color: transparent; -webkit-appearance: none;}      map,map area{outline:none;background: transparent;}      .sector_menu{width: 350px;  height: 400px; border: #000 solid 0px; position: absolute; }      a{display: block;text-indent: -9999px;}      ul{margin: 0;padding: 0}      li{list-style-type:none;}      .sectorM_sector{width: 281px;height: 281px;overflow: hidden;background:url(bg.png) no-repeat center;position: absolute;}      .sectorM_sector li{width: 50%;height: 50%;position: absolute;overflow: hidden;}      .sectorM_sector li.se2{  -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); margin: -26px 0 0 96px; }      .sectorM_sector li.se3{-webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); margin: 44px 0 0 166px; }      .sectorM_sector li.se4{  -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); margin: 140px 0 0 140px; }      .sectorM_sector li.se5{  -webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); margin: 166px 0 0 44px; }      .sectorM_sector li.se6{    -webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); margin: 96px 0 0 -26px; }      .sectorM_list{border-radius: 50%;padding: 6px;background: rgba(0,0,0,0.2);width: 281px;height: 281px;position: absolute;overflow: hidden; bottom: 0;left: 0;}      .sectorM_icon li{position: absolute;width: 44px;height: 37px;overflow: hidden;background: url(icon.png);}      .sectorM_icon li.se1 {margin: 37px 0 0 71px; background-position: 0 -37px; }      .sectorM_icon li.se2 {margin: 37px 0 0 168px; background-position: -220px -37px; }      .sectorM_icon li.se3 {margin: 122px 0 0 214px; background-position: -176px -37px; }      .sectorM_icon li.se4 {margin: 204px 0 0 165px; background-position: -132px -37px; }      .sectorM_icon li.se5 {margin: 208px 0 0 76px; background-position: -88px -37px; }      .sectorM_icon li.se6 {margin: 120px 0 0 21px; background-position: -44px -37px; }      .sectorM_sector  a {width: 100%;height: 100%;  border-top-left-radius: 100%;  -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); margin: -25px 0 0 45px;}      .sectorM_sector li.cur a{background: #ff4400;}      .sectorM_icon li {display: none;}      /*   做到这里也许 你会觉得好奇，这里把a隐藏，下面只是用用来模拟鼠标经过的效果，没有a怎么跳转页面呢？所以我们才用了热点map *//* CSS3菜单特效效果 */      .sectorM_list {      -webkit-transition:all 0.3s;      transition:all 0.3s;      -webkit-transform:translate(-100px,100px) scale(0,0) rotate(0);      transform:translate(-100px,100px) scale(0,0) rotate(0);      }      .sectorM_list.open {      -webkit-transform:translate(28px,-100px) scale(1,1) rotate(360deg);      transform:translate(28px,-100px) scale(1,1) rotate(360deg);      }      .sectorM_fouce a {      -webkit-transition:all 0.3s;      transition:all 0.3s;      }      /* CSS3菜单特效效果 */      .sectorM_fouce { position:absolute; bottom:25px; left:25px;}      .sectorM_fouce a { display:block; width:60px; height:60px; border-radius:50%; background:#ff4400; border:#fff solid 5px; box-shadow: 0 0 0 3px rgba(200,200,200,0.3);}      .sectorM_fouce a span { background:url(icon.png) no-repeat -264px -46px; display:block; width:41px; height:31px; overflow:hidden; line-height:999px; margin:14px 0 0 9px;}      .sectorM_home {width: 138px;height: 138px;overflow: hidden;position: absolute;border-radius: 50%;background: url(home.png);  left: 50%; top: 50%; margin: -69px 0 0 -69px;}      .sectorM_home a{display: block;width: 125px; height: 125px; border-radius: 50%; margin: 7px; }      .sectorM_home.cur a { background: #ff4400; }      .sectorM_home.cur a span {display: block; width: 53px; height: 46px; background: url(icon.png) right top; position: relative; margin: auto; top: 40px; }      .sectorM_fouce a.open {      background: rgba(200,200,200,0.5);      }      .sectorM_link{width: 100%;height: 100%;position: absolute;}  </style></head><body><div class="sector_menu">   <div class="sectorM_list">      <ul class="sectorM_sector">           <li class="se1"><a href="#">我的淘宝</a></li>           <li class="se2"><a href="#">购物车</a></li>           <li class="se3"><a href="#">搜索</a></li>           <li class="se4"><a href="#">更多</a></li>           <li class="se5"><a href="#">物流</a></li>           <li class="se6"><a href="#">旺旺</a></li>      </ul>          <ul class="sectorM_icon">           <li class="se1"><a href="#">我的淘宝</a></li>           <li class="se2"><a href="#">购物车</a></li>           <li class="se3"><a href="#">搜索</a></li>           <li class="se4"><a href="#">更多</a></li>           <li class="se5"><a href="#">物流</a></li>           <li class="se6"><a href="#">旺旺</a></li>      </ul>      <div class="sectorM_home">        <a href="#home">          <span>主页</span>        </a>      </div>      <div class="sectorM_link"><img src="link.png" width="100%" height="100%" border="0" usemap="#sectorM_map"/><map name="sectorM_map" id="sectorM_map"> <area shape="circle"  coords="141,142,62" href="#home" />  <area shape="poly" coords="139,142,9,64,140,0" href="#geren" />  <area shape="poly" coords="139,143,278,64,142,5" href="#gouwu" /><area shape="poly" coords="141,142,279,220,277,66" href="#cha" />  <area shape="poly" coords="142,143,138,269,278,223" href="#else" />  <area shape="poly" coords="138,142,4,216,138,269" href="#wuliu" />  <area shape="poly" coords="137,143,10,66,5,213" href="#ke" /></map></div>   </div><!-- 菜单容器 -->    <div class="sectorM_fouce">       <a href="javascript:void(0)">         <span>淘宝</span>       </a>    </div><!-- 菜单触发点 --></div>  <script>  $(function(){$(".sectorM_fouce a").click(function(){ if($(this).attr("class") == "open"){  $(this).removeClass("open");  $(this).addClass("close");  $(".sectorM_list").removeClass("open");  $(".sectorM_list").addClass("close"); }else{  $(this).removeClass("close");  $(this).addClass("open");  $(".sectorM_list").removeClass("close");  $(".sectorM_list").addClass("open"); }  })$("#sectorM_map area[shape='circle']").hover(function() { $(".sectorM_home").addClass('cur')}, function() {  $(".sectorM_home").removeClass('cur')});$("#sectorM_map area[shape='poly']").hover(function() {i = $(this).index(); $(".sectorM_icon li").eq(i-1).show(); $(".sectorM_sector li").eq(i-1).addClass('cur')}, function() {  $(".sectorM_icon li").eq(i-1).hide(); $(".sectorM_sector li").eq(i-1).removeClass('cur')}); })  </script></body>

用在项目中的效果

资源下载

代码

参考&模仿：

http://m.taobao.com/

http://www.csrcode.cn/html/txdm/cddh/4390.htm

0 0