css js 简单的径向菜单学习笔记

1、首先:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>简单的径向菜单学习Project</title><link rel="stylesheet" href="indexCss.css"></head><body><div class="menu"><div class="toggle"></div><li style="--i:0;"><a href="#"></a></li><li style="--i:1;"><a href="#"></a></li><li style="--i:2;"><a href="#"></a></li><li style="--i:3;"><a href="#"></a></li><li style="--i:4;"><a href="#"></a></li><li style="--i:5;"><a href="#"></a></li><li style="--i:6;"><a href="#"></a></li><li style="--i:7;"><a href="#"></a></li></div></body>
</html>

的格式
2、ionicons
**ionicons官网**点击Usage找到Installation复制一段代码:

<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

之后代码就成:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>简单的径向菜单学习Project</title><link rel="stylesheet" href="indexCss.css"></head><body><div class="menu"><div class="toggle"></div><li style="--i:0;"><a href="#"></a></li><li style="--i:1;"><a href="#"></a></li><li style="--i:2;"><a href="#"></a></li><li style="--i:3;"><a href="#"></a></li><li style="--i:4;"><a href="#"></a></li><li style="--i:5;"><a href="#"></a></li><li style="--i:6;"><a href="#"></a></li><li style="--i:7;"><a href="#"></a></li></div></body><script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script><script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</html>

之后在html添加ionicons官网提供的代码就行了:

<div class="toggle"><ion-icon name="add-outline"></ion-icon>
</div>

搜索home、user、settings、mail、key、video、game、camera或者ph
为了省时间,就直接打出来了:

<body><div class="menu"><div class="toggle"><ion-icon name="add-outline"></ion-icon></div><li style="--i:0;"><a href="#"><ion-icon name="home-outline"></ion-icon></a></li><li style="--i:1;"><a href="#"><ion-icon name="person-outline"></ion-icon></a></li><li style="--i:2;"><a href="#"><ion-icon name="settings-outline"></ion-icon></a></li><li style="--i:3;"><a href="#"><ion-icon name="mail-outline"></ion-icon></a></li><li style="--i:4;"><a href="#"><ion-icon name="key-outline"></ion-icon></a></li><li style="--i:5;"><a href="#"><ion-icon name="videocam-outline"></ion-icon></a></li><li style="--i:6;"><a href="#"><ion-icon name="game-controller-outline"></ion-icon></a></li><li style="--i:7;"><a href="#"><ion-icon name="camera-outline"></ion-icon></a></li></div></body>

效果:

在创建一个indexCss.css文件存放我们的布局:

*{margin: 0;/*设置元素的4个外边距,默认值是0*/padding: 0;/*设置元素的4个内边距,默认值是0*/box-sizing: border-box;/*规定两个并排的带边框的框 *//*border-box: 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。*/
}

body{display: flex;/*flex布局*/justify-content: center;/*Flex容器*/align-items: center;/*Flex容器*/min-height: 100vh;/*设置段落的最小高度*/background: linear-gradient(45deg,#8460ed,#ff1252);/*linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片*/
}

效果:

menu元素:

.menu{position: relative;width: 200px;height: 200px;background: #0f0;display: flex;justify-content: center;align-items: center;
}

.menu li{position: absolute;list-style: none;
}

.toggle{position: absolute;/*绝对定位*/width: 60px;height: 60px;background: #fff;display: flex;justify-content: center;align-items: center;z-index: 1000;/*数字越大越在上面*/border-radius: 50%;/*50%:圆形*/cursor: pointer;/*鼠标变手指*/box-shadow: 0 0 4px rgba(0,0,0,0.15);/*阴影*/font-size: 2em;/*组件大小*/transition: 1.25s;/*动画效果时长为1.25s。只有添加transform才能看出来*/
}

用toggle写一个改变状态的js

<script>let toggle = document.querySelector('.toggle');//获取元素let menu = document.querySelector('.menu');//获取元素toggle.onclick = function(){//onclick是按键的意思，这里是指按下的是toggle元素就执行方法menu.classList.toggle('active');//使menu反转,并class为'menu active'};</script>

这时我们添加menu active状态的css:

.menu.active .toggle{transform: rotate(315deg);/*rotate():让容器旋转*/
}

.menu:

.menu.active:

修改.menu li的css代码和添加一个.menu.active li的css:

.menu li{position: absolute;left: 0;list-style: none;transform-origin: 100px;transition: 0.5s;/*过度的动画效果*/transition-delay: calc(0.1s * var(--i));/*每个图进行延时*/
}
.menu.active li{transform: rotate(calc(360deg / 8 * var(--i)));/*主要*/
}

效果为:

.menu状态的:

.menu.active状态的:

修改 .menu 把绿色背景去掉:

.menu{position: relative;/*浮动定位*/width: 200px;height: 200px;display: flex;justify-content: center;align-items: center;
}

主要:在.menu li元素里面添加:

transform: rotate(0deg) translateX(100px);/*隐藏在'+'图标后面点击并向左移动100像素*/

效果为:

和

添加.menu li a的时候发现:

.menu li a{display: flex;justify-content: center;align-items: center;width: 40px;height: 40px;background: #fff;
}

所以修改.menu li里面的:

transform: rotate(0deg) translateX(80px);/*隐藏在'+'图标后面点击并向左移动100像素*/
}

再次修改.menu li a:

.menu li a{display: flex;justify-content: center;align-items: center;width: 40px;height: 40px;background: #fff;border-radius: 50%;/*弧度*/transform: rotate(calc(360deg / -8 * var(--i)));/*图片位置*/box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);/*阴影*/color: #111;/*颜色*/transition: 0.5s;
}

