Tip和菜单有类似的功能,即鼠标光标移上去的时候显示指定元素,鼠标光标离开的时候隐藏该元素。如下

示例1:下拉菜单(鼠标移动到“客户服务”上时出现,离开则隐藏)

示例2:水平菜单(鼠标移动到“餐饮美食”出现,离开则隐藏)

示例3:Tip示例(鼠标移动到“更换”出现,离开则隐藏)

从交互角度讲很简单,移上去显示,离开隐藏。代码则是两个事件mouseentermouseleave。但有个细节,如果触发元素(比如上面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事件。

  1. div#city触发mouseenter时,显示div.citys
  2. div#city触发mouseleave时,延迟隐藏div.citys,用一个标示boo变量记录是否该隐藏
  3. div.citys触发mouseenter时,boo标示为false,表示不隐藏
  4. div.citys触发mouseleave时,boo标示为true,表示可以隐藏

三、同二类似,也是延迟一段时间隐藏,当触发div.citys的mouseenter时移除div#city的mouseenter事件,div.citys的mouseleave事件触发时再重新添加上

Tip和菜单的实现方式的更多相关文章

  1. JQuery 纵向二级菜单与对齐方式

    1.效果: 2.代码: style部分: <style type="text/css"> /* ul{margin: 0; padding: 0;}*/ ul{list ...

  2. Android三种菜单的使用方式

    一.选项菜单(OptionMenu) 在res目录下新建menu目录,用于放置菜单布局文件(右键res->new->Android Resource Directory->menu) ...

  3. python实现应用程序在右键菜单中添加打开方式

    最近项目组开发的一个小工具想要在右键菜单中添加打开方式,以有道云笔记为例进行了需求拆解和代码编写 1.需求拆解: 如何实现手动添加右键菜单的打开方式: Step1:打开注册表编辑器,Win+R-> ...

  4. Android ListView两种长按弹出菜单方式

    转自:http://www.cnblogs.com/yejiurui/p/3247527.html package com.wyl.download_demo; import java.util.Ar ...

  5. C#开发微信门户及应用(29)--微信个性化菜单的实现

    有一段时间没有接着微信的主题继续介绍里面的功能模块了,这段时间来,微信也做了不少的变化改动,针对这些特性我全面核对了一下相关的微信公众号和企业号的接口,对原有的微信API和系统管理做了全面的更新,本随 ...

  6. SharePoint 2013 操作文档库ECB菜单

    在SharePoint的使用中,我们经常需要定制SharePoint的一系列菜单,这里就包括ECB菜单,下面,我们简单了解一下ECB菜单如何定制,以及原理. 1.正常情况文档库的ECB菜单如下图: 2 ...

  7. DragLayout: QQ5.0侧拉菜单的新特效

    一.项目概要 1.1 项目效果如图: 1.2 需要使用到的技术   ViewDragHelper: 要实现和QQ5.0侧滑的特效,需要借助谷歌在2013年I/O大会上发布的ViewDragHelper ...

  8. SharePoint 2013:自定义ECB菜单项的添加

    本文分别介绍了两种常用的添加ECB菜单项的方式. 声明式创建 这也是微软最佳实践推荐的方式.在VS中创建一个SharePoint空解决方案,并添加一个“空元素”类型的SPI. 在Elements.xm ...

  9. Delphi中window消息截获的实现方式(1)

    近来笔者在一个项目中需要实现一个功能:模仿弹出菜单的隐藏方式,即鼠标在窗口的非PanelA区域点击时,使得PanelA隐藏.   经过思考,笔者想到通过处理鼠标的点击事件来实现相应功能.但是,究竟由谁 ...

随机推荐

  1. Java的final关键字详解

    Java中的final关键字非常重要,它可以应用于类.方法以及变量.这篇文章中我将带你看看什么是final关键字?将变量,方法和类声明为final代表了什么?使用final的好处是什么?最后也有一些使 ...

  2. 个人信息管理PIM——密码管理工具软件

    密码管理工具 以KeePass为主,结合LastPass在线浏览器网页密码.有钱银可以考虑1Password. KeePass LastPass 1Password 价格费用 免费开源 普通版:免费 ...

  3. 重新想象 Windows 8.1 Store Apps (84) - 图像处理的新特性, Share Contract 的新特性

    [源码下载] 重新想象 Windows 8.1 Store Apps (84) - 图像处理的新特性, Share Contract 的新特性 作者:webabcd 介绍重新想象 Windows 8. ...

  4. Laravel Predis Error while reading line from the server.

    问题 Laravel说明文档中的 Redis 发布与订阅案例,命令行运行php artisan redis:subscribe 到60s自动断开并报错 [Predis\Connection\Conne ...

  5. Metronic 使用到的开源插件汇总

    Metronic 是一套完整的 UI 模板,但不仅仅是模板,更应该说是一个 UI 框架.它除了提供了大量网页模板,也提供了非常多的 UI 组件,并且应用了众多 jQuery 插件.通过这些资源的整合, ...

  6. android MVP模式介绍与实战

    android MVP模式介绍与实战 描述 MVP模式是什么?MVP 是从经典的模式MVC演变而来,它们的基本思想有相通的地方:Controller/Presenter负责逻辑的处理,Model提供数 ...

  7. (六)play之yabe项目【验证码】

    (六)play之yabe项目[验证码] 博客分类: 框架@play framework   添加验证码功能 在Application.java中添加一个action:captcha() /** * 添 ...

  8. swift学习笔记之-枚举

    //枚举定义 import UIKit //枚举定义 (枚举.结构体.类的名字首字母必须大写,表示为定义了新的类型) /*枚举为一组相关的值定义了一个共同的类型,使你可以在你的代码中以类型安全的方式来 ...

  9. EntityFramework4.1开发

    常见问题大概为这几个 一.ef4.1 codeFirst 修改表结构 增加字段等 EF code first需要重新生成库导致数据丢失的问题. 二.ef4.1 没有了edmx等复杂的东西 变得简单 干 ...

  10. 关于oracle-12514错误的修改方法

    原因1: 打开文件"<OracleHome>/network/admin/listener.ora",添加 (SID_DESC =         (GLOBAL_DB ...