扇形多级菜单

最新推荐文章于 2024-05-23 13:03:42 发布
最新推荐文章于 2024-05-23 13:03:42 发布
阅读量321 收藏 2
点赞数 1
分类专栏： HTML 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48673715/article/details/109909210
版权

扇形多级菜单（纯css）

效果图：
在这里插入图片描述
HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css"  href="css/扇形多级菜单.css"/>
<body>
	<div class="menuHodler">
		<div class="menuWindow">
			<ul class="p1">
				<li class="s1"><a href="#url">主菜单</a>
					<ul class="p2">							
						<li class="s2">
				  	        <a href="#url"><span>一级菜单1</span></a>
					        <ul class="p3 a6">
								<li><a href="#">二级菜单1</a></li>
								<li><a href="#">二级菜单2</a></li>
								<li><a href="#">二级菜单3</a></li>
								<li><a href="#">二级菜单4</a></li>
								<li><a href="#">二级菜单5</a></li>
								<li><a href="#">二级菜单6</a></li>
					        </ul>
				       </li>					        
				        <li class="s2">
				  	        <a href="#url"><span>一级菜单2</span></a>
					        <ul class="p3 a5">
								<li><a href="#">二级菜单1</a></li>
								<li><a href="#">二级菜单2</a></li>
								<li><a href="#">二级菜单3</a></li>
								<li><a href="#">二级菜单4</a></li>
								<li><a href="#">二级菜单5</a></li>
					        </ul>
				        </li>					        
				        <li class="s2">
				  	        <a href="#url"><span>一级菜单3</span></a>
					        <ul class="p3 a3">
								<li><a href="#">二级菜单1</a></li>
								<li><a href="#" οnclick="alert("这是二级菜单")">二级菜单2</a></li>
								<li><a href="#">二级菜单3</a></li>
					        </ul>
				        </li>				        
				        <li class="s2">
				  	        <a href="#url"><span>一级菜单4</span></a>
					        <ul class="p3 a3">
								<li><a href="#">二级菜单1</a></li>
								<li><a href="#">二级菜单2</a></li>
								<li><a href="#">二级菜单3</a></li>
					        </ul>
				        </li>					        
                         <li class="s2">
				  	        <a href="#url"><span>一级菜单5</span></a>
					        <ul class="p3 a3">
								<li><a href="#">二级菜单1</a></li>
								<li><a href="#">二级菜单2</a></li>
								<li><a href="#">二级菜单3</a></li>
					        </ul>
				        </li>					        
				         <li class="s2">
				  	        <a href="#url"><span>一级菜单6</span></a>
					        <ul class="p3 a3">
								<li><a href="#">二级菜单1</a></li>
								<li><a href="#">二级菜单2</a></li>
								<li><a href="#">二级菜单3</a></li>
					        </ul>
				        </li>
			        </ul>
				</li>
			</ul>				
		</div>
	</div>
</body>
</html>

css代码：

