HTML+CSS 圆形菜单

效果演示

05-圆形菜单.gif

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

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 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/658637.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

实战15:bert 命名实体识别、地址解析、人名电话地址抽取系统-完整代码数据

直接看项目视频演示: bert 命名实体识别、关系抽取、人物抽取、地址解析、人名电话地址提取系统-完整代码数据_哔哩哔哩_bilibili 项目演示: 代码: import re from transformers import BertTokenizer, BertForTokenClassification, pipeline import os import torch im…

(IDEA修改Java版本)java: 警告: 源发行版 X 需要目标发行版 X

搜索关键词&#xff1a;一致、发行 错误信息 其他错误&#xff1a; java: 错误: 不支持发行版本 6 java: -source 1.5 中不支持 lambda 表达式 (请使用 -source 8 或更高版本以启用 lambda 表达式) 思路 有两个地方要检查&#xff0c;JDK版本保持一致即可。 比如统一用JDK8或…

[排序算法]4. 图解堆排序及其代码实现

先来看看什么是堆? 堆是一种图的树形结构&#xff0c;被用于实现“优先队列”&#xff08;priority queues&#xff09; 注:优先队列是一种数据结构&#xff0c;可以自由添加数据&#xff0c;但取出数据时要从最小值开始按顺序取出。 在堆的树形结构中&#xff0c…

linux安装mysql后,配置mysql,并连接navicat软件

Xshell连接登陆服务器 输入全局命令 mysql -u root -p 回车后&#xff0c;输入密码&#xff0c;不显示输入的密码 注意mysql服务状态&#xff0c;是否运行等 修改配置文件my.cnf&#xff0c;这里没找到就找my.ini&#xff0c;指定有一个是对的 find / -name my.cnf 接下…

书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)

书籍学习平台 目录 基于SprinBootvue的书籍学习平台 一、前言 二、系统设计 三、系统功能设计 1平台功能模块 2后台功能模块 5.2.1管理员功能模块 5.2.2用户功能模块 5.2.3作者功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 …

mysql数据导入navicat中,报错提示1067

MySQL导入问题&#xff1a; 报错1067 - Invalid default value for 字段名 由于数据库版本升级&#xff0c;老数据库的数据文件导出以后&#xff0c;在新版本的数据库上执行会报错 这种问题多是由于默认值不兼容引起的&#xff0c;我们可以通过修改sql_mode来解决这个问题 由…

Steamdeck使用Windows系统游玩雪地奔驰时闪退问题解决方法

我非常喜欢雪地奔驰这款游戏&#xff0c;买sd的一部分也是为了它。可在我打开这个游戏时&#xff0c;游戏发生闪退问题。查阅了网络各个途径&#xff0c;基本没有解决方法。因此我自己分析终于解决该问题。以下是我解决问题的思路&#xff0c;仅供记录参考&#xff1a; 游戏在崩…

关于TeamSpeak3-网易音乐机器人的基础使用方法(胎教级教程)

本文转自博主的个人博客&#xff1a;https://blog.zhumengmeng.work,欢迎大家前往查看。 原文链接&#xff1a;点我访问 序言&#xff1a;在自己的ts服务器上安装了网易音乐机器人&#xff0c;写这篇文章旨在教群友/网友如何使用机器人!&#x1f60b;&#x1f44d; 一、TS3Audi…

FM1800隧道广播插播控制器

隧道广播插播控制器是一款群载波&应急广播插播控制器采用SDR软件无线电技术&#xff0c;产生独立的插播信号与“群载波”信号&#xff0c;本设备可通过软件无线电技术将音频信号调制成调频载波或“群载波”信号&#xff0c;分别送入插播主机&#xff0c;实现隧道广播远端机…

服务器上创建搭建gitlab

一、下载与安装 在主目录操作~ 1.使用wget下载 wget --no-check-certificate https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/el7/gitlab-ce-14.0.1-ce.0.el7.x86_64.rpm 可以在开源软件镜像站选择合适的版本&#xff0c;版本不同页面菜单会稍有差异&#xff0c;此次选…

