jquery随便小特效之常见网站顶部导航栏

最新推荐文章于 2017-12-06 21:22:12 发布
最新推荐文章于 2017-12-06 21:22:12 发布
阅读量348 收藏
点赞数
分类专栏： js 前端网页优化 html5 前端 文章标签： js web前端 jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/viser123/article/details/50980057
版权



这个效果就是默认只有几个主导航，当鼠标移上去时会缓缓弹出主导航里面菜单


<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>daihan</title>
<link rel="stylesheet" href="index.css">
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<div class="mo">


</div>
<div class="border">
<ul class="list">
<li>
<a href="javascript:void(0);">呵呵呵呵</a>
<div class="detial_list">
<ul>
<li>heheheheh</li>
<li>heheheh</li>
<li>hehehhehe</li>
<li>hehhhehe</li>
</ul>
</div>
</li>
<li>
<a href="javascript:void(0);">呵呵呵呵</a>
<div class="detial_list">
<ul>
<li>heheheheh</li>
<li>heheheh</li>
<li>hehehhehe</li>
<li>hehhhehe</li>
</ul>
</div>
</li>
<li>
<a href="javascript:void(0);">呵呵呵呵</a>
<div class="detial_list">
<ul>
<li>heheheheh</li>
<li>heheheh</li>
<li>hehehhehe</li>
<li>hehhhehe</li>
</ul>
</div>
</li>
<li>
<a href="javascript:void(0);">呵呵呵呵</a>
<div class="detial_list">
<ul>
<li>heheheheh</li>
<li>heheheh</li>
<li>hehehhehe</li>
<li>hehhhehe</li>
</ul>
</div>
</li>
<li>
<a href="javascript:void(0);">呵呵呵呵</a>
<div class="detial_list">
<ul>
<li>heheheheh</li>
<li>heheheh</li>
<li>hehehhehe</li>
<li>hehhhehe</li>
</ul>
</div>
</li>
<li>
<a href="javascript:void(0);">呵呵呵呵</a>
<div class="detial_list">
<ul>
<li>heheheheh</li>
<li>heheheh</li>
<li>hehehhehe</li>
<li>hehhhehe</li>
</ul>
</div>
</li>
<li>
<a href="javascript:void(0);">呵呵呵呵</a>
<div class="detial_list">
<ul>
<li>heheheheh</li>
<li>heheheh</li>
<li>hehehhehe</li>
<li>hehhhehe</li>
</ul>
</div>
</li>
</ul>
</div>
<script>
$(document).ready(function(){
$(".border").hover(function(){
event.preventDefault();
$(".mo").show().animate({height:"370px"});
$(".detial_list").show().animate({height:"250"},1500);
$(".list > li >a ,.detial_list > ul > li").css("color","#ffffff")
},function(){
$(".mo").animate({height:"60px"},800,'swing',function(){
$(".mo").hide();
});
$(".detial_list").animate({height:"0"},800,'swing',function(){
$(".detial_list").hide();
});
$(".list > li >a ,.detial_list > ul > li").css("color","#999")
});
$(".detial_list ul li").hover(function(){
$(this).css("color","red")
},function(){
$(this).css("color","#ffffff")
})
})
</script>
</body>
</html>
viser123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
仿美丽说按下效果的顶部导航栏
04-24
两天前发表一篇仿“美丽说”底部具有滑动效果的导航栏，觉得很有趣味，于是今天写了个PressNavigationBar组件。PressNavigationBar组件通过美化可以实现“美丽说”具有按下效果的顶部导航栏，详情可以看博客http://blog.csdn.net/swadair/article/details/7494395 当然这套代码中也提供了仿美丽说具有滑动效果的底部导航栏，在权限xml更改启动Activity就可以看到效果，详见博客http://blog.csdn.net/swadair/article/details/7487520。
jQuery制作顶部浮动导航菜单定位特效加选中当前栏目
11-02
jQuery制作顶部浮动导航菜单锚点导航，滑动到当前板块选中导航选中显示
jQuery 代码正常的导航栏
gong1422425666的博客
05-23 297
github代码正常的导航栏 *{ margin: 0; padding: 0; } .nav{ width: 960px; heig
01_链式操作_导航栏
佛陀在coding
09-02 97
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" conten
jQuery制作的网页菜单导航
一个程序员-二白的博客
12-06 2871
html:     pageEncoding="utf-8"%> 菜单制作 body { background:#FCDFE2; } #main_menu { list-style:none; } .li { border-bottom:solid; border-bottom-width:0.5px; border-bottom-co
jQuery网站顶部固定阅读进度条导航栏特效.zip
09-21
有兴趣刚需的可以自己下载，非常实用的jquery代码，可以完美运行，有能力的还可以二次修改！
jQuery顶部导航栏下拉菜单特效代码
03-20
jQuery顶部导航栏下拉菜单，鼠标经过，显示下拉菜单，排版精致。
基于jQuery实现顶部导航栏功能
10-20
主要为大家详细介绍了基于jQuery实现顶部导航栏功能，jQuery三级下拉列表导航菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery网站顶部宽屏导航栏和焦点图轮播特效.zip
最新发布
09-26
有兴趣刚需的可以自己下载，非常实用的特效代码，可以完美运行，有能力的还可以二次修改！
jQuery网站后台左侧导航栏特效.zip
09-23
有兴趣刚需的可以自己下载，非常实用的jquery代码，可以完美运行，有能力的还可以二次修改！
页面向下滑动实现div显示和隐藏
viser123的博客
04-19 9343
Title heheh $(document).ready(function(){ var min_height = 100; $(window).scroll(function(){ var s =$(window).scrollTop(); if(s > min_height){ $("#div").show() }else{ $("#div").hi
AJAX+PHP+MYSQL实现登录页面
viser123的博客
04-19 2622
前端页面         ajax提交数据                     * {             margin: 0;             padding: 0;             box-sizing: border-box;         }         .box {             widt
jquery随笔小特效之唯品会顶部菜单栏
viser123的博客
03-27 1515
我感觉代码还是有点繁琐，应该可以跟简便一点的                           vip导航效果 * { margin: 0; padding: 0; box-sizing: border-box; list-style: none; } .nav { width: 660px; height:30px; ba
js实现敏感字查询
viser123的博客
11-15 875
DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> title>敏感字查询title> script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js">/script> script src="lodash.min.js">/script> scr
jquery实现左右列表项跳跃
viser123的博客
05-31 438
这是有中间按钮的 Title body , ul , li , div { margin: 0; padding:0; box-sizing: border-box; } body div { width: 100px; height: 200px; border: 1px solid #666666; margin: 5% 2%; floa
viser_1
viser123的博客
08-11 408
这段时间忙了很多东西，差不多也知道一个完整的模块的上线的一些从数据收集到开发的种种，学到了很多实际的东西，中间走的很多弯路就是因为前期的准备工作不够充分，只是拿到项目就急着做好，到最后就会全神贯注的推翻之前的东西，在前端开发的时候分析需求才是最重要的，其实一些效果或者页面的数据交互花费的时间和精力其实不多，最后改的时候才是崩溃的，今年下半年的目标就是好好看下node.js，毕竟如果一点点后端都不懂
jquery模拟九宫格抽检
viser123的博客
05-31 391
模拟九宫格抽奖 var prize = ["谢谢参与", "iPad", "谢谢参与", "球鞋男鞋", "娃娃", "三星手机", "谢谢参与", "苹果耳机", "谢谢参
css3 + jquery模拟时钟效果
viser123的博客
05-31 349
干货 模拟时钟 body, div { margin: 0; padding: 0; box-sizing: border-box; } .box { width: 300px; height: 300px; margin: 120px auto; background: url("images/20213d50b825d729db533ff8fb
【JSP】导航栏悬停顶部简单特效
06-10
关于导航栏悬停顶部简单特效，我这里提供一种基于 JSP 技术实现的方法： 1. 首先，在 JSP 页面中引入 jQuery 库，可以使用以下代码： ``` <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"> ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值