隐藏菜单之菜单和搜索
2024-06-20 23:19:47
先看效果：
再看代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>菜单</title><style>/* css代码开始*/* {margin: 0;padding: 0;box-sizing: border-box;}body {background: rgb(235, 234, 234);height: 100vh;display: grid;place-items: center;}/* 主包装器及其布局 */.wrapper {width: 200px;border-radius: 30px;height: 50px;background: white;box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.281);display: flex;justify-content: space-evenly;align-items: center;z-index: 5;position: relative;}.item {cursor: pointer;}.linee {width: 20px;height: 3px;background: rgb(201, 198, 198);margin-top: 3px;border-radius: 5px;transition: all 0.2s;}.linee1 {width: 15px;transform: translateX(5px);}.linee1::before {content: "";display: block;transform: translateX(-5px);width: 3px;height: 3px;background: rgb(201, 198, 198);transition: width 0.2s ease 0.1s, transform 0.2s;}.linee3::after {content: "";display: block;transform: translateX(17px);width: 0px;height: 3px;background: rgb(201, 198, 198);transition: width 0.2s ease 0.1s;}.linee3 {width: 13px;}.gallery {display: grid;grid-template-columns: repeat(3, 5px);grid-auto-rows: 5px;grid-gap: 4px;transform: translateY(3px);}.dot {border: 1px solid rgb(139, 136, 136);border-radius: 50%;}.add {width: 38px;height: 38px;border-radius: 50%;background: rgb(201, 198, 198);border: none;position: relative;z-index: 4;transition: all 0.3s ease;outline: none;}.close {position: relative;left: 35%;z-index: 4;top: 50%;}.line {position: absolute;width: 10px;height: 2px;background: rgb(255, 255, 255);transition: all 0.2s;}.line1 {transform: rotate(0deg);}.line2 {transform: rotate(90deg);}.search {position: absolute;top: 0;left: 4%;z-index: 0;width: 0px;height: 38px;border-radius: 30px;border: none;color: white;background: rgb(253, 95, 95);box-sizing: border-box;padding-left: 35px;transition: all 0.3s ease;outline: none;box-shadow: none;}::placeholder {font-weight: bold;color: white;}.circle {width: 38px;height: 38px;background: rgb(201, 198, 198);top: 0;left: 0;position: absolute;z-index: 3;border-radius: 50%;cursor: pointer;transition: background 0.5s;}.nav-items {width: 38px;height: 38px;background: rgb(246, 54, 54);color: white;border-radius: 50%;display: flex;justify-content: center;align-items: center;position: absolute;top: 0;left: 0;cursor: pointer;box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.212);transform: scale(0);transition: transform 0.1s cubic-bezier(0.23, -0.47, 0.58, -0.63);}.nav-items:hover {transform: scale(1.1);transition-timing-function: 0.1s;}.items1 {top: -100%;left: 5%;}.items2 {top: -50%;left: -23%;transition-delay: 0.1s;}.items3 {top: 80%;left: -23%;transition-delay: 0.2s;}.items4 {top: 130%;left: 5%;transition-delay: 0.3s;}.box {width: 100%;position: absolute;top: 110%;left: 0;height: 0px;overflow: hidden;background: white;display: grid;grid-gap: 10px;transition: height 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);z-index: 0;}.box-line {width: 100px;height: 10px;background: rgb(201, 198, 198);border-radius: 10px;opacity: 0;z-index: 0;transition: opacity 0s;}.box-line:nth-child(even) {width: 130px;}.effect {z-index: 3;border-radius: 50%;width: 200vmax;height: 200vmax;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%) scale(0);background: rgb(246, 54, 54);transition: transform 0.4s;}/* 切换类 */.box-show {height: 150px;box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.226);padding: 10px;transition-duration:0.2s;}.box-line-show {opacity: 1;transition-duration:.1s;}footer{display:flex;position:fixed;top:90%;left:50%;transform:translate(-50%,-50%);}footer a{color:gray;margin-left:30px;font-size:1.8rem;}a:nth-child(1):hover{color:tomato;}a:nth-child(2):hover{color:skyblue;}.color {background: rgb(246, 54, 54);}.show-menu {transform: scale(1);transition: transform 0.5s cubic-bezier(0.23, -0.47, 0.58, -0.63);}.go {transform: translateX(-125px);}.search-focus {width: 180px;left: 20%;top: 1%;height: 38px;background: rgb(253, 95, 95);}.move {transform: rotate(45deg);}.mov {transform: rotate(-45deg);}.big {transform: translate(-50%, -50%) scale(1);}/* 悬停效应 */.menu:hover .linee1 {width: 10px;transform: translateX(0px);}.menu:hover .linee1::before {width: 0px;transform: translateX(0px);}.menu:hover .linee3 {width: 15px;}.menu:hover .linee3::after {content: "";display: block;transform: translateX(17px);width: 3px;height: 3px;background: rgb(201, 198, 198);transition: width 0.2s ease 0.1s;}.gallery:hover .dot1 {animation: jump 0.4s ease 1;}.gallery:hover .dot2 {animation: jump 0.4s ease 0.1s 1;}.gallery:hover .dot3 {animation: jump 0.4s ease 0.2s 1;}.gallery:hover .dot4 {animation: jump 0.4s ease 0.3s 1;}.gallery:hover .dot5 {animation: jump 0.4s ease 0.4s 1;}.gallery:hover .dot6 {animation: jump 0.4s ease 0.5s 1;}@keyframes jump {50% {transform: translateY(-4px);border-color: rgb(117, 117, 117);}100% {transform: translateY(0px);border-color: rgb(119, 118, 118);}}.close {width: 10px;}</style>
</head>
<body>
<div class="wrapper"><div class="item menu"><div class="linee linee1"></div><div class="linee linee2"></div><div class="linee linee3"></div></div><div class="item gallery"><div class="dot dot1"></div><div class="dot dot2"></div><div class="dot dot3"></div><div class="dot dot4"></div><div class="dot dot5"></div><div class="dot dot6"></div></div><button class="item add"><div class="circle"><div class="close"><div class="line line1"></div><div class="line line2"></div></div></div><input type="search" placeholder="search" class="search" /></button><div class="nav-items items1"><i class="fas fa-home"></i></div><div class="nav-items items2"><i class="fas fa-camera"></i></div><div class="nav-items items3"><i class="fas fa-folder"></i></div><div class="nav-items items4"><i class="fas fa-heart"></i></div><div class="box"><div class="box-line box-line1"></div><div class="box-line box-line2"></div><div class="box-line box-line3"></div><div class="box-line box-line4"></div></div>
</div><div class="effect"></div><footer><a href="https://blog.csdn.net/qq_35241329?spm=1010.2135.3001.5343" target="_blank">TiMi先生></a>
</footer>
</body>
<script>/* 搜索栏 */document.querySelector(".circle").addEventListener("click", () => {for (let i = 0; i <= 3; i++) {document.getElementsByClassName("nav-items")[i].classList.remove("show-menu");document.getElementsByClassName("box-line")[i].classList.remove("box-line-show");}document.querySelector(".box").classList.remove("box-show");document.querySelector(".add").classList.toggle("go");document.querySelector(".search").classList.toggle("search-focus");document.querySelector(".search").focus();document.querySelector(".circle").classList.toggle("color");document.querySelector(".line1").classList.toggle("move");document.querySelector(".line2").classList.toggle("mov");document.querySelector(".effect").classList.toggle("big");});/* 菜单 */document.querySelector(".menu").addEventListener("click", () => {for (let i = 0; i <= 3; i++) {document.querySelector(".box").classList.remove("box-show");document.getElementsByClassName("nav-items")[i].classList.toggle("show-menu");document.getElementsByClassName("box-line")[i].classList.remove("box-line-show");}});document.querySelector(".gallery").addEventListener("click", () => {document.querySelector(".box").classList.toggle("box-show");for (let i = 0; i <= 3; i++) {document.getElementsByClassName("box-line")[i].classList.toggle("box-line-show");document.getElementsByClassName("nav-items")[i].classList.remove("show-menu");}});
</script>
</html>
隐藏菜单之菜单和搜索相关推荐
- ExtJS：鼠标移出菜单后菜单自动隐藏
ExtJS:鼠标移出菜单后菜单自动隐藏 1.使用的是Extjs2.0.2. 2.遇到的问题,简述如下: 当下拉菜单显示后,如果不做任何操作,而直接移开鼠标,此时菜单不会自动消失(隐藏),一直会显示在屏 ...
- HTML下拉菜单去掉点,jQuery点击页面其他部分隐藏下拉菜单功能
一.开发小要点 web页面中,我们一般不用select.option来实现下拉菜单效果,因为下拉框的样式丑且难以美化,所以我们选择控制ul显示隐藏来实现同样且高大上的效果,但是不能像下拉框那样点击页面 ...
- 列表隔行变色、显示和隐藏下拉菜单、列表的高亮显示效果
列表隔行变色 <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset=" ...
- 怎么隐藏Windows11开始菜单中的推荐面板
相信现在很多用户都在使用Win11操作系统,在"开始"菜单的下半部分包含了"推荐"面板.目前它用于突出显示最近使用的文件和最近安装的应用程序,但有些人担心Mic ...
- html隐藏窗口栏,electron程序，如何隐藏窗体顶部菜单？
本博客不欢迎:各种镜像采集行为,请尊重知识产权法律法规.大家都是程序员,不要闹得不开心. 在mac系统中,electron的菜单是和主窗口是分离的.所以对于主窗口来说,并没有太多视觉上的影响.而在wi ...
- css基础：样式之定位、样式之隐藏、二级菜单、多个列表转表格、图片精灵技术
<html lang="en"> <head> <meta charset="UTF-8"> <tit ...
- css基础：样式之定位、样式之隐藏、二级菜单、多个列表转表格、图片精灵技术...
<html lang="en"> <head> <meta charset="UTF-8"> <tit ...
- 右键计算机菜单,右键菜单设置方法步骤【图文】
鼠标使用的时间越长,右键菜单就会随着软件的增多,变得越来越长,这不仅让我们在使用右键时,找到想要点击的选项变得不那么方便,也会让电脑运行变得缓慢.我们常常会清理电脑系统的缓存垃圾,鼠标的右键就像电脑的 ...
- android的筛选功能,android实现多条件筛选列表菜单筛选菜单
PHP多条件分类列表筛选功能开发实例 PHP多条件分类列表筛选功能开发实例,前后台一起实现 后台对接可以拼接sql语句,PHP通过表单值隐藏值筛选,常用又实用! 表单筛选核心函数 function F ...
- 初学java之菜单条，菜单，菜单项的设置
1 package project; 2 import javax.swing.*; 3 4 import java.awt.event.KeyEvent; 5 import java.awt.eve ...
最新文章
- logistic回归和最大熵
- 分享一个四两拨千斤的真实故事
- 如何将类添加到给定的元素？
- python入门必备10个坑_python中的基础坑
- 超级好用的流程图js框架
- 美丽汤的请求 - 小甜饼豆瓣爬虫
- 【Linux上分之路】第二篇：Linux硬件、磁盘结构和分区，Linux文件目录结构
- 天梯赛座位 分配分数 20作者 陈越单位 浙江大学
- TypeScript 之 More on Functions
- 四种方法获取可执行程序的文件路径（.NET Core / .NET Framework）
- css朗逸保险丝盒机舱,【朗逸保险盒】朗逸保险盒位置图解、拆卸方法_车主指南...
- EntityFramework安装失败
- POJ：1182 食物链（带权并查集）
- 解决http请求下无法开启麦克风问题
- 2021高考成绩特长生查询,2021高考体育生分数怎么算 体育四项评分标准及分值一览表...
- proftpd的SSH_DISCONNECT (Read TImed out,Key exchange failed.错误解决
- carla学习笔记(九)
- 拉格朗日多项式插值法 思路详解+详细代码
- 韦东山第1期-学习笔记-4
- 第一章：3ds max基础
热门文章
- miniui隐藏div隐藏tr的方法
- 零基础准备蓝桥杯【一】
- 怎么解除计算机程序锁定,浏览器被锁定主页要怎么解除？
- Ruby语言能做什么?
- 自定义Spring Boot Starters
- 【李宏毅2021机器学习深度学习——作业2 Classification】 Phoneme Classification 记录（双过strong baseline）
- 对Java中interrupt、interrupted和isInterrupted的理解
- Android中的“Application”，“Task”，“Activities”的关系
- android 6.0 touchwiz ui,告别TouchWiz 三星或推Experience界面
- Keynote相关笔记