仿照百度百科的下拉效果
如图:
<!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> <title></title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <script type="text/javascript" src="jquery-1.6.4.js"></script> <script type="text/javascript" > </script> <style type="text/css"> *{ margin:0; padding:0; } body{ background:#F5F5F5; } .row{ background:#2B6BAC; } .nav{ width:800px; height:40px; margin-left:auto; margin-right:auto; } .menu{ float:left; line-height:40px; font-size:14px; margin-right:10px; font-weight:bold; color:white; cursor:pointer; width:100px; text-align:center; } .tip_dis{ } .hide_tip{ display:none; position:relative; top:0; left:0; border:1px solid #255B92; border-top:none; font-size:12px; } .hide_tip div{ color:#136ec2; font-weight:normal; text-align:center; } .over_cls{ background:#255C94; } </style> <script type="text/javascript"> $(document).ready(function(){ $(".menu").hover(function(){ $(this).children(".tip_dis").addClass("over_cls"); $(this).children(".hide_tip").show(); },function(){ $(this).children(".tip_dis").removeClass("over_cls"); $(this).children(".hide_tip").hide(); }); $(".hide_tip div").hover(function(){ $(this).css("text-decoration","underline"); },function(){ $(this).css("text-decoration","none"); }); }); </script> </head> <body> <div style="width:100%"> <div class="row"> <div class="nav"> <div class="menu"> <div class="tip_dis">首页</div> <div class="hide_tip"> <div>首页一</div> <div>首页二</div> <div>首页三</div> <div>首页四</div> </div> </div> <div class="menu"> <div class="tip_dis">手机百科</div> <div class="hide_tip"> <div>安卓</div> <div>苹果</div> </div> </div> <div class="menu"> <div class="tip_dis">校园百科</div> <div class="hide_tip"> <div>青春风铃</div> <div>故事会</div> <div>萌芽</div> </div> </div> <div class="menu"> <div class="tip_dis">校园百科</div> <div class="hide_tip"> <div>青春风铃</div> <div>故事会</div> <div>萌芽</div> </div> </div> <div class="menu"> <div class="tip_dis">校园百科</div> <div class="hide_tip"> <div>青春风铃</div> <div>故事会</div> <div>萌芽</div> </div> </div> </div> </div> </div> </body> </html>
相关推荐
纯CSS仿百度百科下拉菜单代码是一款鼠标悬停导航条显示全部下拉菜单代码。
蓝色风格CSS仿百度百科导航下拉菜单代码,纯CSS代码非常简单,鼠标悬停导航条显示全部二级下拉菜单代码。
纯CSS仿百度百科下拉菜单代码是一款鼠标悬停导航条显示全部下拉菜单代码。
jQuery仿百度百科右侧浮动菜单代码是一款页面下拉显示索引菜单,点击可直接跳转到相关信息位置。
CSS百度百科下拉导航菜单,鼠标经过一级菜单,下拉显示二级菜单。
html 仿百度百科导航下拉菜单功能,具体代码如下所示: 演示图1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <...
jQuery仿百度百科右侧浮动菜单特效是一款页面下拉显示索引菜单目录,点击可直接跳转到相关信息位置的js代码。
目录隐藏效果,如同下拉伸展菜单,仿百度百科,当我们把鼠标放到菜单右下角的小三角上,内容就会大幅展开,功能的确不错,不过看了看代码,实现起来有点复杂,不是太实用,实现这么一个功能,用了一大堆Js文件,还有...
脚本资源,Ajax/JavaScript,下拉菜单,目录隐藏 百度百科里的目录显示、隐藏效果,类似一种下拉延展菜单的效果,你只需把鼠标放到右下角的小三角上,内容就会大幅展开,功能的确不错,不过看了看代码,实现起来有点...
jQuery仿百度百科右侧浮动菜单代码是一款页面下拉显示索引菜单,点击可直接跳转到相关信息位置。
javascript实现的百度百科目录显示隐藏效果,可隐藏或下拉延展菜单
jQuery仿百度百科右侧浮动菜单代码是一款页面下拉显示索引菜单,点击可直接跳转到相关信息位置。
CSS百度百科下拉导航菜单,鼠标经过一级菜单,下拉显示二级菜单。
百度百科里的目录显示、隐藏效果,类似一种下拉延展菜单的效果,你只需把鼠标放到右下角的小三角上,内容就会大幅展开,功能的确不错,不过看了看代码,实现起来有点复杂,不是太实用,实现这么一个功能,用了一大堆...
jQuery实现的一款网页物资,网页内容或文章标题隐藏、显示的jquery特效,或者叫做目录显示隐藏...来自百度百科,不过百度好些对百科改版了,现在看不到这种效果了,不过做为热爱学习研究的你,可以研究一下实现的思路。
2、添加“文本_朗读”是否使用百度语音引擎参数,为空时默认使用微软语音引擎。 3、改善“文本_加密”与“文本_解密”去除原来算法,改用微软基础加解密API。 4、修复“网页_打印”,无效的BUG,感谢易友【@nameyypx...