IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> jQuery+风琴拉伸效果唯美少女滴风格菜单的做法 -> 正文阅读

[JavaScript知识库]jQuery+风琴拉伸效果唯美少女滴风格菜单的做法

欢迎来到HTML部件频道💞

今天记录一款非常常见的菜单做法,具体效果看下图:🧐
在这里插入图片描述

在这里插入图片描述

好啦如果说对今天的分享感兴趣的话就继续往下看吧💨
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!--兼容性设置-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery风琴菜单</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />  <!--初始化样式-->
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css"> 
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" media="screen" href="https://cdn.staticfile.org/ionicons/2.0.1/css/ionicons.min.css">
</head>
<body>
<div class="zzsc-container">
	<section class="accordion">
		   <div class="item">
				<i class="icon ion-location"></i>
				<h3>Location</h3>
		   </div>
				<p>X MONSTER  输入内容</p>
			<div class="item">
				<i class="icon ion-cloud"></i>
				<h3>Music</h3>
		   </div>
			<p>X MONSTER   输入内容</p>
			<div class="item">
				<i class="icon ion-chatboxes"></i>
				<h3>Notes</h3>
		   </div>
				<p>X MONSTER    输入内容</p>
			<div class="item">
				<i class="icon ion-icecream"></i>
				<h3>Books</h3>
		   </div>
				<p>X MONSTER    输入内容</p>
			<div class="item">
				<i class="icon ion-person-add"></i>
				<h3>Tendances</h3>
		   </div>
			   <p>X MONSTER  输入内容</p>
	   </section>
</div>

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
	(function ($) {
		'use strict';
		$('.item').on("click", function () {
			$(this).next().slideToggle(100);
			$('p').not($(this).next()).slideUp('fast');
		});
	}(jQuery));
</script>

<div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>

</body>
</html>

其实这里主要用到jquery-1.11.0.min.js来完成,具体的代码欢迎点击以下下载链接,就不多逼逼了💚

链接:https://pan.baidu.com/s/1aAKJG8_WZyxl4NBs6GaCsQ
提取码:6666

好咯,今天的分享在这里就结束啦,欢迎订阅我的频道呀,有问题欢迎评论区以及私信见啦💗💗💗欢迎评论、点赞、关注???

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-07-26 11:59:24  更:2021-07-26 12:01:04 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年3日历 -2024/3/29 3:39:27-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码