核心提示：工作中碰到一个写的很好的圆形菜单，demo过来，后面看看，感觉很有用。!DOCTYPE htmlhtmlheadmeta content=text/html; charset=utf-8 http-e...
工作中碰到一个写的很好的圆形菜单，demo过来，后面看看，感觉很有用。
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<title>底部圆形展开菜单demo</title>
<link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="menu.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<p class="footer">
<p class="base_holder">
<p id="menu" class="menu_holder">
<p class="block1 menu_block">
<!-- 二级菜单 -->
<p class="menu1_1 second_menu">
<p class="second_menu_text">
<p class="title">法院</p><p class="title">概况</p>
</p>
</p>
<p class="menu1_2 second_menu">
<p class="second_menu_text">
<p class="title">开庭</p><p class="title">公告</p>
</p>
</p>
<p class="menu1_3 second_menu">
<p class="second_menu_text">
<p class="title">失信人</p>
<p class="title" style="margin-left:15px;">查询</p>
</p>
</p>
<!-- 中间的过度条状区域-->
<p class="mid_strip">
</p>
<!-- 一级菜单 -->
<p class="first_menu menu_fyxx">
<p class="first_menu_text">
<p class="title">法院信息</p>
<p class="sub_title sub_title1">COURT</p>
<p class="sub_title sub_title2">INFO</p>
</p>
</p>
</p>
<p class="block2 menu_block">
<p class="menu2_1 second_menu">
<p class="second_menu_text">
<p class="title">我要</p>
<p class="title">立案</p>
</p>
</p>
<p class="menu2_2 second_menu">
<p class="second_menu_text">
<p class="title">我要</p>
<p class="title">阅卷</p>
</p>
</p>
<p class="menu2_3 second_menu">
<p class="second_menu_text">
<p class="title">我要</p>
<p class="title">查询</p>
</p>
</p>
<p class="mid_strip">
</p>
<p class="first_menu menu_ssfw">
<p class="first_menu_text">
<p class="title" style="">诉讼服务</p>
<p class="sub_title sub_title1">LITIGATION</p>
<p class="sub_title text_info">SERVICE</p>
</p>
</p>
</p>
<p class="block3 menu_block">
<p class="menu3_1 second_menu">
<p class="second_menu_text">
<p class="title">诉讼</p>
<p class="title">引导</p>
</p>
</p>
<p class="menu3_2 second_menu">
<p class="second_menu_text">
<p class="title">法律</p>
<p class="title">法规</p>
</p>
</p>
<p class="menu3_3 second_menu">
<p class="second_menu_text">
<p class="title">诉讼费</p>
<p class="title" style="margin-left:15px">计算</p>
</p>
</p>
<p class="mid_strip">
</p>
<p class="first_menu menu_ggxx">
<p class="first_menu_text">
<p class="title" style="">公共信息</p>
<p class="sub_title sub_title1">COMMON</p>
<p class="sub_title text_info">INFO</p>
</p>
</p>
</p>
</p>
<p class="menu_btn">
<img src="images/icon/menu_button.png"/>
</p>
</p>
</p>
<script type="text/javascript" src="jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery.arctext.js"></script>
<script>
$(function() {
$(".menu_btn", window.top.document).addClass("up_menu");
$(".menu_holder", window.top.document).addClass("active_menu");
/*二级菜单title旋转*/
$('.menu_block .title').hide();
$('.menu_block .title').show().arctext({
radius: 100,
rotate: true
});
/*一级菜单第一行字旋转*/
$('.first_menu .title').hide();
$('.first_menu .title').show().arctext({
radius: 100,
rotate: true
});
/*fyxx微调*/
$('.menu_fyxx .sub_title1').hide();
$('.menu_fyxx .sub_title1').show().arctext({
radius: 100,
rotate: true
});
$('.menu_fyxx .sub_title2').hide();
$('.menu_fyxx .sub_title2').show().arctext({
radius: 70,
rotate: true
});
/*ssfw*/
$('.menu_ssfw .sub_title1').hide();
$('.menu_ssfw .sub_title1').show().arctext({
radius: 100,
rotate: true
});
$('.menu_ssfw .text_info').hide();
$('.menu_ssfw .text_info').show().arctext({
radius: 70,
rotate: true
});
/*ggxx*/
$('.menu_ggxx .sub_title1').hide();
$('.menu_ggxx .sub_title1').show().arctext({
radius: 100,
rotate: true
});
$('.menu_ggxx .text_info').hide();
$('.menu_ggxx .text_info').show().arctext({
radius: 70,
rotate: true
});
});
$(".menu_btn").click(function() {
$(".menu_holder").toggleClass("active_menu");
});
</script>
</body>
</html>
css：
/* 菜单样式 */
body{
font-family: microsoft yahei;
}
.base_holder{
webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
position: fixed;
width: 100%;
bottom: 0px;
}
.menu_holder{
width: 200px;
height: 200px;
border-radius: 100px;
position: absolute;
bottom:-100px;
margin-left:50%;
left: -100px;
color: #fff!important;
font-size: 30px;
}
.menu_block{
position: absolute;
top: 100px;
left: 100px;
width: 350px;
height: 350px;
border-radius: 0 0 350px 0;
transform-origin:0 0;
transition:0.8s ease;
}
.menu_block a{
color:#fff;
text-decoration:none;
}
/*------------------------------- 菜单基础样式设置 ---------------------------*/
/* 中间的条纹 */
.mid_strip{
position: absolute;
top: 0px;
left: 0px;
width: 230px;
height: 230px;
border-radius: 0 0 230px 0;
border-right: 1px solid rgba(95,110,113,0.3);
}
/* 一级菜单 */
.first_menu{
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 200px;
border-radius: 0 0 200px 0;
border-right: 1px solid rgba(95,110,113,0.3);
}
/* 二级菜单 */
.second_menu{
position: absolute;
top: 0px;
left: 0px;
width: 350px;
height: 350px;
border-radius: 0 0 350px 0;
transform-origin:0 0;
-ms-transform-origin:0 0;
border-top: 1px solid rgba(95,110,113,0.3);
border-right: 1px solid rgba(95,110,113,0.3);
font-size: 30px!important;
}
.second_menu .second_menu_text{
pointer-events: none;
}
/*------------------------------- 背景色设置 ---------------------------*/
/* 第一块菜单背景色 */
.block1{
background-image: linear-gradient(to bottom right, #3ae7f8 100px, #34aab6 250px);
}
.block1 .first_menu{
background-color: #007883;
background-image: linear-gradient(to bottom right, #23AEC7 , #017783 150px);
}
.block1 .mid_strip{
background-image: linear-gradient(to bottom right, #32A4AD 100px, #018b96 280px);
}
/* 第二块菜单背景色 */
.block2{
background-image: linear-gradient(to bottom right, #A7D0C0 120px, #50bb91 250px);
}
.block2 .first_menu{
background-color: #007883;
background-image: linear-gradient(to bottom right, #04ae68, #009055 150px);
}
.block2 .mid_strip{
background-image: linear-gradient(to bottom right, #19ca91 100px, #119f71 280px);
}
/* 第三块菜单背景色 */
.block3{
background-image: linear-gradient(to bottom right, #d49bdb 120px, #b683bc 250px);
}
.block3 .mid_strip{
background-image: linear-gradient(to bottom right, #cd8cd2 100px, #955f99 280px);
}
.block3 .first_menu{
background-color: #007883;
background-image: linear-gradient(to bottom right, #be62c1, #88428a 150px);
}
/* 第四块菜单背景色 */
.block4{
background-image: linear-gradient(to bottom right, #9fd0f0 120px, #68b4e5 250px);
}
.block4 .mid_strip{
background-image: linear-gradient(to bottom right, #6dc8f7 100px, #3696c8 280px);
}
.block4 .first_menu{
background-color: #007883;
background-image: linear-gradient(to bottom right, #3cb5eb, #0384bd 150px);
}
.menu_yyla, .menu_jzcx{
background-image: linear-gradient(to bottom right, #3ae7f8 100px, #34aab6 250px);
}
.menu_yyyj, .menu_yyyj_jzcx{
background-image: linear-gradient(to bottom right, #A7D0C0 120px, #50bb91 250px);
}
/*------------------------------- 旋转控制 ---------------------------*/
/* 展开的菜单区域旋转 */
.active_menu .block1{
-ms-transform:rotate(-180deg);
transform:rotate(-180deg);
}
.active_menu .block2{
-ms-transform:rotate(-120deg);
transform:rotate(-120deg);
}
.active_menu .block3{
-ms-transform:rotate(-60deg);
transform:rotate(-60deg);
}
/* 展开的二级菜单区域旋转 */
.menu1_2,.menu2_2, .menu3_2{
-ms-transform:rotate(20deg);
transform:rotate(20deg);
}
.menu1_3, .menu2_3,.menu3_3{
-ms-transform:rotate(40deg);
transform: rotate(40deg);
}
/*------------------------------- 菜单字体 ---------------------------*/
.menu_btn{
position: absolute;
margin-left:50%;
bottom: -93px;
left: -102px;
border-radius: 75px 75px 0 0;
overflow: hidden;
z-index: 12;
transition: transform 0.5s ease;
}
.menu_btn.up_menu{
transform:translate(0px,-93px);;
}
.sub_title{
font-size: 20px;
line-height: 15px;
}
.second_menu_text{
transform: rotate(100deg);
margin-top: 46px;
margin-left: 227px;
}
.second_menu_text p{
line-height: 32px;
}
.block1 .second_menu_text, .block3 .second_menu_text{
transform: rotate(98deg);
margin-top: 49px;
margin-left: 221px;
}
/* 失信人查询文字微调 */
.block1 .menu1_3 .second_menu_text, .block3 .menu3_3 .second_menu_text{
margin-top: 34px;
transform: rotate(102deg);
}
/* fyxx菜单样式 */
.menu_fyxx .first_menu_text{
transform: rotate(121deg);
margin-top: 50px;
margin-left: 1px;
width: 200px;
}
.menu_fyxx .title{
margin-bottom:8px;
transform: rotate(-2deg);
}
.menu_fyxx .sub_title1{
margin-left: 25px;
transform: rotate(-2deg);
}
.menu_fyxx .sub_title2{
margin-left:38px;
}
/* 诉讼服务菜单样式 */
.menu_ssfw .first_menu_text{
margin-top: 37px;
margin-left: 7px;
transform: rotate(114deg);
width:200px;
}
.menu_ssfw .title{
margin-bottom:9px;
transform: rotate(7deg);
margin-left: 24px;
}
.menu_ssfw .sub_title1{
margin-left:26px;
transform: rotate(8deg);
}
.menu_ssfw .text_info{
margin-left: 39px;
transform: rotate(10deg);
}
/* 公共信息菜单样式 */
.menu_ggxx .first_menu_text{
margin-top: 38px;
margin-left: 2px;
-webkit-transform: rotate(107deg);
transform: rotate(107deg);
width: 200px;
}
.menu_ggxx .title{
margin-bottom:8px;
transform: rotate(10deg);
margin-left: 31px;
}
.menu_ggxx .sub_title1{
margin-left:31px;
transform: rotate(9deg);
margin-bottom: 14px;
}
.menu_ggxx .text_info{
margin-left: 51px;
transform: rotate(12deg);
}
使用到了jquery.arctext.js，外部引进来。
这个菜单写的很好，相关文件上传到资源上面。后续可以看看研究使用。