[自动驾驶技术]-5 Tesla自动驾驶方案之算法(AI Day 2021)

有朋友问我&#xff0c;如何有效学习一个新技术。笔者这么多年的经验是&#xff1a;1&#xff09;了解国内外产业应用和标准法规现状&#xff0c;先建立宏观知识图谱及技术系统框架&#xff1b;2&#xff09;根据系统框架逐块进行深入研究&#xff08;横向、纵向&#xff09;&a…

聚观早报 | 小米14 Civi官宣;小度推出学习机Z30

聚观早报每日整理最值得关注的行业重点事件&#xff0c;帮助大家及时了解最新行业动态&#xff0c;每日读报&#xff0c;就读聚观365资讯简报。 整理丨Cutie 5月29日消息 小米14 Civi官宣 小度推出学习机Z30 vivo S19电池细节 360软件管家全面升级 荣耀200 Pro影像细节 …

c++11特性(详细)

文章目录 前言一、C11介绍二、列表初始化1.{}初始化2.initializer_list 三、auto与decltype四、STL中变化五、右值引用六.C中关于类的新功能七.可变参数模板八.lambda表达式总结 前言 在本篇文章&#xff0c;我们将会详细介绍一下C11新增的一些特性&#xff0c;其中最重要的是…

强国机械制造有限公司开展中国制造2050系列高端论坛

为深入探讨中国制造2050战略的实施路径和未来发展方向,强国机械制造有限公司2023年10月13日举办了一系列高端论坛。这些论坛吸引了众多业内专家、学者和企业代表参加,共同交流前沿观点和经验,以推动中国制造业的创新与发展。 本次系列高端论坛涵盖了多个关键主题,以下是各论坛…

数据结构---单向链表

思路分析&#xff1a; 1. 设计 struct LinkNode 节点结构体 strut LList 链表结构体 typedef void *LinkList 给用户使用链表指针 2. 初始化链表 LinkList mylist init_LinkList(); 3. 插入链表 void inser…

【最优化方法】实验三 无约束最优化方法的MATLAB实现

实验的目的和要求&#xff1a;通过本次实验使学生进一步熟悉掌握使用MATLAB软件&#xff0c;并能利用该软件进行无约束最优化方法的计算。 实验内容&#xff1a; &#xff11;、最速下降法的MATLAB实现 &#xff12;、牛顿法的MATLAB实现 &#xff13;、共轭梯度法的MATLAB…

PostgreSQL 小课推广-20240529

目前 PostgreSQL 小课在持续更新中&#xff0c; PostgreSQL 小课专栏 新人优惠券到 2024 年 6 月 1 日到期&#xff0c;有需要的伙伴还请关注下&#xff1a; 目前专栏的 50 元/年&#xff0c;后续到期不需要续费&#xff0c;等到专栏完成&#xff0c;会有一个价格调整&#xff…

618入手不亏的好物有哪些?五款品质兼优的好物分享!

随着618购物狂欢节的到来&#xff0c;各位消费者们是否已经摩拳擦掌&#xff0c;准备开启一场购物盛宴&#xff1f;在这里&#xff0c;我们为您精心准备了一份不容错过的购物清单&#xff0c;无论您是科技迷、学生还是家居生活爱好者&#xff0c;都能找到心仪的好物。 1、学生…

在全志H616核桃派开发板上进行音频配置的方法详解

耳机口​ 核桃派板载的3.5mm音频输出口&#xff0c;该接口有一定的输出功率&#xff0c;可以使用耳机或者带功放的扬声器都可以播放声音。 查看音频设备​ 可以使用下面指令来查看音频信息&#xff1a; aplay -l音频播放测试​ 播放系统自带wav音频文件测试, 下面指令的au…

MyBatisPlus的简单入门

文章目录 1.MybatisPlus的简介2.创建SpringBoot工程3.编写测试类 1.MybatisPlus的简介 MyBatisPlus&#xff08;简称MP&#xff09;是基于MyBatis框架基础上开发的增强型工具&#xff0c;旨在&#xff1a;简化开发、提高效率。 它对应的官方网址&#xff1a;链接 2.创建Sprin…