css - 智能手机上的 HTML 菜单行为

标签 css html responsive-design

目前正在尝试使网站响应智能手机和平板电脑。我在网站的菜单上遇到了一些麻烦。菜单基本上是一个像这样的无序列表:

<ul class="navigation">
    <li><a href="page1.html">Page1</a></li>
    <li><a href="page2.html">Page2</a></li>
    <li>
        <a href="page3.html">Page3</a>
        <!-- Dropdown menu -->
        <ul class="subnav">
            <li><a href="page4.html">Page4</a></li>
        </ul>
    </li>      
</ul>

内部无序列表是一个下拉菜单,当用户将鼠标悬停在 page3.html 链接上时出现。

在手机和平​​板电脑上,我希望菜单像 Accordion 一样,所以当用户触摸 page3.html 链接时,subnav 列表出现并插入另一个列表项下来。我通过简单地将下拉列表设置为固定位置而不是 position:absolute; 使其在桌面上工作但是,在移动设备和平板电脑上,触摸 page3.html仍将用作链接,因此用户当然会被重定向到 page3.html 而不是触发 subnav 列表。

有什么方法可以在用户第一次触摸链接时不触发链接而触发子导航列表? :-) 我正在尝试为此寻求一个仅使用 CSS 的解决方案,但如果需要 JS,我会很乐意使用它。

提前致谢!

最佳答案

有一个用 jQuery 编写的 Wordpress 插件 ( Black Studio Touch Dropdown Menu ) 几乎可以满足您的需求。可以看看源码here并修改为独立于 Wordpress(如果这不是您正在使用的)。它主要检查设备是否是触摸屏设备,如果是,当您单击下拉菜单的父项时,它会展开它而不是单击链接。下一次,它会真正点击链接。

关于css - 智能手机上的 HTML 菜单行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14589723/

相关文章:

css - 如何让div的 "automise"宽度适配屏幕大小?

html - 表格宽度不能设置为 385 像素以下和响应问题

css - 带@font-face 的 Sass 占位符

javascript - 单击后保持 jquery .addClass 处于事件状态,如果我不按住鼠标,我的 div 就会恢复

javascript - 在 html 文本框或输入框中键入卡纳达语

php - 当文本等于单选按钮的值时选择单选按钮

javascript - 滚动后 jquery 动画的长时间延迟

html - 为什么这段代码不能设置从主要内容到底部的背景颜色

javascript - 为什么 "element.innerHTML+="是错误代码?

html - 使网站规模化而不是响应式