php动态js导航视频教程,JQ实现动画导航实例代码

1.手风琴式导航，既可以适用于移动端也可使用与PC端

list-style: none;

padding: 0;

margin: 0;

}

ul{

display: none;

}

h3{

background-color: blue;

width: 100px;

height: 30px;

text-align: center;

line-height: 30px;

border: 1px solid chartreuse;

margin: 0 auto;

}

ul>li{

background-color: chartreuse;

width: 100px;

height: 30px;

text-align: center;

line-height: 30px;

border: 1px solid red;

margin: 0 auto;

}

$("h3").next().slideUp();//当前元素之下的节点$(this).next().stop(true).slideToggle();//使用间歇 })

})

语文

语文1
语文2
语文3
语文4

数学

数学1
数学2
数学3

英语

英语1
英语2
英语3

地理

地理1
地理2
地理3

政治

政治1
政治2
政治3

2.下拉式导航适用于pc端

list-style: none;

margin-left: 35%;

}

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;

}

$("#ul>li").hover(function(){//通过hover效果对该元素进行动画$(this).find("ul").stop().slideDown();//找到当前目标元素下的所有子节点下滑 },function(){

$(this).find("ul").stop().slideUp();//找到当前目标元素下的所有子节点上滑 })

})

去岁一别
- 一年
- 两年
- 三年
- 四年
- 五年
救赎问候
- 一次
- 两次
- 三次
- 四次
- 五次
深感愧疚
- 一句
- 两句
- 三句
- 四句
- 五句

还有更多样式的导航，使用C3新属性，使用动画，就会实现各种样式导航。

php动态js导航视频教程,JQ实现动画导航实例代码相关推荐

java图片16帧动画_Java实现帧动画的实例代码
本文讲述了Java实现帧动画的实例代码.分享给大家供大家参考,具体如下: 1.效果图 2.帧动画的简要代码 private ImageView bgAnimView; private Animatio ...
基于JS实现新闻列表无缝向上滚动实例代码
当新闻较多,并且空前有限的时候,使用滚动是一个不错的选择,本章节就通过代码实例介绍一下如何实现此效果. 代码实例如下: <!DOCTYPE html> <html> <h ...
html li点隐藏,js控制li的隐藏和显示实例代码
html页面全部({$count}) 钢琴谱({$count_pu}) 钢琴曲({$count_qu}) 钢琴专辑({$count_zhuanji}) 钢琴全集({$count_quanji}) 钢 ...
js控制台输出佛祖保佑图形图案实例代码
简介 js控制台输出佛祖保佑图形图案实例代码演示代码普通款 console.log([ " _ooOoo_", " o8888888o", " ...
HTML2d动态效果图,html5+css3实现2D-3D动画效果实例
html5+css3实现2D-3D动画效果实例主要实现的功能就是一些2D.3D的动画效果,如平移.缩放.旋转等等. 文章目录 html5+css3实现2D-3D动画效果实例 2D变换 3D变换案例 ...
html js相册样式,JavaScript+CSS相册特效实例代码
下面小编就为大家带来一篇JavaScript+CSS相册特效实例代码.小编觉得挺不错的,现在就分享JavaScript+css的源码给大家,也给大家做个参考.对JavaScript和css制作相册感兴 ...
css3 烟蚊香_css3+js实现烟花绽放的动画效果（代码示例）
本篇文章给大家介绍通过js+css3的transforms属性和keyframes属性来实现烟花绽放的动画效果的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们来看看效 ...
html中制作烟花的效果代码,css3+js实现烟花绽放的动画效果（代码示例）
本篇文章给大家介绍通过js+css3的transforms属性和keyframes属性来实现烟花绽放的动画效果的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们来看看效 ...
css烟花绽放效果代码,css3+js实现烟花绽放的动画效果（代码示例）
本篇文章给大家介绍通过js+css3的transforms属性和keyframes属性来实现烟花绽放的动画效果的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们来看看效 ...

php动态js导航视频教程,JQ实现动画导航实例代码

语文

数学

英语

地理

政治

php动态js导航视频教程,JQ实现动画导航实例代码相关推荐

最新文章

热门文章