*{
	margin: 0;
	padding: 0;
}
body{
	background: #B1B1B1;
	margin: 0;
	padding: 0;
	font-size: 14px;
	color: black;
}
.menuHodler{
	width: 100px;
	height: 100px;
	position: relative;
	z-index: 100;
}
.menuHodler ul{
	padding: 0;
	margin: 0;
	list-style: none;
	width: 0;
	height: 0;
	position: absolute;
	top: 0;
	left: 0;
}
.menuHodler ul li a{
	color: #000;
	text-decoration: none;
	text-align: center;
	font:bold 13px/30px arial,sans-serif;
	box-shadow: -5px 7px 10px rgba(0,0,0,0.5);
	transform-origin:0 0;
}
.menuHodler ul.p2{
	z-index: -1;
}
.menuHodler ul.p3{
	z-index: -1;
}
.menuHodler li.s1>a{
	position: absolute;
	width: 100px;
	height: 100px;
	display: block;
	background: lightseagreen;
	border-radius: 0 0 100px 0;
}
.menuHodler li.s2>a{
	position: absolute;
	width: 100px;
	height: 200px;
	display: block;
	padding-left: 100px;
	background: lightgray;
	border-radius: 0 0 200px 0;
	overflow: hidden;
}
.menuHodler ul.p3 li a{
	position: absolute;
	display: block;
	width: 100px;
	padding-left: 200px;
	height: 300px;
	background: #999;
	border-radius: 0 0 300px 0;
	overflow: hidden;
}
.menuHodler ul ul{
	transform-origin: 0 0 ;
    transform: rotate(90deg);
    transition: 1s;
}
.menuHodler  li .s2:nth-of-type(6)>a{
	background: #888;
	transform: rotate(75deg);
}
.menuHodler  li .s2:nth-of-type(5)>a{
	background: #999;
	transform: rotate(60deg);
}
.menuHodler  li .s2:nth-of-type(4)>a{
	background: #AAA;
	transform: rotate(45deg);
}
.menuHodler  li .s2:nth-of-type(3)>a{
	background: #BBB;
	transform: rotate(30deg);
}
.menuHodler  li .s2:nth-of-type(2)>a{
	background: #CCC;
	transform: rotate(15deg);
}
.menuHodler  .a6 li:nth-of-type(6)>a{
	background: #444;
	transform: rotate(75deg);
}
.menuHodler  .a6 li:nth-of-type(5)>a{
	background: #555;
	transform: rotate(60deg);
}
.menuHodler  .a6 li:nth-of-type(4)>a{
	background: #666;
	transform: rotate(45deg);
}
.menuHodler  .a6 li:nth-of-type(3)>a{
	background: #777;
	transform: rotate(30deg);
}
.menuHodler  .a6 li:nth-of-type(2)>a{
	background: #888;
	transform: rotate(15deg);
}
.menuHodler  .a5 li:nth-of-type(5)>a{
	background: #555;
	transform: rotate(72deg);
}
.menuHodler  .a5 li:nth-of-type(4)>a{
	background: #666;
	transform: rotate(54deg);
}
.menuHodler  .a5 li:nth-of-type(3)>a{
	background: #777;
	transform: rotate(36deg);
}
.menuHodler  .a5 li:nth-of-type(2)>a{
	background: #888;
	transform: rotate(18deg);
}
.menuHodler  .a3 li:nth-of-type(3)>a{
	background: #777;
	transform: rotate(60deg);
}
.menuHodler  .a3 li:nth-of-type(2)>a{
	background: #888;
	transform: rotate(30deg);
}
.menuHodler li.s1:hover ul.p2{
	transform: rotate(0deg);
}
.menuHodler li.s2:hover ul.p3{
	transform: rotate(0deg);
}
.menuHodler ul li:hover>a{
	background: blue;
	color: #FFF;
}
.menuHodler li.s2:hover>a{
	background: blue;
	color: #FFF;
}
.menuHodler .a6 li:hover>a{
	background: blue;
	color: #FFF;
}
.menuHodler .a5 li:hover>a{
	background: blue;
	color: #FFF;
}
.menuHodler .a3 li:hover>a{
	background: blue;
	color: #FFF;
}
.menuWindow{
	width: 110px;
	height: 110px;
	z-index: 100;
	overflow: hidden;
	position: absolute;
	left: 0;
	top: 0;
	transition:0s  1s;
}
.menuHodler:hover .menuWindow{
	width: 310px;
	height: 310px;
	transition: 0s 0s;
}
木上曰末
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯CSS3打造动感漂亮的扇形菜单
01-26
纯CSS3打造动感漂亮的扇形菜单网页代码站
下拉菜单示例
热门推荐
Walker7143的博客
04-22 1万+
html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu...
CSS3打造的超酷的多级扇形菜单
weixin_30551947的博客
04-02 205
<!DOCTYPE HTML> <html lang=zh-cn> <head> <meta charset=utf-8> <title>CSS3打造的超酷的多级扇形菜单丨梨花粉丨石家庄学前教育</title> <style> *{margin:0px...
扇形导航菜单
weixin_30723433的博客
08-02 560
1.装bi界的一股清流，基本没什么用，反而把页面搞复杂了。 2.这些用法值得学习和借鉴。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS3扇形动画菜单</ti...
html中怎么做扇形菜单,纯CSS3实现扇形动画菜单(简化版)实例源码
weixin_30291121的博客
06-11 556
之前的一篇文章介绍这种效果的实现，但实现代码太过繁琐，所以在这里分享以下简化版的实现方法，有需要的可以参考学习。原文章请点击这里简化版完整实例CSS3扇形动画菜单*{padding: 0; margin: 0;}body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}.menuHolder {width:1...
CSS3扇形动画菜单 鼠标滑过扇形展开动画
08-23
我们之前已经分享过很多CSS3菜单了，很多都比较实用，有部分CSS3菜单外观比较炫酷。今天要分享的这款CSS3菜单外观是扇形的，并且在鼠标滑过菜单时，扇形菜单项将会以动画的方式展开，并且支持多级下拉菜单。
js左上角扇形旋转菜单特效
04-25
这种特效使得菜单在默认状态下隐藏在网页左上角，只有当用户鼠标悬停时，菜单才会以扇形展开，展示出多级子菜单，为用户提供了清晰而直观的导航体验。 首先，我们要理解JavaScript（JS）是前端开发中必不可少的一...
js左上角扇形旋转菜单特效特效代码
03-20
此外，如果菜单包含多级子菜单，可以使用递归或循环遍历结构来逐级展开或收起子菜单项。 压缩包内的文件"使用帮助.txt"可能提供了关于如何集成和自定义这个特效的详细指南，"说明.htm"可能包含了更深入的技术介绍和...
WEB 扇形菜单
01-22
这样的设计不仅美观，还能有效地节省空间，尤其适合在有限的屏幕区域展示多级导航菜单。 2. HTML结构： 构建扇形菜单的基础是HTML元素。通常，我们需要一个容器元素来包裹所有的菜单项，每个菜单项可以是一个链接...
FloatingActionButton实现 展开/折叠 的多级悬浮菜单
11-30
在标题“FloatingActionButton实现 展开/折叠 的多级悬浮菜单”中，我们探讨的是如何利用`FAB`来创建一个可展开和折叠的多级菜单，这在许多应用程序中都有应用，如设置菜单、导航菜单等。以下将详细讲解这个实现过程...
一个很爽的下拉菜单示例
10-15
一个很爽html下拉菜单的例子，还是多级菜单。从那个什么网站下载下来的，在这里提供免费下载。 另外提供一个下拉菜单例子集合网页：http://paranimage.com/css-and-more-than-30-drop-down-menu-resources-js/
下拉列表的例子
02-16
一个简单的下拉列表的例子，适合初学者学习，简便通用。
纯CSS3打造动感漂亮时尚的扇形菜单
12-10
复制代码代码如下: <!DOCTYPE HTML> <html lang=zh-cn> <head> <title>纯CSS3打造动感漂亮的扇形菜单</title> <style> *{margin:0px;padding:0px;} body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;} .tips{width:702px;margin:0 auto;line-height:24px;padding-top:10px;} .bredcolor{color:#fff;} .menuHolder {wi
扇形菜单实现
07-09
扇形动画菜单，半圆形动画菜单实现，不过比较麻烦，建议使用属性动画实现
css3扇形菜单鼠标悬停css3旋转动画扇形打开菜单代码
11-21
css3扇形菜单鼠标悬停css3旋转动画扇形打开菜单代码 css3扇形菜单鼠标悬停css3旋转动画扇形打开菜单代码 css3扇形菜单鼠标悬停css3旋转动画扇形打开菜单代码
CSS 扇形菜单实现
z_z_Dragon的博客
07-13 2536
注：使用了SASS编译器，把scss编译成css1.HTML如下：&lt;div class="menuHolder"&gt;&lt;div class="menuWindow"&gt;    &lt;ul class="p1"&gt;        &lt;li class="s1"&gt;&lt;a href="#url"&g
css3扇形菜单
榴莲不好吃的专栏
09-08 2763
尊重劳动成果，转载请注明出处（http://blog.csdn.net/sllailcp/article/details/48288959）... 闲暇之余做的一个css3扇形菜单 完整代码如下： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <tit...
css扇形菜单动画效果
最新发布
前端程序媛_Ying博客
05-23 525
扇形菜单动画效果CSS
扇形多级菜单可配置Demo
weixin_30567471的博客
04-22 120
预览效果 领导是想把这个做成复选框，所以做成了可以多选的... Demo下载：https://github.com/zhangzn3/arc-menu 转载于:https://www.cnblogs.com/leyi/p/6747620.html
纯CSS3实现动态时尚扇形菜单教程
"纯CSS3实现的扇形菜单制作教程" 在网页设计中，动态且具有视觉吸引力的菜单能够提升用户体验，使网站更加引人入胜。本教程将详细介绍如何利用CSS3技术来创建一款动感、漂亮的扇形菜单。纯CSS3的方法允许我们在不...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值