css / jquery中的移动(触摸)设备友好下拉菜单

我一直在阅读关于这个主题的许多话题,一个在移动设备上友好的下拉菜单.
很多时候,最好在下拉菜单中进行非悬浮动作.
解决方法,一个是下拉项目的主要超链接链接一个主题标签.

这使得它在移动设备上工作,但对于普通的桌面用户来说,这将是令人困惑的.
因此,解决方案是为桌面用户提供一个普通的下拉菜单,其中第一个链接链接一个页面.
对于移动用户,点击项目将打开下拉菜单,但是主菜单上的第二个点击将打开相应的页面.

我看到以下网站,不知何故他们的菜单完全如此:
http://www.hgtv.com/
您可以在平板电脑上查看此内容,然后点击主菜单,再次点按该项目,您将会知道我的意思.

但是,如何找到或下载与我自己的网站完全相似的设置?

提前致谢

解决方法

您将不得不处理多个事件以在移动和桌面浏览器中获得该功能.

如果您查看该示例菜单,您可以悬停展开,而在移动设备上,您需要点击/触摸才能展开.

尝试完成此操作的一种方法是让桌面的“悬停”侦听器使用“触摸”事件侦听器进行移动.

为此,您必须向jQuery添加一个自定义事件,例如“touch”.看到下面的帖子有一个办法:

How to recogized touch event using Jquery for ipad safari browser? Is it possible?

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效