iphone/平板电脑的HTML导航菜单

HTML Navigation Menu for iphone/tablets

本文关键字：导航 菜单 HTML 平板电脑 iphone      更新时间：2023-09-26

我正在尝试创建一个可以在移动设备或较小的设备上使用的菜单，因为ul菜单在分辨率较低的设备上离开屏幕。下面是我试图使用的代码，但由于某种原因它不工作。下拉框工作正常，但点击选项不起作用。

首先是HTML: 
<select> 
            <option value="" selected="selected">Select</option> 
            <option value="index.html">Home</option> 
            <option value="about.html">About Us</option> 
            <option value="testimonials.html">Testimonials</option> 
            <option value="events.html">Events</option> 
            <option value="contracts.html">Contracts</option> 
            <option value="faq.html">F.A.Q.</option> 
            <option value="contact.html">Contact Us</option> 
</select>

现在，JS.

<script>$("select").change(function() {
window.location = $(this).find("option:selected").val();
});</script>

现在，CSS在普通浏览器上隐藏它，但在小型设备上显示它。

select
  {
  display:none;
  }
@media (max-width: 480px) {
  nav  { display: none; }
  select { display: inline-block; }
  }

我一遍又一遍地检查我的代码，但我似乎不能让它工作。有人有什么想法吗?

iPhone/Android浏览器支持CSS @media手持吗?

参考CSS中的媒体查询问题。您还可以选择使用Jquery来获取屏幕大小，并在UI级别反映更改。

检查iphone和平板电脑对CSS3媒体查询的兼容性

hmhcreative发布的Jsfiddle链接正在工作。
相关文章：