jQuery 导航动态效果

最新推荐文章于 2024-07-17 18:00:00 发布
置顶 最新推荐文章于 2024-07-17 18:00:00 发布
阅读量439 收藏
点赞数
分类专栏： jQuery 文章标签： jquery html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011842814/article/details/10401887
版权

直接复制以下代码，再下载一个jQuery库文件，就ok啦！

<!DOCTYPE HTML>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>jQuery 导航下拉实例演示</title>
<style>
html *{
padding:0;
margin:0;
font-family: Arial, Verdana, Helvetica, sans-serif;
}
.title{
text-align:center;
}
.nav *{
text-decoration:none;
font-size:9pt;

}
.nav * a:hover{
background-color:#82ce18;/* 鼠标经过时的背景 */
}
.menu{
list-style:none;
height:40px;
width:100%;
background-color:rgba(228, 123, 165, 0.88);
}
.nav{
list-style:none;
height:40px;
width:900px;
margin:0 auto;
background-color:rgba(0);
padding-left: 213px;
}
.nav li {
list-style:none;
float: left;
border-left: 1px solid #F3E5F3;
border-right: 1px solid #F3E5F3;
position:relative;
}
.nav li a{
color:#fff;
height:38px;
line-height:38px;
font-weight:bold;
padding:0 20px;
display:inline-block;
}
.nav li a:focus{ 
-moz-outline-style: none; 
}
.nav li .sub-nav{
top:39px;
left:-1px;
display:none;
position:absolute;
}
.nav li .sub-nav li{
text-align:center;
clear:left;
width:140px;
height:35px;
line-height:35px;
background-color:#ccc;
}
.nav li .sub-nav li a{
height:34px;
line-height:34px;
width:138px;
padding:0;
}

</style>

