- 浏览: 63766 次
- 性别:
- 来自: 大连
-
文章分类
最新评论
/*--------------html代码-------------*/
<div id="navigation">
<div id="user-list" >
<div class="user">
<div id="tu1"></div>
<div id="username">张三</div>
<div id="time">2013-6-3</div>
</div>
<div id="user-list-bd" >
<li>
<a href="#">信息浏览</a>
</li>
<li>
<a href="#">信息修改</a>
</li>
<li>
<a href="#">密码修改</a>
</li>
<li>
<a href="#">退 出</a>
</li>
</div>
</div>
</div>
/*----------------css代码--------------------*/
#navigation{ width:220px; height:27px; background:url(../images/navigation.png) no-repeat;margin-left:-8px; padding-top:5px; margin-top:-10px;}
#user-list{position:absolute;width:135px; height:16px; margin-left:23px; margin-top:15px;}
.user{position:relative;width:153px; height:16px; margin-left:13px; margin-top:-15px; cursor:pointer; overflow:hidden;}
.user #tu1{ width:12px; height:7px; background:url(../images/tu1.png) no-repeat; margin-top:5px; overflow:hidden;}
.user #username{ font-family:"黑体"; font-size:14px; color:#FFFFFF; padding-left:20px; margin-top:-12px;}
.user #time{font-family:"黑体"; font-size:14px; color:#FFFFFF; margin-left:80px; margin-top:-16px;}
#user-list-bd{ background:#3366cc; position:relative;width:152px; height:100px; margin-top:6px; margin-left:10px; border-left:1px solid #999999;border-right:1px solid #999999;border-bottom:1px solid #999999;}
#user-list-bd li{ list-style:none;margin-top:5px;}
#user-list-bd li a:link,#user-list-bd li a:visited{ text-decoration:none; font-size:12px; color:#FFFFFF;margin-left:30px;}
#user-list-bd li a:hover{ text-decoration:underline; }
/*-------------------------jquery代码----------------------*/
$(document).ready(function(){
$("#user-list-bd").hide();
var lr_systembtn = $("#user-list");
var lr_menu = $("#user-list-bd");
lr_systembtn.mouseenter(function(){
t_delay= setTimeout(function(){
lr_menu.fadeIn();
},200);
});
lr_systembtn.mouseleave(function(){
clearTimeout(t_delay);
lr_menu.fadeOut();
});
});
<div id="navigation">
<div id="user-list" >
<div class="user">
<div id="tu1"></div>
<div id="username">张三</div>
<div id="time">2013-6-3</div>
</div>
<div id="user-list-bd" >
<li>
<a href="#">信息浏览</a>
</li>
<li>
<a href="#">信息修改</a>
</li>
<li>
<a href="#">密码修改</a>
</li>
<li>
<a href="#">退 出</a>
</li>
</div>
</div>
</div>
/*----------------css代码--------------------*/
#navigation{ width:220px; height:27px; background:url(../images/navigation.png) no-repeat;margin-left:-8px; padding-top:5px; margin-top:-10px;}
#user-list{position:absolute;width:135px; height:16px; margin-left:23px; margin-top:15px;}
.user{position:relative;width:153px; height:16px; margin-left:13px; margin-top:-15px; cursor:pointer; overflow:hidden;}
.user #tu1{ width:12px; height:7px; background:url(../images/tu1.png) no-repeat; margin-top:5px; overflow:hidden;}
.user #username{ font-family:"黑体"; font-size:14px; color:#FFFFFF; padding-left:20px; margin-top:-12px;}
.user #time{font-family:"黑体"; font-size:14px; color:#FFFFFF; margin-left:80px; margin-top:-16px;}
#user-list-bd{ background:#3366cc; position:relative;width:152px; height:100px; margin-top:6px; margin-left:10px; border-left:1px solid #999999;border-right:1px solid #999999;border-bottom:1px solid #999999;}
#user-list-bd li{ list-style:none;margin-top:5px;}
#user-list-bd li a:link,#user-list-bd li a:visited{ text-decoration:none; font-size:12px; color:#FFFFFF;margin-left:30px;}
#user-list-bd li a:hover{ text-decoration:underline; }
/*-------------------------jquery代码----------------------*/
$(document).ready(function(){
$("#user-list-bd").hide();
var lr_systembtn = $("#user-list");
var lr_menu = $("#user-list-bd");
lr_systembtn.mouseenter(function(){
t_delay= setTimeout(function(){
lr_menu.fadeIn();
},200);
});
lr_systembtn.mouseleave(function(){
clearTimeout(t_delay);
lr_menu.fadeOut();
});
});
发表评论
-
Jquery实现表格行的动态增加与删除
2014-05-29 08:45 1267<!DOCTYPE html PUBLIC " ... -
CSS3伪类选择器
2014-04-18 09:32 621CSS的伪类语法和别的语 ... -
Jquery实现选中左边的下拉菜单点击按钮之后跑右边
2014-04-15 14:34 1050script代码: <script type=" ... -
html之marquee详解
2014-03-28 10:07 649该标签不是HTML3.2的一部分,并且只支持MSIE3以后内核 ... -
Html中a标签的四个属性 link ,visited , hover ,active 是有顺序的! LVHA
2014-03-25 15:39 19211。html中a标签的四个属性书写是有顺序的,如果顺序不对,显 ... -
修改360浏览器内核
2014-03-10 17:19 1947浏览器内核控制Meta标签说明文档 背景介绍 由于众所周知 ... -
实现DIV层内的文字垂直居中
2014-03-07 14:03 771有时候,为了网页设计的美观,需要把div+css设计的页面里的 ... -
bootstrap时间控件
2014-03-06 13:27 1231<!DOCTYPE html PUBLIC " ... -
IE=EmulateIE7 标签的作用
2014-02-28 14:05 660对于 Web 开发人员来说 ... -
修改IE浏览器默认的文档模式
2014-02-28 13:26 1956开始运行输入C:\Windows\System32\gpedi ... -
网页制作中Iframe自适应高度的解决办法
2013-12-27 10:14 599进行网页设计时,由于网站的海量信息以及标准化的网页制作模式 ... -
Jquery获取当前屏幕的宽度、高度
2013-12-05 14:48 961<script type="text/java ... -
iframe,frameset区别
2013-12-05 10:24 579■ 框架概念 : 所谓框架便是网页画面分成几个框窗,同时取得 ... -
顶部浮动
2013-11-29 09:37 450<!DOCTYPE html PUBLIC " ... -
js+JQuery实现返回顶部功能
2013-11-18 11:05 552很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现 ... -
转 CSS hack:针对IE6,IE7,firefox显示不同效果
2013-09-05 13:55 1010CSS hack:针对IE6,IE7,firefox显示不同效 ... -
white-space:
2013-08-30 10:57 517定义和用法 white-space 属性设置如何处理元素内的空 ... -
通过css将直角矩形变为圆角矩形
2013-08-30 10:56 1248{border-radius:6px 6px 0 0} -
整合IE7与其他IE版本的兼容
2013-08-21 09:39 617<!--[if lte IE 7]> <d ... -
常见浏览器兼容性问题与解决方案css篇
2013-08-12 17:17 788所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同 ...
相关推荐
在网页设计中,交互性和用户体验是非常重要的因素,而下拉菜单是提高用户导航效率的常见设计元素。...通过学习和理解这个例子,你应该能够掌握创建jQuery鼠标悬浮滑动下拉二级菜单的方法,并能将其应用到自己的项目中。
总结来说,通过禁用默认的`click.bs.dropdown.data-api`事件并添加鼠标悬停事件处理,我们可以在Bootstrap的导航条上同时实现点击链接和鼠标悬停显示下拉菜单的功能。这样,用户既可以方便地访问链接,也能快速浏览...
在本例中,jQuery用于监听用户的鼠标经过事件,当鼠标悬停在特定的div元素上时,触发下拉菜单的显示或隐藏。 HTML的div元素是网页布局的基本构建块,它是一个通用容器,可以包含其他HTML元素。在这个例子中,div被...
前端界面进行设计时,我们会遇到鼠标悬浮在某选项上,然后就会凭空显示出菜单出来,这种设计的确受到了很多人的青睐。其实纯css也是可以实现的,但是会有一些限制,必须如要显示的菜单需要作为鼠标悬浮元素的子元素...
本资源“jquery鼠标悬停滑动下拉菜单代码.zip”提供了一种使用jQuery实现的蓝色风格下拉菜单解决方案,特别适用于那些希望增强用户体验的网站。 1. **jQuery简介**:jQuery是一个广泛使用的JavaScript库,它简化了...
在本例中,我们关注的是一个利用CSS3实现的特殊效果——鼠标悬浮时3D转动的二级下拉导航菜单动画。这种效果可以为用户界面增添互动性和视觉吸引力,使网站看起来更现代且专业。 首先,让我们详细了解一下CSS3中的...
在这个特定的场景中,我们面临一个需求,即当用户将鼠标悬停在ComboBox的下拉列表中的某一项时,该项的字体大小应实时变化。这涉及到事件处理和UI动态更新的技术。 首先,我们需要了解ComboBox的基本结构。ComboBox...
我用jquery曾经实现过鼠标点击 出现下拉菜单 有点和面包屑 和标签页导航类似 后来参加工作了 公司一直在用vue 所以很多用jqeury写的项目都要用vue来重构 这其中不免碰见了有一些动画效果 虽然很简单 我也曾想着就...
例如,使用`transition`属性可以实现平滑的过渡效果,使得菜单的出现和消失更加自然。 4. **延迟显示**:为了防止用户快速移动鼠标时频繁切换子菜单,我们可以设置一个短暂的延迟,只有当鼠标在菜单项上停留一定...
在UGUI中,实现鼠标悬停提示信息是一种常见的交互设计,可以提高用户体验,让用户更加直观地了解UI元素的功能或状态。 首先,要实现鼠标悬停提示信息,我们需要使用Unity中的`EventSystem`、`CanvasGroup`和`Text`...
jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单
`display:none`隐藏了默认状态下的下拉菜单,`display:block`则在鼠标悬停时显示下拉菜单。 ```css .ul { position: relative; } .ul li { height: 24px; line-height: 24px; border-bottom: 1px solid #ddd; ...
jquery导航栏样式鼠标悬停二级下拉菜单代码 jquery导航栏样式鼠标悬停二级下拉菜单代码 jquery导航栏样式鼠标悬停二级下拉菜单代码 jquery导航栏样式鼠标悬停二级下拉菜单代码
在CSS3菜单栏目中,我们分享了很多...今天我们要分享一款HTML5/CSS3悬浮的自定义Select下拉菜单,这个CSS3菜单利用CSS3特性可以浮动在网页上,并带有阴影效果,同时,展开下拉框时会弹出一个二级菜单,效果非常不错。
例如,当用户鼠标悬停在菜单按钮上时,可以通过应用`transition`属性来平滑地改变元素的样式,比如改变阴影效果、颜色或者大小。这里提到的“浮动”效果可能是通过设置`position`属性(如`relative`或`absolute`)和...
在网页设计中,导航菜单是用户与网站交互的重要部分,而使用JavaScript实现的鼠标滑过展开下拉菜单是一种常见的交互效果。这种效果可以提高用户体验,使用户更容易地浏览和访问网站的各个部分。本文将详细讲解如何...
下拉菜单通常通过绝对定位(`position: absolute`)相对于其父元素进行显示,以便在鼠标悬停时出现在正确的位置。 - **悬停样式**:通过CSS选择器(如`:hover`)改变鼠标悬停在菜单项上的样式,如改变背景色、字体...
在遮罩下拉导航中,jQuery主要用于监听用户的鼠标事件,如mouseover(鼠标悬浮)和click(点击),并根据这些事件触发相应的功能,如显示或隐藏下拉菜单。 响应式设计是现代网页设计的关键,确保网站在不同设备和...
"jQuery鼠标悬停缓慢下拉导航"是一种增强用户体验的交互设计技术,通过使用JavaScript库jQuery,当用户将鼠标指针悬停在主菜单上时,下拉子菜单会以平滑、缓慢的效果出现,提升网站的专业感和视觉吸引力。...