CSS3仿移动淘宝左下角扇形菜单效果
2015-07-30 16:08
886 查看
一：淘宝效果
分析：
动画效果--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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- web开发CSS样式Position详解
- CSS学习笔记2--超级炫酷的进度条
- JS动态加载JS与CSS文件
- CSS中常用的四种选择器
- html以及css中注意的属性
- 使用less开发css
- CSS 外边距合并
- html及css学习笔记_13_css三种选择器(selector)
- css3动画 bug 2点
- css3动画 bug
- Js_Span 滑动手型鼠标样式
- CSS之BFC（块级格式化上下文）
- 纯css解决position:abusolute的div居中显示
- fullPage.js — 回调函数演示和animate.css使用-------全屏滚动加载动画
- html及css学习笔记_12_css三种使用方式
- css-01
- MVC项目发布IIS CSS无法加载
- css的#和.的区别
- tshop-pbsm-shop-nav-ch结构和样式分析
- CSS+DIV布局