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爬虫之路——构造URL集
例某网站的URL集是这样的 https://www.555zw.com/book/40/40934/10334793.html https://www.555zw.com/book/40/40934/ ...
- PHP的优良习惯(转)
1.多阅读手册和源代码 没什么比阅读手册更值得强调的事了–仅仅通过阅读手册你就可以学习到很多东西,特别是很多有关于字符串和数组的函数.就在这些函数里面包括许多有用的功能,如果你仔细阅读手册,你会经常发 ...
- 你会如何给全局对象添加toString()方法
首先,在讨论如何给所有方法window对象添加toString方法的时候,我们先来说说window的对象继承与对象实例,以及构造函数的this指针,还有变量的提升与方法的调用方式,最终一探window ...
- 跑edgebox
这是edge的作者的代码:https://github.com/pdollar/edges 这是matlab写的,还需要装Matlab Image Processing Toolbox和Piotr's ...
- Java压缩字符串工具类
StringCompressUtils.java package javax.utils; import java.io.ByteArrayInputStream; import java.io.By ...
- java中的String对象的创建及堆栈的解释
java中的string真的是很令人头疼呢!!! 请看这里 看这里
- 转 消息队列之 RabbitMQ
转 https://www.jianshu.com/p/79ca08116d57 消息队列之 RabbitMQ 预流 2017.05.06 16:03* 字数 4884 阅读 80990评论 18喜欢 ...
- (68)zabbix windows性能计数器使用详解
概述 windows下的性能计数器让zabbix监控更加轻松,直接获取性能计数器的数值即可完成windows监控.性能计数器如下: 1 perf_counter["\Processor( ...
- 公用表表达式CTE简单递归使用-简单树形结构
1.建表脚本 CREATE TABLE [dbo].[tb_tree]( ,) NOT NULL, [ParentId] [int] NULL, ) NULL, CONSTRAINT [PK_tb_t ...
- Manjaro 添加国内源和安装搜狗输入法
Manjaro 系统虽然比 Ubuntu 用着稳定,但有些小地方没有 Ubuntu 人性化,比如默认安装完的系统貌似没有中国的,Ubuntu 估计是用的人多,所以安装完后会根据所在地给你配置更新的源. ...