开发者社区> 蓬莱仙羽> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

导航 Jquery

简介: 弹出下拉菜单插件弹出层相对于自身的父层
+关注继续查看

<!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>弹出下拉菜单插件弹出层相对于自身的父层 </title>
<meta name="keywords" content="下拉菜单代码,导航条代码,css导航菜单,导航菜单代码" />
<meta name="description" content="为您提供-下拉菜单代码,css导航菜单代码,导航条代码,下拉菜单和下拉菜单代码。" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var lr_systembtn = $("#lr_systembtn");
var lr_menu = $("#lr_menu");
lr_systembtn.mouseenter(function(){
  t_delay= setTimeout(function(){
   lr_menu.fadeIn("slow");
  },200);
});
lr_systembtn.mouseleave(function(){
  clearTimeout(t_delay);
  lr_menu.fadeOut("slow");
});

});
</script>
<style>
body{font-size:13px; font-family:"宋体"; color:#333333;}
a{text-decoration: none; color:#333333; font-size:13px; font-family:"宋体";white-space:nowrap; overflow:hidden;}
a:hover{color:#FB3822;}
body,dl,dt,dd{ padding:0px; margin:0px;}

#lr_systembox{ width:980px; height:50px; background-color:#CCC; position:relative; margin:0 auto; z-index:100000;}
.lr_systembtn{ width:201px; height:35px; line-height:33px;position:absolute; top:0px; right:0px; z-index:100004;}
.lr_systembtn .lr_abtn{ width:100%; height:35px; display:block; font-size:15px; font-weight:bold;color:#666666;
background-image: url(lr_images/btn_system.png);background-repeat:no-repeat;background-position:left top;}
.lr_systembtn .lr_abtn:hover{color:#333333;background-position:left bottom;}
.lr_systembtn .lr_abtn span{ padding-left:28px;}
.lr_menu{ width:184px; padding:8px 6px 8px 6px; background-color:#ffffff; border:#ACACAC solid 2px;filter:alpha(opacity=90);opacity: 0.90;
position:absolute; top:35px; right:0px;  z-index:100005;display:none;}
.lr_menu dl{width:100%; display:block; overflow:hidden;}
.lr_menu a{ width:100%;display:block; color:#666666;border-bottom:#ACACAC dashed 1px;height:30px; line-height:30px; font-size:14px;
background-image: url(lr_images/jt1.gif);background-repeat:no-repeat;background-position:6px center;}
.lr_menu a:hover{background-color:#E2E2E2; color:#333333; text-decoration:none;}
.lr_menu dt{}
.lr_menu dt a{font-weight:bold;text-indent:14px;}
.lr_menu dd a{text-indent:24px;background-position:16px center;}
</style>
</head>

<body>
<div id="lr_systembox">

    <div id="lr_systembtn" class="lr_systembtn">
        <a href="#" class="lr_abtn"><span>小未为您提供</span></a>
        <div id="lr_menu" class="lr_menu">
          <dl>
             <dt><a href="http://www.51xuediannao.com/js/" target="_blank">jquery特效</a></dt>
          </dl>
          <dl>
             <dt><a href="http://www.51xuediannao.com/js/nav/" target="_blank">导航菜单</a></dt>
             <dd><a href="#" target="_blank">三级菜单测试</a></dd>
             <dd><a href="#" target="_blank">三级菜单测试</a></dd>
          </dl>  
          <dl>
             <dt><a href="http://www.51xuediannao.com/js/slide/" target="_blank">焦点幻灯片</a></dt>
          </dl>
          <dl>
             <dt><a href="http://www.51xuediannao.com/js/texiao/" target="_blank">网页特效</a></dt>
          </dl>
          <dl>
             <dt><a href="http://www.51xuediannao.com/qqkefu/" target="_blank">qq在线客服代码</a></dt>
          </dl>  
          <dl>
             <dt><a href="http://www.51xuediannao.com/jquery_tanchu/" target="_blank">jquery弹出层</a></dt>
          </dl>      
        </div>
    </div>

</div>


</body>
</html>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Dynatable – 基于 HTML5 & jQuery 的交互表格插件
  Dynatable 一款有趣的,语义化,交互式的表格插件,使用 jQuery,HTML5 和 JSON 实现。Dynatable 的目的是提供一种简单的、可扩展的 API,能够轻松的浏览和操作大规模的数据集。
1227 0
【精心挑选】10款基于 jQuery 的图片360度旋转插件
  之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1062 0
jquery插件整理篇(七)表格插件
(1)Flexigrid Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
899 0
推荐18款非常棒的 jQuery 表格插件
  我们一般都是用HTML表格来显示结构化数据,如今有很多的 jQuery 表格插件可以帮助我们更好的组织和控制表格数据,增强表格的功能和操作。今天要与大家分享的是18个非常优秀的 jQuery 表格插件,有用到朋友可以参考一下。
1343 0
jquery插件 - 5个小插件
jQuery 最好的地方在于其方便的插件机制了,而且网上有很多人在贡献有用的插件,但是插件太多,不熟悉的朋友选择起来可能会比较费事。我觉得有必要开此一贴,收集大家一些常用的好插件,最好稍作点评,以供他人参考。
928 0
ASP.NET MVC结合jQuery插件进行数据验证
jQuery Validation是一个强大的数据验证插件,该插件支持“validation rule”即验证规则,规则将对表单内的输入控件进行控制或约束,譬如“本项必填”,“本项不能少于n个字符”,或者“这不是一个有效的email地址” 等等。
842 0
jquery插件 - 8个很有用的jQuery插件
jQuery虚拟键盘 非常适用于在公共场所输入密码,极高的用户体验。查看或下载插件。 在IE中显示文字阴影 查看教程 快速搜索 可以快速定位数据表格。下载插件。 滑动门 菜单动画以及华丽的滑动门效果。
677 0
jquery插件 - 表单插件
Jquery Form Plugin是jquery最重要的插件之一,它利用AJAX技术在不引起页面刷新的情况下POST表单。主要有两个方法:ajaxform和ajaxsubmit。它会自动收集表单元素内容,决定如何管理提交进程。
1102 0
+关注
蓬莱仙羽
麦子学院讲师,游戏蛮牛专栏作家,CSDN博客专家,热爱游戏开发,热爱Coding!
593
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载