html - 移动兼容下拉菜单

  显示原文与译文双语对照的内容
0 0

我有以下代码,我在 NOT 中进行了移动兼容。 现在下拉菜单没有出来,它直接指向链接。 我不会在第二次点击时转到链接,第一次点击下拉菜单出来。


<ul>
 <li><a href="#">Home</a></li>
 <li>
 <a href="#">Item 1</a>
 <ul>
 <li href="#"><a>Compositions</a></li>
 <li href="#"><a>Improv</a></li>
 <li href="#"><a>Recitals</a></li>
 <li href="#"><a>Videos</a></li>
 </ul>
 </li>
 <li href="#"><a>Programming</a></li>
 <li href="#"><a>Academic</a></li>
 <br class="clear"/>
</ul>

css:


#topnav ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 background-color: #444;
 border-radius: 0.3em;
 color: #ddd;
 font-size: 16px;
 vertical-align: middle;
 text-align: center;
}
#topnav ul li {
 border-radius: 0.2em;
 float: left;
}
#topnav ul li a {
 display: inline-block;
 margin: 0.4em 1em;
 color: inherit;
}
#topnav ul li ul {
 border-top-left-radius: 0;
 border-top-right-radius: 0;
 display: none;
 position: absolute;
}
#topnav ul li ul li {
 float: none;
 text-align: left;
}
#topnav ul li:hover ul, #topnav ul li ul:hover {
 display: block;
}
#topnav li:hover {
 background-color: #04f;
}

时间: 原作者:

0 0

如果你想使用纯javascript和css进行这里操作,那么你需要做的就是:

覆盖整个导航中的touchstart和touchend事件


navigation.addEventListener("touchend", function (e) {
 e.preventDefault();
//other code here
}, false);

在这一点上,你必须添加代码来打开导航。 注意,导航中的任何链接都不能在此时起作用。

处理每个链接点击( 或者第二个链接单击导航主项目) 使用javascript并使用


window.location.href = link.url;

导航throw页。

我希望这有助于帮助,即使它不太多。 如果有任何帮助,你也可以检查已经制作的库。 最后一个提示:在下拉菜单上检查最新的iOS默认行为,并尝试在其中模拟功能。 祝你好运 !

原作者:
...