效果为:

和

添加鼠标移动到突变时发生颜色变化:

.menu li a:hover{color:#ff1252;
}

完成

最后我放上了所有源码在下面:
html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>简单的径向菜单学习Project</title><link rel="stylesheet" href="indexCss.css"></head><body><div class="menu"><div class="toggle"><ion-icon name="add-outline"></ion-icon></div><li style="--i:0;"><a href="#"><ion-icon name="home-outline"></ion-icon></a></li><li style="--i:1;"><a href="#"><ion-icon name="person-outline"></ion-icon></a></li><li style="--i:2;"><a href="#"><ion-icon name="settings-outline"></ion-icon></a></li><li style="--i:3;"><a href="#"><ion-icon name="mail-outline"></ion-icon></a></li><li style="--i:4;"><a href="#"><ion-icon name="key-outline"></ion-icon></a></li><li style="--i:5;"><a href="#"><ion-icon name="videocam-outline"></ion-icon></a></li><li style="--i:6;"><a href="#"><ion-icon name="game-controller-outline"></ion-icon></a></li><li style="--i:7;"><a href="#"><ion-icon name="camera-outline"></ion-icon></a></li></div></body><script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script><script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script><script>let toggle = document.querySelector('.toggle');//获取元素let menu = document.querySelector('.menu');//获取元素toggle.onclick = function(){//onclick是按键的意思，这里是指按下的是toggle元素就执行方法menu.classList.toggle('active');//使menu反转,并class为'menu active'};</script>
</html>

css

*{margin: 0;/*设置元素的4个外边距,默认值是0*/padding: 0;/*设置元素的4个内边距,默认值是0*/box-sizing: border-box;/*规定两个并排的带边框的框 *//*border-box: 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。*/
}body{display: flex;/*flex布局*/justify-content: center;/*Flex容器*/align-items: center;/*Flex容器*/min-height: 100vh;/*设置段落的最小高度*/background: linear-gradient(45deg,#8460ed,#ff1252);/*linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片*/
}.menu{position: relative;/*浮动定位*/width: 200px;height: 200px;display: flex;justify-content: center;align-items: center;
}
.menu li{position: absolute;left: 0;list-style: none;transform-origin: 100px;transition: 0.5s;/*过度的动画效果*/transition-delay: calc(0.1s * var(--i));/*每个图进行延时*/transform: rotate(0deg) translateX(80px);/*隐藏在'+'图标后面点击并向左移动100像素*/
}
.menu.active li{transform: rotate(calc(360deg / 8 * var(--i)));
}
.menu li a{display: flex;justify-content: center;align-items: center;width: 40px;height: 40px;background: #fff;border-radius: 50%;transform: rotate(calc(360deg / -8 * var(--i)));box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);color: #111;transition: 0.5s;
}
.menu li a:hover{color:#ff1252;
}.toggle{position: absolute;/*绝对定位*/width: 60px;height: 60px;background: #fff;display: flex;justify-content: center;align-items: center;z-index: 1000;/*数字越大越在上面*/border-radius: 50%;/*50%:圆形*/cursor: pointer;/*鼠标变手指*/box-shadow: 0 0 4px rgba(0,0,0,0.15);/*阴影*/font-size: 2em;/*组件大小*/transition: 1.25s;/*动画效果时长为1.25s。只有添加transform才能看出来*/
}.menu.active .toggle{transform: rotate(315deg);/*rotate():让容器旋转*/
}

css js 简单的径向菜单学习笔记相关推荐

CSS+JS灰色树型菜单导航代码
代码简介: CSS+JS打造的树型菜单,没有怎么美化,颜色看上去也不很美,提供一种思路,真想用的朋友好好修改一下颜色,里面都有注释,相信通过你的努力,它最终的效果一定很漂亮. 代码内容: <!D ...
table固定列html5,css+js简单实现table固定首行首列
说明: 使用easyui等都可以实现table固定首行首列的功能. 但仅仅只需要这一个功能,完全可以用css+js简单实现而不用引入更多工具. 网上找到很多的思路,自己对其中比较简单的一个进行了整理. ...
第一次预习作业（html,css,js简单介绍，HTML常用标签）
目录一.HTML,CSS,JS,简单介绍 1.HTML 2.CSS 3.JS 二.HTML常用标签一.HTML,CSS,JS,简单介绍 1.HTML HTML 是用来描述网页的一种语言. HTML ...
下拉的DIV+CSS+JS二级树型菜单，刷新无影响
二级菜单,不论展开几个栏目,刷新不影响! Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
DIV+CSS+JS二级树型菜单，刷新无影响
二级菜单,不论展开几个栏目,刷新不影响! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...
css+js简单实现table固定首行首列
说明: 使用easyui等都可以实现table固定首行首列的功能. 但仅仅只需要这一个功能,完全可以用css+js简单实现而不用引入更多工具. 网上找到很多的思路,自己对其中比较简单的一个进行了整理. ...
css view a if属性,uni-app学习笔记（2）view属性控制css样式
uni-app学习笔记(2)view属性控制css样式 uniapp通过标签属性来改变样式当鼠标按下去的时候,他会变成这个样式 hover-class="box-active" ...
HTML+CSS实现简单下拉菜单
HTML+CSS实现下拉菜单使用Html+css实现简单的下拉菜单代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...
animate.css –齐全的CSS3动画库--- 学习笔记
animate.css – 齐全的CSS3动画库学习网站: https://daneden.github.io/animate.css/ http://www.dowebok.com/98.html ...

css js 简单的径向菜单学习笔记

css js 简单的径向菜单学习笔记相关推荐

最新文章

热门文章