css3制作扇形菜单
工作中网页中有一个扇形的导航菜单,以前没有接触过,参考了
http://www.w3cplus.com/css3/building-a-circular-navigation-with-css-transforms.html以及原网站http://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms,作者讲得很详细,我就不多说了,下面是我的demo：
有一部分浏览器不支持css3，还需要为其设置另一套样式，通过js判断浏览器类型，并替换样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>纯CSS扇形菜单</title>
<style type="text/css">
/*导航外层div设为圆形*/
.css-transforms .menu-wrapper {
overflow: hidden;
zoom: 1;
position: relative;
width: 460px;
height: 460px;
margin: 40px auto 0;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: transparent;
pointer-events: auto;
border: 1px solid #000;
} /*覆盖a标签的内侧靠近圆心的部分, 避免鼠标点击事件*/
.css-transforms .menu-wrapper:after{
color: transparent;
content:".";
display:block;
position: absolute;
z-index:10;
left: 50%;
top:50%;
margin-left: -150px;
margin-top: -150px;
width: 300px;
height: 300px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 1px solid blue;
}
.css-transforms .menu-wrapper li {
position: absolute;
top: -70px;
left: -70px;
overflow: hidden;
width: 300px;
height: 300px;
transform-origin: 100% 100%;
pointer-events: none;
border: 1px solid green;
} /*a标签反倾斜角度为-(90-x),旋转角度为-x,x为我们想要的圆心角,在这个demo里,有3个列表项,半圆,得出圆心角为60*/
.css-transforms .menu-wrapper li a {
position: absolute;
right: -200px;
bottom: -200px;
display: block;
width: 420px;
height: 420px;
border-radius: 50%;
color: #fff;
text-align: center;
text-decoration: none;
/*先斜切后旋转,不可颠倒*/
-webkit-transform: skew(-30deg) rotate(-60deg) scale(1);
-moz-transform: skew(-30deg) rotate(-60deg) scale(1);
-ms-transform: skew(-30deg) rotate(-60deg) scale(1);
-o-transform: skew(-30deg) rotate(-60deg) scale(1);
transform: skew(-30deg) rotate(-60deg) scale(1);
pointer-events: auto;
} .css-transforms .menu-wrapper li a span{
display: none;
} /*列表项倾斜角度为90-x,每个列表项的旋转角度依次间隔 >60 */
.css-transforms .menu-wrapper li:first-child {
-webkit-transform: rotate(-10deg) skew(30deg);
-moz-transform: rotate(-10deg) skew(30deg);
-ms-transform: rotate(-10deg) skew(30deg);
-o-transform: rotate(-10deg) skew(30deg);
transform: rotate(-10deg) skew(30deg);
}
.css-transforms .menu-wrapper li:nth-child(2) {
-webkit-transform: rotate(60deg) skew(30deg);
-moz-transform: rotate(60deg) skew(30deg);
-ms-transform: rotate(60deg) skew(30deg);
-o-transform: rotate(60deg) skew(30deg);
transform: rotate(60deg) skew(30deg);
}
.css-transforms .menu-wrapper li:nth-child(3) {
-webkit-transform: rotate(-130deg) skew(30deg);
-moz-transform: rotate(-130deg) skew(30deg);
-ms-transform: rotate(-130deg) skew(30deg);
-o-transform: rotate(-130deg) skew(30deg);
transform: rotate(130deg) skew(30deg);
} .css-transforms .menu-wrapper li a span{
display: none;
}
.css-transforms .menu-wrapper li:first-child a{
background: radial-gradient(transparent 45%, #dc7d01 35%);
}
.css-transforms .menu-wrapper li:nth-child(2) a{
background: radial-gradient(transparent 45%, #a70101 35%);
}
.css-transforms .menu-wrapper li:nth-child(3) a{
background: radial-gradient(transparent 45%, #017d07 35%);
} .css-transforms .menu-wrapper li:first-child a:hover,
.css-transforms .menu-wrapper li:first-child a:active,
.css-transforms .menu-wrapper li:first-child a:focus {
background: radial-gradient(transparent 45%, #e88503 35%);
}
.css-transforms .menu-wrapper li:nth-child(2) a:hover,
.css-transforms .menu-wrapper li:nth-child(2) a:active,
.css-transforms .menu-wrapper li:nth-child(2) a:focus {
background: radial-gradient(transparent 45%, #b40303 35%);
}
.css-transforms .menu-wrapper li:nth-child(3) a:hover,
.css-transforms .menu-wrapper li:nth-child(3) a:active,
.css-transforms .menu-wrapper li:nth-child(3) a:focus {
background: radial-gradient(transparent 45%, #028b09 35%);
} .css-transforms .menu-wrapper li:first-child a img{
margin-top: 8px;
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-ms-transform: rotate(-25deg);
-o-transform: rotate(-25deg);
transform: rotate(-25deg);
}
.css-transforms .menu-wrapper li:nth-child(2) a img{
margin-top: 21px;
}
.css-transforms .menu-wrapper li:nth-child(3) a img{
margin-top: -2px;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg) ;
} /*不支持css3*/
.no-transforms .menu-wrapper{
margin:10em auto;
overflow:hidden;
text-align:center;
padding:1em;
border: 1px solid #000;
}
.no-transforms .menu-wrapper ul{
display:inline-block;
}
.no-transforms li{
width:120px;
height:50px;
float:left;
line-height:50px;
text-align:center;
margin-right: 20px;
background-color: #fff;
/*border: 1px solid red;*/
}
.no-transforms li a{
display:block;
height:100%;
width:100%;
line-height: 50px;
text-decoration: none;
color: #fff;
}
.no-transforms .menu-wrapper li a span{
display: block;
}
.no-transforms .menu-wrapper li a img{
display: none;
}
.no-transforms li a.first{
background-color: #e88503;
}
.no-transforms li a.second{
background-color: #b40303;
}
.no-transforms li a.last{
background-color: #028b09;
}
.no-transforms .menu-wrapper li a:hover,
.no-transforms .menu-wrapper li a:active,
.no-transforms .menu-wrapper li a:focus{
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
}
</style>
</head>
<body>
<div class="css-transforms" id="box">
<div class="menu-wrapper">
<ul>
<li><a href="#" class="first"><img src="./font-1.png" alt=""><span>彝族音乐图片</span></a></li>
<li><a href="#" class="second"><img src="./font-2.png" alt=""><span>彝族音乐理论</span></a></li>
<li><a href="#" class="last"><img src="./font-3.png" alt=""><span>彝族音乐</span></a></li>
</ul>
</div>
</div>
<script>
//为不支持css3的浏览器更换样式
var wrapper = document.getElementById('box');
var supports = (function() {
var div = document.createElement('div'),
vendors = 'Khtml Ms O Moz Webkit'.split(' '),
len = vendors.length; return function(prop) {
if ( prop in div.style ) return true; prop = prop.replace(/^[a-z]/, function(val) {
return val.toUpperCase();
}); while(len--) {
if ( vendors[len] + prop in div.style ) {
return true;
}
}
return false;
};
})(); if ( !supports('transform') ) {
removeClass(wrapper, 'css-transforms');
addClass(wrapper, 'no-transforms');
} function hasClass(obj, cls) {
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
} function addClass(obj, cls) {
if (!this.hasClass(obj, cls)) obj.className += " " + cls;
} function removeClass(obj, cls) {
if (hasClass(obj, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg, ' ');
}
} </script>
</body>
</html>
效果如下:
css3制作扇形菜单的更多相关文章
- 使用 jQuery 和 CSS3 制作滑动导航菜单
这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示 ...
- 24个 HTML5 & CSS3 下拉菜单效果及制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- 10个优秀的 HTML5 & CSS3 下拉菜单制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- 推荐10个 CSS3 制作的创意下拉菜单效果
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- 基于CSS3制作的鼠标悬停动画菜单
之前分享了好多款css3实现的鼠标悬停效果.今天再给大家带来一款基于CSS3制作的鼠标悬停动画菜单.这款菜单适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界 ...
- 11个优秀的HTML5 & CSS3下拉菜单制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用HTML5和CSS3可以更容易创造视觉 ...
- CSS3制作下拉菜单
导航菜单其实是没有什么可说的,制作方法到处可见,今天这个案例本来不只是一个导 航,还有一个搜索表单的,可是为了偷懒,把搜索表单部分去掉了,就变成了一个CSS3 制作的下拉菜单.在这个导航中主要两点,一 ...
- 10个优秀的 HTML5 & CSS3 下拉菜单制作教程
下拉菜单是一个非经常见的效果.在站点设计中被广泛使用.通过使用下拉菜单.设计者不仅能够在站点设计中营造出色的视觉吸引力,但也能够为站点提供了一个有效的导航方案.使用 HTML5 和 CSS3 能够更e ...
- 用CSS3制作很特别的波浪形菜单
原文:用CSS3制作很特别的波浪形菜单 网页菜单我们见过很多,各种炫酷的.实用的菜单比比皆是.昨天我看到一款很特别的CSS3菜单,它的外形是波浪形的,弯弯曲曲,结合背景,看上去还挺不错的,下面看下一效 ...
随机推荐
- python基础教程总结3—字典
1.字典 1.1 字典类型与序列类型的区别: 存取和访问数据的方式不同. 序列类型只用数字类型的键(从序列的开始按数值顺序索引): 映射类型可以用其他对象类型作键(如:数字.字符串.元祖,一般用字符串 ...
- SAP ERP classification和C4C的同步
在ERP里创建两个characteristic: 创建一个class包这两个characteristic.Class type 002意为该class能用于equipment. replicate到C ...
- 三、npm start报错：./node_modules/history/esm/history.js解决办法
package.json中的roadhog换为:'^2.5.0-beta.4',删除node_modules文件夹,在执行npm install,npm start.
- 2018.2.25 关于JavaScript
关于JavaScript 1.数组的归约函数reduce(function(PREV,CUR,I){})会从做导游进行迭代,每次返回的值为下一次的prev参数. 2.在循环遍历数组时若是想在找到结果后 ...
- 关于lua 5.3 服务端热更新流程
脚本的热更新的流程都大同小异, 第一步先保存旧代码的块的数据, 第二部加载新的代码块,第三步将旧代码块的局部和全局数据拷贝到新代码块的对应的 变量中. 在服务器热更新中,主要考虑热更的内容是什么, 一 ...
- cocos2dx 通过jni调用安卓底层方法
cocos2dx通过封装JniHelper类来调用安卓api底层函数,该文件在cocos/platform/android/jni/JniHelper.h,使用方法如下: 打开eclipse,导入co ...
- Ajax请求出现406的原因
一般出现406错误有两种可能: 1.如果后缀是html是不能响应json数据的.需要修改后缀名. 在做伪静态化过程中,以.html结尾的后缀,做post请求时,不能响应json格式,这是spring官 ...
- C#基础-数组-ArrayList
数组ArrayList using System.Collections; //表示引入集合的命名空间 数组ArrayList容量本身是不固定的,根据存储的数据动态变化 // 声明一个ArrayLis ...
- 09GNU C语言程序编译
1. C 语言程序概述 GNU gcc 对 ISO 标准 C89 描述的 C 语言进行了一些扩展,其中一些扩展部分已经包括进 IOS C99 标准中.本节给出了内核中经常用到的一些 gcc 扩展语 ...
- 《linux设备驱动开发详解》笔记——10中断与时钟
10.1 中断与定时器 中断一般有如下类型: 内部中断和外部中断:内部中断来自CPU,例如软件中断指令.溢出.除0错误等:外部中断有外部设备触发 可屏蔽中断和不可屏蔽中断 向量中断和非向量中断,ARM ...