CSS、JS 圆形菜单

已于 2024-08-27 11:10:00 修改
阅读量356 收藏 3
点赞数 4
分类专栏： JavaScript CSS 文章标签： css javascript 前端
于 2024-08-27 11:07:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangliwen1101/article/details/141597735
版权

效果演示

图片

实现了一个圆形菜单的效果，点击菜单按钮后，菜单项会从菜单按钮中心点向外展开，并且菜单项上有文字链接。可以将这段代码的效果称为“圆形菜单展开效果”。

Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆形菜单</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./圆形菜单.css">
</head>

<body>
    <nav class="menu">
        <input type="checkbox" class="menu-toggler" id="menu_toggler" checked>
        <label for="menu_toggler"></label>
        <ul>
            <li class="menu-item">
                <a href="#"><i class="fa fa-qq" aria-hidden="true"></i></a>
            </li>
            <li class="menu-item">
                <a href="#"><i class="fa fa-weixin" aria-hidden="true"></i></a>
            </li>
            <li class="menu-item">
                <a href="#"><i class="fa fa-weibo" aria-hidden="true"></i></a>
            </li>
            <li class="menu-item">
                <a href="#"><i class="fa fa-tencent-weibo" aria-hidden="true"></i></a>
            </li>
            <li class="menu-item">
                <a href="#"><i class="fa fa-telegram" aria-hidden="true"></i></a>
            </li>
            <li class="menu-item">
                <a href="#"><i class="fa fa-renren" aria-hidden="true"></i></a>
            </li>
        </ul>
    </nav>
</body>

</html>

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: black;
    height: 100vh;
}

.menu-toggler {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 40px;
    height: 40px;
    z-index: 2;
    opacity: 0;
    cursor: pointer;
}

.menu-toggler:hover+label,
.menu-toggler:hover+label::before,
.menu-toggler:hover+label::after {
    background: #fff;
}

.menu-toggler:checked+label {
    background: transparent;
}

.menu-toggler:checked+label::before,
.menu-toggler:checked+label::after {
    top: 0;
    width: 40px;
    transform-origin: 50% 50%;
}

.menu-toggler:checked+label::before {
    transform: rotate(45deg);
}

.menu-toggler:checked+label::after {
    transform: rotate(-45deg);
}

.menu-toggler:checked~ul .menu-item {
    opacity: 1;
}

.menu-toggler:checked~ul .menu-item:nth-child(1) {
    transform: rotate(0deg) translateX(-110px);
}

.menu-toggler:checked~ul .menu-item:nth-child(2) {
    transform: rotate(60deg) translateX(-110px);
}

.menu-toggler:checked~ul .menu-item:nth-child(3) {
    transform: rotate(120deg) translateX(-110px);
}

.menu-toggler:checked~ul .menu-item:nth-child(4) {
    transform: rotate(180deg) translateX(-110px);
}

.menu-toggler:checked~ul .menu-item:nth-child(5) {
    transform: rotate(240deg) translateX(-110px);
}

.menu-toggler:checked~ul .menu-item:nth-child(6) {
    transform: rotate(300deg) translateX(-110px);
}

.menu-toggler:checked~ul .menu-item a {
    pointer-events: auto;
}

