CSS3模拟侧滑菜单

2024-05-28 17:58

本文主要是介绍CSS3模拟侧滑菜单,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在APP应用上,常见的一种导航方式是侧滑导航,效果类似于这样:
nav-slide

用CSS3可以对其进行模拟,代码如下:
HTML:

<nav><div id="toggleMenu"><span id="hide"></span><span id="show"></span></div><ul id="list"><li><a href="#">首页</a></li><li><a href="#">问题</a></li><li><a href="#">文章</a></li><li><a href="#">关注</a></li><li><a href="#">发现</a></li></ul></nav>

CSS:

nav{width: 100%;height: 50px;background-color: rgba(26,188, 156, 0.75);position: relative;}div{position: absolute;height: 100%;width: 50px;left: 20px;cursor: pointer;-webkit-transition: transform 1s;-moz-transition: transform 1s;-ms-transition: transform 1s;-o-transition: transform 1s;transition: transform 1s;}#hide,#show{display: block;height: 3px;background-color: #FFF;position: absolute;top: 50%;-webkit-transition: opacity .5s;-moz-transition: opacity .5s;-ms-transition: opacity .5s;-o-transition: opacity .5s;transition: opacity .5s;}#show{width: 20px;left: 15px;opacity: 0;}#hide{width: 30px;left: 10px;margin-top: -1.5px;}#hide::before,#hide::after,#show::before,#show::after{content: "";display: block;height: 3px;background-color: #FFF;position: absolute;}#hide::before,#hide::after{width: 30px;}#show::before,#show::after{width: 25px;}#hide::before,#show::before{top: -10px;}#hide::after,#show::after{top: 10px;}#show::before{-webkit-transform: rotate(35deg) translateX(5px);-moz-transform: rotate(35deg) translateX(5px);-ms-transform: rotate(35deg) translateX(5px);-o-transform: rotate(35deg) translateX(5px);transform: rotate(35deg) translateX(5px);}#show::after{-webkit-transform: rotate(-35deg) translateX(5px);-moz-transform: rotate(-35deg) translateX(5px);-ms-transform: rotate(-35deg) translateX(5px);-o-transform: rotate(-35deg) translateX(5px);transform: rotate(-35deg) translateX(5px);}ul{list-style: none;background-color: #455552;position: absolute;top: 34px;left: -200px;width: 74px;-webkit-transition: all .5s ease-in-out;-moz-transition: all .5s ease-in-out;-ms-transition: all .5s ease-in-out;-o-transition: all .5s ease-in-out;transition: all .5s ease-in-out;}li{margin: 0;padding: 0;position: relative;left: -40px;text-align: center;width: 112px;}a{text-decoration: none;color:#FFF;display: inline-block;height: 40px;line-height: 40px; }li:hover{background-color: rgba(26,188, 156, 0.75);}

JavaScript控制一下事件:

var toggle = document.getElementById("toggleMenu");var list = document.getElementById("list");var hide = document.getElementById("hide");var show = document.getElementById("show");var isHidden = true;window.onload = function() {toggle.onclick=function(){if(isHidden){list.style.left="0px";isHidden = false;hide.style.opacity=0;this.style.mozTransform = "rotate(180deg)";this.style.msTransform = "rotate(180deg)";this.style.oTransform = "rotate(180deg)";this.style.webkitTransform = "rotate(180deg)";this.style.transform = "rotate(180deg)";show.style.opacity=1;}else{list.style.left="-200px";isHidden = true;hide.style.opacity=1;this.style.mozTransform = "rotate(0deg)";this.style.msTransform = "rotate(0deg)";this.style.oTransform = "rotate(0deg)";this.style.webkitTransform = "rotate(0deg)";this.style.transform = "rotate(0deg)";show.style.opacity=0;}}}

效果:demo

原文:CSS3模拟侧滑菜单

这篇关于CSS3模拟侧滑菜单的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1011283

相关文章

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》:本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv

Python使用pynput模拟实现键盘自动输入工具

《Python使用pynput模拟实现键盘自动输入工具》在日常办公和软件开发中,我们经常需要处理大量重复的文本输入工作,所以本文就来和大家介绍一款使用Python的PyQt5库结合pynput键盘控制... 目录概述:当自动化遇上可视化功能全景图核心功能矩阵技术栈深度效果展示使用教程四步操作指南核心代码解析

使用Python和Tkinter实现html标签去除工具

《使用Python和Tkinter实现html标签去除工具》本文介绍用Python和Tkinter开发的HTML标签去除工具,支持去除HTML标签、转义实体并输出纯文本,提供图形界面操作及复制功能,需... 目录html 标签去除工具功能介绍创作过程1. 技术选型2. 核心实现逻辑3. 用户体验增强如何运行

Python模拟串口通信的示例详解

《Python模拟串口通信的示例详解》pySerial是Python中用于操作串口的第三方模块,它支持Windows、Linux、OSX、BSD等多个平台,下面我们就来看看Python如何使用pySe... 目录1.win 下载虚www.chinasem.cn拟串口2、确定串口号3、配置串口4、串口通信示例5

CSS 样式表的四种应用方式及css注释的应用小结

《CSS样式表的四种应用方式及css注释的应用小结》:本文主要介绍了CSS样式表的四种应用方式及css注释的应用小结,本文通过实例代码给大家介绍的非常详细,详细内容请阅读本文,希望能对你有所帮助... 一、外部 css(推荐方式)定义:将 CSS 代码保存为独立的 .css 文件,通过 <link> 标签

使用Vue-ECharts实现数据可视化图表功能

《使用Vue-ECharts实现数据可视化图表功能》在前端开发中,经常会遇到需要展示数据可视化的需求,比如柱状图、折线图、饼图等,这类需求不仅要求我们准确地将数据呈现出来,还需要兼顾美观与交互体验,所... 目录前言为什么选择 vue-ECharts?1. 基于 ECharts,功能强大2. 更符合 Vue

Vue中插槽slot的使用示例详解

《Vue中插槽slot的使用示例详解》:本文主要介绍Vue中插槽slot的使用示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、插槽是什么二、插槽分类2.1 匿名插槽2.2 具名插槽2.3 作用域插槽三、插槽的基本使用3.1 匿名插槽

springboot+vue项目怎么解决跨域问题详解

《springboot+vue项目怎么解决跨域问题详解》:本文主要介绍springboot+vue项目怎么解决跨域问题的相关资料,包括前端代理、后端全局配置CORS、注解配置和Nginx反向代理,... 目录1. 前端代理(开发环境推荐)2. 后端全局配置 CORS(生产环境推荐)3. 后端注解配置(按接口

Vue 2 项目中配置 Tailwind CSS 和 Font Awesome 的最佳实践举例

《Vue2项目中配置TailwindCSS和FontAwesome的最佳实践举例》:本文主要介绍Vue2项目中配置TailwindCSS和FontAwesome的最... 目录vue 2 项目中配置 Tailwind css 和 Font Awesome 的最佳实践一、Tailwind CSS 配置1. 安

CSS3 布局样式及其应用举例

《CSS3布局样式及其应用举例》CSS3的布局特性为前端开发者提供了无限可能,无论是Flexbox的一维布局还是Grid的二维布局,它们都能够帮助开发者以更清晰、简洁的方式实现复杂的网页布局,本文给... 目录深入探讨 css3 布局样式及其应用引言一、CSS布局的历史与发展1.1 早期布局的局限性1.2