<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(".nav>li").hover(function(){
$(this).children('ul').stop(true,true).show(300);
},function(){
$(this).children('ul').stop(true,true).hide(300);
})
})
</script>
</head>
<body>
<div class="title">jQuery 导航下拉实例演示,超粉系列</h2></div>
<div class="menu">
<ul class="nav">
<li><a href="#">JquerySchool</a>
<ul class="sub-nav">
<li><a href="#">Jquery插件</a></li>
<li><a href="#">Jquery学堂</a></li>
<li><a href="#">学习资料库</a></li>
<li><a href="#">QQ群堂</a></li>
<li><a href="#">TAGS标签</a></li>
<li><a href="#">在线留言</a></li>
</ul>
</li>
<li><a href="#">Jquery学堂</a>
<ul class="sub-nav">
<li><a href="#">Jquery插件</a></li>
<li><a href="#">Jquery学堂</a></li>
<li><a href="#">学习资料库</a></li>
<li><a href="#">QQ群堂</a></li>
<li><a href="#">TAGS标签</a></li>
<li><a href="#">在线留言</a></li>
</ul>
</li>
<li><a href="#">学习资料库</a>
<ul class="sub-nav">
<li><a href="#">Jquery插件</a></li>
<li><a href="#">Jquery学堂</a></li>
<li><a href="#">学习资料库</a></li>
<li><a href="#">QQ群堂</a></li>
<li><a href="#">TAGS标签</a></li>
<li><a href="#">在线留言</a></li>
</ul>
</li>
<li><a href="#">QQ群堂</a>
<ul class="sub-nav">
<li><a href="#">Jquery插件</a></li>
<li><a href="#">Jquery学堂</a></li>
<li><a href="#">学习资料库</a></li>
<li><a href="#">QQ群堂</a></li>
<li><a href="#">TAGS标签</a></li>
<li><a href="#">在线留言</a></li>
</ul>
</li>
<li><a href="#">TAGS标签</a>
<ul class="sub-nav">
<li><a href="#">Jquery插件</a></li>
<li><a href="#">Jquery学堂</a></li>
<li><a href="#">学习资料库</a></li>
<li><a href="#">QQ群堂</a></li>
<li><a href="#">TAGS标签</a></li>
<li><a href="#">在线留言</a></li>
</ul>
</li>
<li><a href="#">在线留言</a>
<ul class="sub-nav">
<li><a href="#">Jquery插件</a></li>
<li><a href="#">Jquery学堂</a></li>
<li><a href="#">学习资料库</a></li>
<li><a href="#">QQ群堂</a></li>
<li><a href="#">TAGS标签</a></li>
<li><a href="#">在线留言</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
胡姬168qdl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html导航栏横向展开,jquery实现可横向和竖向展开的动态下滑菜单效果
weixin_42488542的博客
05-30 1259
本文实例讲述了jquery实现可横向和竖向展开的动态下滑菜单效果。分享给大家供大家参考。具体如下：这里演示了两个下拉导航菜单的效果，用jquery.easing.1.3.js和jquery.naviDropDown.1.0.js以及jquery.hoverIntent.minified.js共同实现，最新的jquery版本也可以引入，在演示页面中，分别有横向水平向下滑出的下拉菜单，还有纵向垂直布局...
jquery导航栏特效
chenqiong1991的博客
04-04 835
写在前面用简单的另一种方法实现导航栏滑动特效。代码.line { float: none; position: absolute; left: 0; height: 3px; width: 0; padding: 0; backgro
3个用jq实现的动态效果导航菜单.rar
07-10
3个用jQuery实现的动画版导航菜单，各有各的特点： 　　范例菜单一特点：用背景图实现（带圆角，注意图的做法，两张或整合成），主要用于导航栏项目文字长短不一的情况（不定宽！） 　　范例菜单二特点：用背景图或背景色来实现，导航栏项目为四字。去掉LI中宽度的设置，可用于任何长度的文字。 　　范例菜单三特点：用下划线实现，导航栏文字字数为四字，去掉或重新设置A标记中的宽度，可用于任何长度的文字
jquery 动态生成导航栏
weixin_44468853的博客
08-23 976
在使用jquery开发网页的时候，做不到像vue一样引入组件，但是我们的导航栏，还是不能每个页面都写的。要不然当需要修改小部分内容的时候，还得需要一个个文件去改，这样的代码也太不好维护了。所以我们需要使用js来生成导航栏。这里写的比较简单，入门级的，提供大致思路，可以根据你们的使用场景来进行修改。
网页导航的动画效果
weixin_52212950的博客
04-02 1551
我们已经掌握了动画函数的多种特效，轮播图，缓慢回到页面顶部的效果等等，这次我们要完成的是网页导航的动态效果，这次的案例不同于之前我们光标移到哪个导航块，哪个导航块就变色，而是我们的光标移动到哪个导航块，效果背景以缓慢美观的动画效果移动至光标所在导航块，并且移开光标效果背景会再次回到原先位置，当点击该导航块后，移走光标效果背景位置不会回去。 实现原理： 实现原理其实并不复杂 第一步：要构建好 HTML 结构，效果背景层使用的是单独的一个div，绝对定位到 ul 的最左侧，其次再...
jQuery-jQuery动画&导航动态显示效果
Aqours的博客
09-15 602
jQuery 内置动画 淡入淡出: 不断改变元素的透明度来实现的 fadeIn(): 带动画的显示 fadeOut(): 带动画隐藏 fadeToggle(): 带动画切换显示/隐藏 /* 需求： 1. 点击btn1, 慢慢淡出 * 无参 * 有参 * 字符串参数 * 数字参数 */ var $div1=$('.div1'); $('#btn1'...
jQuery 导航栏案例
qq_50839755的博客
04-07 2413
基本需求： 1.当页面滑动到某个盒子时 导航栏显示出来 2.点击导航栏 可以直接移动到相应的位置 3.给点击的导航栏某一项 变化背景颜色(加上current类) 4.当页面滑动到某个盒子时 对应的导航栏也要固定到对应的位置 整体代码展示： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style>
jquery模拟flash导航效果
06-05
本篇文章将详细探讨如何利用jQuery模拟出类似Flash的导航效果，这种效果通常包括平滑的动画过渡、动态响应以及丰富的视觉体验。 Flash曾经是制作动态导航栏的首选技术，因其强大的动画功能和跨平台支持而受到欢迎。...
jQuery动画垂直折叠导航效果
06-05
而jQuery作为一款强大的JavaScript库，提供了丰富的功能来实现各种动态效果，包括垂直折叠导航。本篇将深入探讨如何利用jQuery创建一个动画垂直折叠的导航菜单。 首先，我们需要理解jQuery的基本用法。jQuery的核心...
jQuery导航效果特效代码
03-20
"jQuery 导航效果特效代码"就是利用 jQuery 实现的一种导航菜单的动态展示方式，特别是实现了导航文字的上下滑动效果。 这个特效的核心在于利用 jQuery 的动画功能来改变导航项的位置和视觉状态。通常，这种效果会...
jQuery实现的动态伸缩导航菜单实例
10-24
主要介绍了jQuery实现的动态伸缩导航菜单,实例分析了jQuery鼠标事件及animate、hide等方法的使用技巧,需要的朋友可以参考下
首页侧边jQuery导航效果
11-20
在实现首页侧边jQuery导航效果时，主要涉及以下步骤： 1. **HTML结构**：首先，创建HTML结构，定义导航菜单的层次和样式。通常使用`<ul>`和`<li>`元素来构建多级菜单，通过CSS控制其默认显示和隐藏状态。 2. **CSS...
jquery 二级导航
weixin_33795806的博客
09-16 52
$(function () { $(".userhover").hover(function () { $(this).children('ul').stop(true, true).show(300); }, function () { $(this...
使用缓动动画函数实现导航栏效果
想要全栈chris的博客
02-22 1045
需求： 1.鼠标在那个li上面，span对应移动到该li上，移开后，回到原位置 2.鼠标点击那个li就记录该li标签，移开的时候span回到该记录的li标签上 要点： 1.封装匀速函数 2.计数器思想代码实现:<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title>
网站导航栏如何实现动态效果
燚轩软件科技
07-23 5678
　　导航栏是每一个网站都要有的，那么对于一般的导航栏制作，相信大家都会，而且也不会遇到什么麻烦，但是如何才能让网站导航栏实现动态效果估计这会难倒很多技术人员，那么下面就来为大家分析解答一下。 Html代码： &lt;html&gt; &lt;head&gt; &lt;title&gt;导航演示&lt;/title&gt; &lt;meta charset="UTF-8"&gt; &lt..
jquery 中对 ul 下的 li 的常用动态操作
_夜渐凉
05-08 3145
场景： <div class="form-group"> <label class="col-sm-2 control-label">关联id：</label> <div class="col-sm-10"> <ul id="relids"> </ul> </d...
CSS导航交错过渡动态效果
weixin_42353446的博客
08-20 702
文档目录DOM编译后的 CSS 今天跟大家一起，使用 css3 transform 的几个简单属性，来简单实现一个交错过渡动效的导航菜单。效果如下： DOM 我们以最最最~古老的企业站点导航为栗子，创建一个页面结构： <ul class="nav-hover"> <li> <a href="#nogo">首页 <span>Home&lt...
C# Word转换HTML（附在线转换工具）
最新发布
学习和分享
07-17 891
根据你的具体需求（如是否需要Microsoft Office、性能要求、成本考虑等），你可以选择使用或Aspose.Words来将Word文档转换为HTML。如果你正在寻找一个不依赖于Microsoft Office的解决方案，并且需要更多的灵活性和控制，那么Aspose.Words可能是一个更好的选择。
使用JQuery实现横向导航菜单效果中用到的知识点
05-18
使用JQuery实现横向导航菜单效果可以用到以下知识点： 1. 选择器：JQuery的选择器可以用来选择HTML元素，比如class、id、标签名等。横向导航菜单的选项卡通常使用class选择器来选择。 2. 事件处理器：使用JQuery的事件处理器可以在用户点击选项卡时触发相应的事件，比如显示或隐藏相应的内容。 3. 动画效果：使用JQuery的动画效果可以实现选项卡的切换效果，比如淡入淡出、滑动等。 4. CSS操作：使用JQuery的CSS操作可以动态修改选项卡的样式，比如改变背景色、字体颜色等。 5. AJAX：如果选项卡对应的内容是动态加载的，可以使用JQuery的AJAX功能来异步获取内容并显示在页面上。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值