用JQ帮你实现动画导航 手风琴是导航与下拉导航
1.手风琴式导航，既可以适用于移动端也可使用与PC端
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
list-style: none;
padding: ;
margin: ;
}
ul{
display: none;
}
h3{
background-color: blue;
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
border: 1px solid chartreuse;
margin: auto;
}
ul>li{
background-color: chartreuse;
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
border: 1px solid red;
margin: auto;
}
</style>
<script src="../js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 通过jq的滑入滑出动画可作出手风琴式的导航栏
$(document).ready(function(){//jq准备函数
$("h3").on("click",function(){
$("h3").next().slideUp();//当前元素之下的节点
$(this).next().stop(true).slideToggle();//使用间歇
})
})
</script>
</head>
<body>
<h3>
语文
</h3>
<ul>
<li>语文1</li>
<li>语文2</li>
<li>语文3</li>
<li>语文4</li>
</ul>
<h3>
数学
</h3>
<ul>
<li>数学1</li>
<li>数学2</li>
<li>数学3</li>
</ul>
<h3>
英语
</h3>
<ul>
<li>英语1</li>
<li>英语2</li>
<li>英语3</li>
</ul>
<h3>
地理
</h3>
<ul>
<li>地理1</li>
<li>地理2</li>
<li>地理3</li>
</ul>
<h3>
政治
</h3>
<ul>
<li>政治1</li>
<li>政治2</li>
<li>政治3</li>
</ul>
</body>
</html>
2.下拉式导航 适用于pc端
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul{
list-style: none;
margin-left: %;
}
ul li{
float: left;
width: 100px;
height: 30px;
background-color: deeppink;
line-height: 30px;
text-align: center;
margin-left: 5px;
}
ul li>ul{
margin-left: -45px;
margin-top: 5px;
display: none;
}
</style>
<script src="../js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#ul>li").hover(function(){//通过hover效果对该元素进行动画
$(this).find("ul").stop().slideDown();//找到当前目标元素下的所有子节点下滑
},function(){
$(this).find("ul").stop().slideUp();//找到当前目标元素下的所有子节点上滑
})
})
</script>
</head>
<body>
<ul id="ul">
<li>
去岁一别
<ul>
<li>一年</li>
<li>两年</li>
<li>三年</li>
<li>四年</li>
<li>五年</li>
</ul>
</li>
<li>
救赎问候
<ul>
<li>一次</li>
<li>两次</li>
<li>三次</li>
<li>四次</li>
<li>五次</li>
</ul>
</li>
<li>
深感愧疚
<ul>
<li>一句</li>
<li>两句</li>
<li>三句</li>
<li>四句</li>
<li>五句</li>
</ul>
</li>
</ul>
</body>
</html>
还有更多样式的导航，使用C3新属性，使用动画，就会实现各种样式导航。
用JQ帮你实现动画导航 手风琴是导航与下拉导航的更多相关文章
- CSS制作一个简单网页的下拉导航栏
网页下拉导航栏的制作 网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器. 首先说明几个简单的伪选择器(比较常用的): link:连接平常的状态 visited:连接被访问过之后 hover:鼠 ...
- 基于jQuery动画二级下拉导航菜单
春节回来给大家分享一款基于jQuery动画二级下拉导航菜单.鼠标经过的时候以动画的形式出现二级导航.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id=" ...
- 在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...
- 一款jQuery立体感动态下拉导航菜单特效
一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...
- 20款jquery下拉导航菜单特效代码分享
20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...
- Android实现下拉导航选择菜单效果
本文介绍在Android中如何实现下拉导航选择菜单效果. 关于下拉导航选择菜单效果在新闻客户端中用的比较多,当然也可以用在其他的项目中,这样可以很方便的选择更多的菜单.我们可以让我们的应用顶部有左 ...
- 通过html和css做出下拉导航栏的效果
通过观察了百度的首页,对于更多产品一栏,觉得可以不涉及JS便可写出下拉导航栏的效果 1.先设计出大体的框架 <div class="nav"> <ul> & ...
- 纯CSS实现二级下拉导航菜单
这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...
- Javascript下拉导航
1.右侧导航 tree.js function Toggle(e){ if(!document.getElementById) return; if(!e) var e = window.event; ...
- HTML DOM部分---做竖向横向的下拉导航 下拉菜单 图片轮播（圆点、箭头） 选项卡 进度条；
1,竖向下拉导航 鼠标单击打开 再打击关闭 <style> *{ margin:0px auto; padding:0px;} div{ width:100px; height:50px; ...
随机推荐
- SDUT OJ 数据结构实验之链表七：单链表中重复元素的删除
数据结构实验之链表七:单链表中重复元素的删除 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem ...
- C#实现WebSocket协议客户端和服务器websocket sharp组件实例解析
看到这篇文章的题目,估计很多人都会问,这个组件是不是有些显的无聊了,说到web通信,很多人都会想到ASP.NET SignalR,或者Nodejs等等,实现web的网络实时通讯.有关于web实时通信的 ...
- angluarJs与后台交互get
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...
- C++_类和动态内存分配4-有关返回对象的说明
返回方式: 返回指向对象的引用: 指向对象的const引用: const对象: =============================================== 返回指向const对象 ...
- (找到最大的整数k使得n! % s^k ==0) (求n!在b进制下末尾0的个数) （区间满足个数）
题目:https://codeforces.com/contest/1114/problem/C 将b分解为若干素数乘积,记录每个素数含多少次方 b = p1^y1·p2^y2·...·pm^ym. ...
- 前端页面 script 事件总结
1. input 失去焦点是触发事件 $("#sn").blur(function(){ alert("sdfasdf"); }); 2. 获取文本框中的 ...
- css3 渐变色
Firefox可以使用角度来设定渐变的方向,而webkit只能使用x和y轴的坐标. 渐变可以创建类似于彩虹的效果,低版本的浏览器使用图片来实现,CSS3将会轻松实现网页渐变效果 粘贴代码 <di ...
- rabbitmq 事务消息
事务消息主要用在发送方 在connection上加上事务属性, 发送方感知到本地事务执行失败, 需要通知broker将先前已经接收到的消息rollback,不要发给后面的消费者, 满足强一致性的要求 ...
- layer弹出层显示在top顶层
父页面 导入 layer.js 或者 layui.all.js,导入后就能正常显示在父窗口页面区域. 1.显示在顶层窗口 top.layer.open({ type: 2, area: ['98%', ...
- Farey Sequence（欧拉函数板子题）
题目链接:http://poj.org/problem?id=2478 Farey Sequence Time Limit: 1000MS Memory Limit: 65536K Total S ...