效果截图:

HTML代码:

<div class="menu-wrap">
<nav>
<a href="" class="nav-item">1</a>
<a href="" class="nav-item">2</a>
<a href="" class="nav-item">3</a>
<a href="" class="nav-item">4</a>
<a href="" class="nav-item">5</a>
<a href="" class="nav-item">6</a>
<a href="" class="nav-item">7</a>
<a href="" class="nav-item">8</a>
</nav>
<a href="##" class="btn">展开</a>
</div>

CSS代码:

*{ padding:; margin:; }
body{ background-color: #333; }
a{ text-decoration:none; }
/*外部容器样式*/
.menu-wrap{
width: 200px; height: 200px; border-radius: 100%; margin:60px auto; position: relative;
}
/*导航样式*/
.menu-wrap nav{
width: 100%; height: 100%; position: absolute; opacity:; z-index:; transform: scale(0);
transition: all 1s ease;
}
/*菜单展开时样式*/
.menu-wrap .active{
opacity:; transform: scale(1);
}
/*菜单内容项样式*/
.menu-wrap nav .nav-item{
border-radius: 100%; position: absolute; display: block; width: 30px; height: 30px;
text-align: center; line-height: 30px; background-color: yellow; color: #333;
}
/*中间展开/收缩按钮样式*/
.menu-wrap .btn{
background-color: #15c2cf; border-radius: 100%; display: block; color: #fff; width: 60px;
height: 60px; line-height: 60px; text-align: center; position: absolute; left: 50%; top: 50%;
margin-left:-30px; margin-top: -30px; z-index:; border:solid 1px #000;
}

JS代码:

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function(){
$(".btn").click(function(){
// 判断展开/收缩状态
if(!$("nav").hasClass("active")){ $(".btn").text("收缩");
$("nav").addClass("active"); var r=$(".menu-wrap").width()/2; //定义圆的半径
var startAngel=0,
endAngel=360;//设置起始、结束度数
var total=$(".nav-item").length,//获取子内容项个数
gap=(endAngel-startAngel)/total;//设置夹角 $(".nav-item").each(function(index){
var curAngel=startAngel+gap*index*(Math.PI/180);//js中需要把角度转换为弧度
$(this).css({
left:Math.cos(curAngel)*r+r-$(this).width()/2,
top:Math.sin(curAngel)*r+r-$(this).width()/2
})
})
}else{
$("nav").removeClass("active");
$(".btn").text("展开");
}
})
})
</script>

子元素位置计算方法:

CSS3学习笔记之径向展开菜单的更多相关文章

  1. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  2. CSS3学习笔记之linear-gradient

    我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...

  3. CSS3学习笔记(4)—上下滑动展开的按钮

    最近写了一个动画,下面来看看我以前写的一个上下滑动展开的按钮效果: 这类的效果经常会在一些网站页面下载按钮处看到,当你鼠标悬浮在下载按钮时,会提醒你是否已注册,或者点击登录什么的小提示~~~~~ 一. ...

  4. CSS3学习笔记1-选择器和新增属性

    前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...

  5. html5和css3学习笔记

    HTML5针对移动端,移动端的浏览器主要是chrome,是webkit内核; app(applicatin):应用; native app:原生的app sadsadsadad 单标签可以省略结尾标记 ...

  6. 我的CSS3学习笔记

    1.元字符使用: []: 全部可选项 ||:并列 |:多选一 ?: 0个或者一个 *:0个或者多个 {}: 范围 2.CSS3属性选择器: E[attr]:存在attr属性即可: E[attr=val ...

  7. 十天精通CSS3学习笔记 part4

    CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后 ...

  8. 十天精通CSS3学习笔记 part1

    http://www.imooc.com/learn/33 第1章 初识CSS3 什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主 ...

  9. HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...

随机推荐

  1. java 第三章 流程控制语句

    1.条件语句 (1)if 语句 ( 单一条件) if (表达式){ 执行语句块 } (2)执行流程 · if 语句 条件表达式可以是任何一种逻辑表达式   如果表达式值为true,则执行花括号的内容后 ...

  2. 第6模块 web框架口述题

    状态码如200 OK,以3位数字和原因 成.数字中的 一位指定了响应 别,后两位无分 .响应 别有以下5种. 重定向:客户端像服务器端发送请求,服务器告诉客户端你去重定向(状态码302,响应头loca ...

  3. LeetCode:18. 4Sum(Medium)

    1. 原题链接 https://leetcode.com/problems/4sum/description/ 2. 题目要求 给出整数数组S[n],在数组S中是否存在a,b,c,d四个整数,使得四个 ...

  4. Linux的系统安全设置Shell脚本

    #!/bin/sh # desc: setup linux system security # powered by www.lvtao.net #account setup passwd -l xf ...

  5. 现代web开发需要学习的15大技术

    现代Web开发需要学习的15大技术 2016-06-08 13:08 快进到现在,我发现现代web开发再一次将发生压倒性的改变.信息资讯的铺天盖地令人迷惑,尤其对于初学者而言.首要原因是新的框架,例如 ...

  6. 网页设计简史看设计&代码“隔膜”

    本文来自网易云社区 作者:马宝 设计与代码之间隔膜所在?既然你诚心诚意地问了,我就大发慈悲地告诉你.为了防止地球被破坏,为了维护世界的和平,为了贯彻爱与真实的邪恶~,我是穿梭在前端与设计之间爱与美丽的 ...

  7. 源码-集合:ArrayList

    只是文章摘录,还未研究 JAVA ArrayList详细介绍(示例) http://www.jb51.net/article/42764.htm Jdk1.6 JUC源码解析汇总 - 永远保持敬畏之心 ...

  8. shell及Python爬虫实例展示

    1.shell爬虫实例: [root@db01 ~]# vim pa.sh #!/bin/bash www_link=http://www.cnblogs.com/clsn/default.html? ...

  9. sed-awk命令详解

      第2章 ***********sed***********. 1目  录 2.1 -------sed命令小结及小结图---- 1 2.2 -------第几行---------- 2 2.3 - ...

  10. HDU 4431 Mahjong(枚举+模拟)(2012 Asia Tianjin Regional Contest)

    Problem Description Japanese Mahjong is a four-player game. The game needs four people to sit around ...