.menu-toggler+label {
    width: 40px;
    height: 5px;
    display: block;
    z-index: 1;
    border-radius: 2.5px;
    background: rgba(255, 255, 255, 0.7);
    transition: transform 0.5s, top 0.5s;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.menu-toggler+label::before,
.menu-toggler+label::after {
    width: 40px;
    height: 5px;
    display: block;
    z-index: 1;
    border-radius: 2.5px;
    background: rgba(255, 255, 255, 0.7);
    transition: transform 0.5s, top 0.5s;
    content: "";
    position: absolute;
    left: 0;
}

.menu-toggler+label::before {
    top: 10px;
}

.menu-toggler+label::after {
    top: -10px;
}

.menu-item:nth-child(1) a {
    transform: rotate(0deg);
}

.menu-item:nth-child(2) a {
    transform: rotate(-60deg);
}

.menu-item:nth-child(3) a {
    transform: rotate(-120deg);
}

.menu-item:nth-child(4) a {
    transform: rotate(-180deg);
}

.menu-item:nth-child(5) a {
    transform: rotate(-240deg);
}

.menu-item:nth-child(6) a {
    transform: rotate(-30deg);
}

.menu-item {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 80px;
    height: 80px;
    opacity: 0;
    transition: 0.5s;
}

.menu-item a {
    display: block;
    width: inherit;
    height: inherit;
    line-height: 80px;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    text-align: center;
    text-decoration: none;
    font-size: 40px;
    pointer-events: none;
    transition: 0.2s;
}

.menu-item a:hover {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
    color: #fff;
    background: rgba(255, 255, 255, 0.3);
    font-size: 45px;
}

实现思路拆分

*{
    margin: 0;
    padding: 0;
}

这段代码是将所有元素的外边距和内边距都设置为0，以便后面的布局更加精确。

body{
    background: linear-gradient(to right, #ed6ea0, #ec8c69);
    height: 100vh;
}

这段代码设置了页面的背景颜色为从左到右的渐变色，高度为100vh，即占据整个视口的高度。

.menu-toggler{
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 40px;
    height: 40px;
    z-index: 2;
    opacity: 0;
    cursor: pointer;
}

这段代码定义了菜单按钮的样式，将其定位在页面中心，设置宽高为40px，透明度为0，鼠标指针为手型。

.menu-toggler:hover + label,
.menu-toggler:hover + label::before,
.menu-toggler:hover + label::after{
    background: #fff;
}

这段代码设置了当鼠标悬停在菜单按钮上时，菜单按钮和其前后的两个伪元素的背景色变为白色。

.menu-toggler:checked + label{
    background: transparent;
}

这段代码设置了当菜单按钮被选中时，菜单按钮的背景色变为透明。

.menu-toggler:checked + label::before,
.menu-toggler:checked + label::after{
    top: 0;
    width: 40px;
    transform-origin: 50% 50%;
}
.menu-toggler:checked + label::before{
    transform: rotate(45deg);
}
.menu-toggler:checked + label::after{
    transform: rotate(-45deg);
}

这段代码设置了当菜单按钮被选中时，菜单按钮前后的两个伪元素会旋转45度，形成一个“X”形状。

.menu-toggler:checked ~ ul .menu-item{
    opacity: 1;
}
.menu-toggler:checked ~ ul .menu-item:nth-child(1){
    transform: rotate(0deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(2){
    transform: rotate(60deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(3){
    transform: rotate(120deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(4){
    transform: rotate(180deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(5){
    transform: rotate(240deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(6){
    transform: rotate(300deg) translateX(-110px);
}

这段代码设置了当菜单按钮被选中时，菜单项会从菜单按钮中心点向外展开，并且每个菜单项都有一个旋转角度和一个水平位移距离。

.menu-toggler:checked ~ ul .menu-item a{
    pointer-events: auto;
}

这段代码设置了当菜单按钮被选中时，菜单项上的链接可以被点击。

.menu-toggler + label{
    width: 40px;
    height: 5px;
    display: block;
    z-index: 1;
    border-radius: 2.5px;
    background: rgba(255,255,255,0.7);
    transition: transform 0.5s, top 0.5s;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.menu-toggler + label::before,
.menu-toggler + label::after{
    width: 40px;
    height: 5px;
    display: block;
    z-index: 1;
    border-radius: 2.5px;
    background: rgba(255,255,255,0.7);
    transition: transform 0.5s, top 0.5s;
    content: "";
    position: absolute;
    left: 0;
}
.menu-toggler + label::before{
    top: 10px;
}
.menu-toggler + label::after{
    top: -10px;
}

这段代码设置了菜单按钮前后的两个伪元素的样式，形成一个横线和两个斜线的形状。

.menu-item:nth-child(1) a{
    transform: rotate(0deg);
}
.menu-item:nth-child(2) a{
    transform: rotate(-60deg);
}
.menu-item:nth-child(3) a{
    transform: rotate(-120deg);
}
.menu-item:nth-child(4) a{
    transform: rotate(-180deg);
}
.menu-item:nth-child(5) a{
    transform: rotate(-240deg);
}
.menu-item:nth-child(6) a{
    transform: rotate(-30deg);
}

这段代码设置了每个菜单项上链接的旋转角度，使其在菜单展开时呈现一个圆形排列的效果。

.menu-item{
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 80px;
    height: 80px;
    opacity: 0;
    transition: 0.5s;
}
.menu-item a{
    display: block;
    width: inherit;
    height: inherit;
    line-height: 80px;
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    text-align: center;
    text-decoration: none;
    font-size: 40px;
    pointer-events: none;
    transition: 0.2s;
}
.menu-item a:hover{
    box-shadow: 0 0 0 2px rgba(255,255,255,0.3);
    color: #fff;
    background: rgba(255,255,255,0.3);
    font-size: 45px;
}

这段代码设置了菜单项的样式，包括宽高、透明度、过渡效果等，以及菜单项上链接的样式，包括颜色、背景色、边框半径等。同时，当鼠标悬停在链接上时，链接会有一个放大和阴影的效果。​​​​​​​

码农园区
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS+JS 动态展开式菜单
正在创作系列：【若冰说CSS】
06-07 1259
实现了一个可展开菜单按钮的效果，点击按钮会弹出一个菜单列表，菜单列表中包含多个选项。按钮的样式为一个圆形背景，中间有三条横线，表示可以展开。当按钮被点击后，三条横线会变成一个叉号，表示可以收起。菜单列表的样式为一个白色背景，四周有阴影，包含多个选项，每个选项都有一个图标和文字。当菜单展开时，选项会以渐变的方式出现。
纯CSS3圆形主菜单展开特效
06-24
这里的“纯CSS3”意味着不依赖JavaScript或其他编程语言，完全通过CSS来实现菜单的动态展示。 圆形主菜单是这个特效的核心。在CSS3中，我们可以利用`border-radius`属性轻松创建圆形元素。例如，一个具有相同宽度和...
css圆形导航菜单
Tanjc518的博客
09-29 741
【代码】css圆形导航菜单。
css圆形弹出菜单按钮效果
weixin_64740434的博客
01-29 493
【代码】css圆形弹出菜单按钮效果。
css a 圆形,使用css transforms来创建一个漂亮的圆形菜单
weixin_42307290的博客
08-03 655
在这个教程里我们将向大家展示如何使用css transforms来创建一个漂亮的圆形菜单。我们将一步步的带你创建样式表，然后解释一些使用到的数学计算公式和简单逻辑，以便使你有一个很清晰的思路。正如上面所说的，我们将使用到一些基本的数学计算公式和css transforms来创建样式。但是你不用担心，这些公式都非常简单，我将一步步的给大家解释。HTML结构:我们要创建的是一个菜单，让我们先从正常的菜...
css实现扇形展开的圆形菜单
weixin_43952318的博客
08-26 342
附源码与体验效果，点击查看详情
点击圆形按钮展开菜单css3js特效代码
ICode联盟
07-08 522
下载地址css3代码实现漂亮的按钮和菜单样式，带阴影效果，点击圆形按钮展开菜单css3特效代码dd:
css 圆形背景icon_纯CSS实现图标围成的圆环菜单
weixin_35723435的博客
12-30 1065
纯CSS圆环菜单-www.mb5u.com/*www.mb5u.com*/#circularMenu {padding:0; margin:0 auto; list-style:none; position:relative; width:300px; height:300px; background:#fff url(/jscss/demoimg/200906/background.gif) n...
html5圆形旋转菜单js,jquery 圆形旋转图片滚动切换效果
weixin_35717340的博客
06-16 501
这个效果比较特别，可爱，所以在外面网站没怎么看到过，有兴趣的朋友可以下载后自己使用。PS: 经过修改已经兼容大众浏览器。效果图:在线演示：http://demo.jb51.net/js/ImagesRotateScroll/index.htmlStep1. 创建HTML Step2. 创建CSS#rotatescroll {width: 300px;height: 30...
html圆圈布局,jQuery和CSS3创意圆形菜单布局设计
weixin_28771631的博客
06-03 633
这是一款非常有创意的jQuery和CSS3圆形菜单界面布局设计。这个界面布局中，通过点击主菜单按钮可以在它的四周出现主菜单按钮。点击每一个主菜单按钮都会以动画的方式切换到相应的界面，效果非常的炫酷。制作方法HTML结构菜单的HTML结构使用一个元素来作为包裹元素。汉堡包图标使用div.burger_menu来制作。子菜单按钮分别是在元素中嵌入一个font-aawesome图标来实现。每个主菜单调整...
CSS3圆形菜单导航.zip
09-25
《CSS3圆形菜单导航》是基于现代Web技术实现的一种创新导航设计，主要涉及CSS3、jQuery和jQuery插件。此导航菜单以圆形布局，既美观又实用，适用于各种网页设计项目，尤其对于需要独特视觉效果的网站来说，是增强...
纯CSS3圆形主菜单展开特效.zip
07-04
《纯CSS3圆形主菜单展开特效详解》 在网页设计中，导航菜单是不可或缺的元素，它引导用户轻松浏览网站内容。随着技术的发展，我们不再局限于传统的矩形或线性菜单，而是寻求更加创新和吸引人的设计。"纯CSS3圆形主...
jQuery css3酷炫圆形菜单动画展开收缩特效
10-24
在本文中，我们将深入探讨如何使用jQuery和CSS3来创建一个酷炫的圆形菜单，该菜单具有动态展开和收缩的动画效果。这个效果是通过结合jQuery的事件处理和CSS3的过渡与变换特性实现的，使得用户交互时的视觉体验更加...
js css3交互式圆形菜单代码.zip
07-11
js css3交互式圆形菜单代码是一款基于transition属性制作圆形的图标菜单，点击更多按钮展开收缩圆形菜单特效。
CSS 高级区块效果——WEB开发系列25
一条晒干的咸鱼的博客
08-31 1720
CSS提供了多种工具和属性，使我们能够创建视觉上引人注目的效果。今天我们继续将深入了解几种高级CSS效果：盒子阴影、滤镜、混合模式和文本背景裁剪，提升网页设计的质感和深度。
CSS前端学习（online tuorials）旋转动画
最新发布
m0_51581537的博客
09-04 471
应用 animateBox （keyframes ，这个动画定义了从 0deg 旋转到 180deg 的过程。子元素在前50%的时间里会旋转180度，并在接下来的50%时间里保持这个角度（因为 50% 和 100% 的状态是相同的）），持续2秒，使用 ease-in 函数进行无限循环。background: url(‘替换图片.jpg’) no-repeat center/cover;伪类用于当鼠标悬停在 .loader 上时，改变 .loader 和其子元素的样式。
css中的伪类
weixin_51480428的博客
08-30 446
伪类（Pseudo-classes）是 CSS 中的一个重要概念，它们用于定义元素的特定状态。伪类可以基于元素的特定属性或状态来选择和样式化文档树中的元素，而不需要使用类或 ID。伪类通常以冒号 : 开头。
从零开始：我的JaveWeb学习笔记之网页设计初探：探索 HTML 、CSS的奇妙世界（JavaWeb、HTML、CSS）
Hanbuhuic的博客
09-04 1321
HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。它定义了网页的结构和内容，但不包括样式和行为。HTML 由一系列的元素组成，这些元素可以被浏览器识别并渲染成可视化的网页。CSS（层叠样式表，Cascading Style Sheets）是一种用于描述HTML或XML文档的样式表语言。它能够控制网页的布局、颜色、字体以及其他视觉和版式特性。CSS 允许开发者将页面的内容（HTML）与页面的表现（CSS）分离，这样可以更灵活地进行设计和维护。
Vue实现CSS3圆形菜单栏组件及旋转效果
总结来说，这个基于Vue的圆形菜单栏组件利用CSS3的transform属性和动态计算的扇形角度，提供了一种优雅的方式来展示菜单。同时，结合手势库，增强了交互性和用户体验。通过组件化开发，使得父组件能够轻松地复用和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值