jQuery下划线跟随导航菜单.zip资源-CSDN文库

共19个文件

png：8个

jpg：3个

js：3个

版权申诉

javascript

html5

jQuery

115 浏览量 2022-11-22 17:15:49 上传评论收藏 162KB ZIP 举报

在前端开发中，创建动态、交互性强的用户体验是至关重要的，而jQuery下划线跟随导航菜单就是实现这一目标的一种常见手法。这个压缩包文件“jQuery下划线跟随导航菜单.zip”包含了一个使用jQuery库实现的示例，它使得菜单项在被鼠标悬停时，下划线会随之移动，增加了用户的互动感。下面我们将详细讨论这个技术实现的各个方面。我们来看HTML5的基础结构。在创建这种跟随导航菜单时，通常会有一个包含多个链接元素的无序列表（`<ul>`），每个链接元素（`<li>`）都代表一个菜单项。例如： ```html <nav> <ul id="menu"> <li><a href="#">菜单1</a></li> <li><a href="#">菜单2</a></li> <li><a href="#">菜单3</a></li>  </ul> </nav> ``` CSS（层叠样式表）用于定义菜单的基本样式，包括字体、颜色、布局等。对于下划线跟随效果，我们需要隐藏默认的下划线，并创建一个独立的元素，如`<span>`，作为动态下划线。CSS代码可能如下： ```css #menu { list-style: none; display: flex; } #menu li { position: relative; } #menu a { display: block; padding-bottom: 10px; text-decoration: none; } .underline { position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #000; transition: width 0.3s ease; } ``` 接下来，我们利用jQuery来实现动态效果。当鼠标悬停在某个菜单项上时，我们将改变下划线的宽度，使其与菜单项的宽度匹配。以下是相应的JavaScript代码： ```javascript $(document).ready(function() { $('#menu li').hover(function() { var $this = $(this); var $underline = $this.find('.underline'); var width = $this.width(); $underline.stop().animate({width: width}, 300); }, function() { var $underline = $(this).find('.underline'); $underline.stop().animate({width: 0}, 300); }); }); ``` 这段jQuery代码在文档加载完成后，为每个菜单项添加了鼠标悬停事件监听器。当鼠标进入菜单项时，下划线的宽度逐渐增加到与其父元素相同的宽度；当鼠标离开时，宽度逐渐减小至0。`stop()`方法用于停止任何正在运行的动画，防止动画堆积，`animate()`则是控制动画的关键函数。总结起来，这个“jQuery下划线跟随导航菜单”示例展示了如何结合HTML5、CSS和jQuery来创建一种常见的交互效果。通过将静态的HTML结构与动态的JavaScript行为相结合，我们可以为用户创建更加生动、有趣的界面体验。在实际项目中，可以根据需要调整样式和动画效果，以适应不同的设计需求。

资源推荐

资源详情

资源评论

收起资源包目录

jQuery下划线跟随导航菜单.zip （19个子文件）

jQuery下划线跟随导航菜单

jQuery下划线跟随导航菜单.jpg 39KB

jiaoben1628

css

style.css.bak 10KB

style.css 2KB

images

fwrx.png 14KB

tick_circle.png 741B

online_bg.png 16KB

online_bg_ie6.png 15KB

tabbg.gif 836B

top.gif 3KB

adbg.png 1KB

logo.png 48KB

exclamation.png 622B

cross.png 540B

index_zj_next.jpg 765B

index_zj_pre.jpg 903B

index.html 4KB

jquery-1.7.2.min.js 93KB

zzsc.js 835B

SuperSlide.2.1.js 11KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery带下划线导航菜单 - 网页模板</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> </head> <body> <br> <div class="navBar"> <ul class="nav clearfix"> <li class="m"> <h3><a target="_blank" href="http://www.moobnn.com/">网站首页</a></h3> </li> <li class="s">|</li> <li class="m"> <h3><a target="_blank" href="http://www.moobnn.com/" title="关于我们">关于我们</a></h3> <ul class="sub"> <li><a href="http://www.moobnn.com/" title="企业简介">企业简介</a></li> <li><a href="http://www.moobnn.com/" title="组织架构">组织架构</a></li> <li><a href="http://www.moobnn.com/" title="企业资质">企业资质</a></li> <li><a href="http://www.moobnn.com/" title="企业文化">企业文化</a></li> </ul> </li> <li class="s">|</li> <li class="m"> <h3><a target="_blank" href="http://www.moobnn.com/">资质认定</a></h3> <ul class="sub"> <li><a href="http://www.moobnn.com/" title="国家高新认证">国家高新认证</a></li> <li><a href="http://www.moobnn.com/" title="软件企业认证">软件企业认证</a></li> <li><a href="http://www.moobnn.com/" title="深圳市高企认证">深圳市高企认证</a></li> <li><a href="http://www.moobnn.com/" title="其它认证">其它认证</a></li> </ul> </li> <li class="s">|</li> <li class="m"> <h3><a target="_blank" href="http://www.moobnn.com/">政府扶持</a></h3> <ul class="sub" style="display: none;"> <li><a href="http://www.moobnn.com/" title="深圳市级扶持">深圳市级扶持</a></li> <li><a href="http://www.moobnn.com/" title="各区级扶持">各区级扶持</a></li> <li><a href="http://www.moobnn.com/" title="广东省级扶持">广东省级扶持</a></li> <li><a href="http://www.moobnn.com/" title="国家和部级扶持">国家和部级扶持</a></li> </ul> </li> <li class="s">|</li> <li class="m"> <h3><a target="_blank" href="http://www.moobnn.com/" title="知识产权">知识产权</a></h3> <ul class="sub" style="display: none;"> <li><a href="http://www.moobnn.com/" title="知识产权申请">知识产权申请</a></li> <li><a href="http://www.moobnn.com/" title="知识产权转让">知识产权转让</a></li> <li><a href="http://www.moobnn.com/" title="技术咨询">技术咨询</a></li> <li><a href="http://www.moobnn.com/" title="技术成果鉴定">技术成果鉴定</a></li> </ul> </li> <li class="s">|</li> <li class="m"> <h3><a target="_blank" href="http://www.moobnn.com/" title="上市服务">上市服务</a></h3> <ul class="sub" style="display: none;"> <li><a href="http://www.moobnn.com/" title="上市条件及流程">上市条件及流程</a></li> <li><a href="http://www.moobnn.com/" title="上市顾问">上市顾问</a></li> <li><a href="http://www.moobnn.com/" title="税收筹划">税收筹划</a></li> <li><a href="http://www.moobnn.com/" title="资产重组">资产重组</a></li> </ul> </li> <li class="s">|</li> <li class="m"> <h3><a target="_blank" href="Job.aspx" title="人才招聘">人才招聘</a></h3> </li> <li class="s">|</li> <li class="m"> <h3><a target="_blank" href="Contact.aspx" title="联系我们">联系我们</a></h3> </li> <li class="block" style="left: 251px;"></li> </ul> </div> <script type="text/javascript" src="js/SuperSlide.2.1.js"></script> <script src="js/zzsc.js" type="text/javascript"></script> <div style="text-align:center;margin:300px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p> <p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