Tip和菜单的实现方式
Tip和菜单有类似的功能,即鼠标光标移上去的时候显示指定元素,鼠标光标离开的时候隐藏该元素。如下
示例1:下拉菜单(鼠标移动到“客户服务”上时出现,离开则隐藏)
示例2:水平菜单(鼠标移动到“餐饮美食”出现,离开则隐藏)
示例3:Tip示例(鼠标移动到“更换”出现,离开则隐藏)
从交互角度讲很简单,移上去显示,离开隐藏。代码则是两个事件mouseenter,mouseleave。但有个细节,如果触发元素(比如上面Tip里的“更换”),不包含下面显示的城市列表div的话,鼠标光标离开时就隐藏了,但用户其实是想移动到城市列表里去选另外一个城市。
通常有如下三种实现方式
一、触发元素把后显示的元素包含进来,一般菜单都是这么实现的。因为每个菜单的内容都不一样,这种结构是合理的。这种结构不会出现鼠标移动不到菜单里的情况。如示例1的HTML结构
线上示例:http://snandy.github.io/lib/menu/menu.html
二、触发元素不包含后显示元素,即两者可能是平级的(兄弟元素)。这种结构会出现鼠标移动不到显示元素上。JS需要做些特殊处理。如示例3的HTML结构
线上示例:http://snandy.github.io/lib/menu/tip.html
这种不包含结构往往用在很多相同元素的tip上,这时只要用一个显示元素,不必每个里面都包含相同HTML代码。实现时须注意,div#city和div.citys都要添加mouseenter和mouseleave事件。
- div#city触发mouseenter时,显示div.citys
- div#city触发mouseleave时,延迟隐藏div.citys,用一个标示boo变量记录是否该隐藏
- div.citys触发mouseenter时,boo标示为false,表示不隐藏
- div.citys触发mouseleave时,boo标示为true,表示可以隐藏
三、同二类似,也是延迟一段时间隐藏,当触发div.citys的mouseenter时移除div#city的mouseenter事件,div.citys的mouseleave事件触发时再重新添加上
Tip和菜单的实现方式的更多相关文章
- JQuery 纵向二级菜单与对齐方式
1.效果: 2.代码: style部分: <style type="text/css"> /* ul{margin: 0; padding: 0;}*/ ul{list ...
- Android三种菜单的使用方式
一.选项菜单(OptionMenu) 在res目录下新建menu目录,用于放置菜单布局文件(右键res->new->Android Resource Directory->menu) ...
- python实现应用程序在右键菜单中添加打开方式
最近项目组开发的一个小工具想要在右键菜单中添加打开方式,以有道云笔记为例进行了需求拆解和代码编写 1.需求拆解: 如何实现手动添加右键菜单的打开方式: Step1:打开注册表编辑器,Win+R-> ...
- Android ListView两种长按弹出菜单方式
转自:http://www.cnblogs.com/yejiurui/p/3247527.html package com.wyl.download_demo; import java.util.Ar ...
- C#开发微信门户及应用(29)--微信个性化菜单的实现
有一段时间没有接着微信的主题继续介绍里面的功能模块了,这段时间来,微信也做了不少的变化改动,针对这些特性我全面核对了一下相关的微信公众号和企业号的接口,对原有的微信API和系统管理做了全面的更新,本随 ...
- SharePoint 2013 操作文档库ECB菜单
在SharePoint的使用中,我们经常需要定制SharePoint的一系列菜单,这里就包括ECB菜单,下面,我们简单了解一下ECB菜单如何定制,以及原理. 1.正常情况文档库的ECB菜单如下图: 2 ...
- DragLayout: QQ5.0侧拉菜单的新特效
一.项目概要 1.1 项目效果如图: 1.2 需要使用到的技术 ViewDragHelper: 要实现和QQ5.0侧滑的特效,需要借助谷歌在2013年I/O大会上发布的ViewDragHelper ...
- SharePoint 2013:自定义ECB菜单项的添加
本文分别介绍了两种常用的添加ECB菜单项的方式. 声明式创建 这也是微软最佳实践推荐的方式.在VS中创建一个SharePoint空解决方案,并添加一个“空元素”类型的SPI. 在Elements.xm ...
- Delphi中window消息截获的实现方式(1)
近来笔者在一个项目中需要实现一个功能:模仿弹出菜单的隐藏方式,即鼠标在窗口的非PanelA区域点击时,使得PanelA隐藏. 经过思考,笔者想到通过处理鼠标的点击事件来实现相应功能.但是,究竟由谁 ...
随机推荐
- jqGrid动态列
HTML代码: <div id="divList"> <div class="toolbar"> </div> <ta ...
- C#开发的高性能EXCEL导入、导出工具DataPie(支持MSSQL、ORACLE、ACCESS,附源码下载地址)[转]
转自:http://www.cnblogs.com/yfl8910/archive/2012/05/19/2509194.html 作为财务数据核算人员,面对大量的业务与财务数据,借助于传统的EXCE ...
- 动态生成RDLC报表
前段时间,做了RDLC报表,主要是三块功能: 1.从DataGrid提取(包括最新的增删改)的数据,自动生成对应的RDLC报表文件(以流的形式驻存在内存中),用ReportViewer类来展示.打印. ...
- Win7下安装依赖lxml的python插件
博主python菜鸟,本想在win7下安装一个pyquery玩玩爬虫,折腾了好几天终于搞好了,发现python这坑不是一般的深啊. 有一部分没有截图,请谅解 python版本3.4 1.下载easy_ ...
- 清除浮动after
.clearf{display: inline-block;} .clearf:after { content: "."; display: block; height:; cle ...
- NYOJ 42 一笔画问题
一笔画问题 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 zyc从小就比较喜欢玩一些小游戏,其中就包括画一笔画,他想请你帮他写一个程序,判断一个图是否能够用一笔画下 ...
- Android SDK Tools和Android SDK Platform-tools
SDK Platform 可以理解为版本,因此有 SDK Platform 7,SDK Platform 8等等Android SDK Tools 是各个版本都可通用的工具文件夹,里面有draw9pa ...
- 照着别人的demo自己试着做了个放大镜效果
原理: A:放大镜 B:小图片 C:大图片可视区域 D:大图片 鼠标的位置应该在放大镜的中央,所以鼠标位置为:clientX=A.offsetLeft()+B.offsetLeft+1/2*A.o ...
- margin:0 auto;不能居中的原因
原因: 1.没有设置本身元素和父元素的宽度 2.本身元素使用了绝对定位和浮动 2.没声明DOCTYPE
- ArcGIS快捷键导出
在以前的文章中说过怎样恢复ArcGIS默认界面.今天同事的电脑用ArcMap打开数据后,移动或缩放数据时莫名的闪动. 于是使用排除法来查找原因:(1)先以为是数据的原因,换个数据还是有问题:(2)后以 ...