Question

我的菜单在移动视图中无法正常工作。

如何修复菜单的响应式视图？

这是小提琴中的代码示例。

<div class="menu">
<ul id="sf-menu">          
    <li class="current">
        <a href="#" id="menu_admin_viewAdminModule" class="firstLevelMenu">
            <b>Dashboard</b>
        </a>
    </li>
    <li>
        <span id="separator_level1"><b> | </b> </span>
    </li>           `enter code here`
    <li>
        <a href="#" id="menu_pim_viewPimModule" class="firstLevelMenu">
           <b>New Service</b>
        </a>
    </li>
    <li>
        <span id="separator_level1"><b> | </b> </span>
    </li>       
</div>

Answer 1

添加这是你的css：

@media screen and (max-width: 480px) {
    .menu{height: auto;}
    .menu > ul > li > ul > li , .menu > ul , .menu > ul > li   {float: none;margin: 0;}
    .menu > ul > li > a{border-radius: 0;}
    .menu > ul > li > ul > li:nth-child(even) , .menu > ul > li:nth-child(even){display: none;}
    .menu > ul > li > ul{width: 100%;height: auto;;padding: 5px 0;}
}

Answer 2

好友，请记住以下内容，不仅要在移动设备中显示导航（菜单），还要在移动设备中完美地放置任何元素，您应该记住以下内容。

1）您的网站应该专注于在移动设备上首先应用样式 2）然后你的风格应该完美设置，考虑到移动设备的宽度。

<强>步骤1：
显示移动第一布局只是为了避免更多的http请求！只需将以下行添加到头部

<meta name="viewport" content="width=device-width, initial-scale=1">

这将使移动设备将页面显示为总宽度
Please check here for more details

注意：这将使我们的移动样式导航（菜单）更容易。

<强>步骤-2：
在＆＃39;步骤1＆＃39;之后，您应该加载完美的样式表以在移动设备上显示完美导航，您应该使用

@media (query) {
  /* CSS Rules used when query matches */
}

实施例

@media (min-width: 500px) and (max-width: 600px) {
(This tells us to apply style when viewport width falls between 500px & 600px)
            h1 {
              color: fuchsia;
            }
    }

请仔细阅读以下链接以获取进一步指导。采用专门针对手机的菜单导航。

Simple Mobile navigation
Mobile menu design guide
Some menu designs to tweak in

免责声明： 由于答案需要更多解释，我会指示您链接，如果您有任何问题，请在此处删除！我们会帮忙的！

如何使html菜单在移动设备上变得响应？

2 个答案: