频道栏目
首页 > 资讯 > HTML/CSS > 正文

html开发指南_半圆形菜单开发教程

17-09-25        来源:[db:作者]  
收藏   我要投稿

工作中碰到一个写的很好的圆形菜单,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,外部引进来。

这个菜单写的很好,相关文件上传到资源上面。后续可以看看研究使用。

相关TAG标签
上一篇:html开发指南_SSM框架整合教程
下一篇:springmvc的进阶
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站