Question

我已在CodeIgnitor上开发的博客中添加了响应菜单。仅供参考，其他人创建了此博客。一切正常，但在单击图标以展开菜单时，菜单无法在移动设备中展开。

public class MyModel
{
    public int spi_id { get; set; }
    public int s_id { get; set; }
    public int st_id { get; set; }
   }

@model IEnumerable<MyModel>

<form action="@Url.Action("Save", "Home")" method="post">

<table class="table" id="tblIe">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.s_id)
        </th>

    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.s_id)
            </td>

        </tr>
    }

</table>
<input type="submit" name="send" value="Send" id="btnSend" />

<script type="text/javascript">
$(document).ready(function () {
 $("#btnSend").click(function (e) {
    alert("button click");
    e.preventDefault();

    var model = @Html.Raw(Json.Encode(Model))
    $.ajax({
        type: 'post',
        url: '@Url.Action("Save", "Home")',
        data: JSON.stringify({ myModel: model }),
        contentType: 'application/json; charset=utf-8',
        dataType: "json",
        success: function (data) {
            alert(data);
        }
    });
    });
});

</script>

我已经使用了w3schools教程来添加响应菜单。 Link to w3schools tutorial。您还可以查看实时网站here。

Answer 1

它可以工作，但是.navMenuCustom有overflow: hidden，所以您看不到它。

快速解决方案是将overflow: visible添加到.navMenuCustom.responsive。但是您仍然看不到任何东西，因为这些项目具有透明的背景和浅色的字体颜色。您还必须将background-color设置为.navMenuCustom.responsive a。最后一个问题是标题图像将出现在导航上方。您可以通过删除其元素的所有position: relative属性（我算出其中的三个：{{1}，#banner-home和#slideshow-main-homepage）来解决此问题，但是我不确定是否不能破坏其他任何东西。您必须对其进行一点测试。

Answer 2

菜单不起作用的原因是因为您有“溢出：隐藏”。隐藏的溢出会导致其他元素无法显示，这是因为它们将显示在父div的下方。如果页面的大小与移动设备相同，则必须删除“溢出：隐藏”，以便其他菜单项可以显示。

@media only screen and (max-width: 600px){
   .navMenuCustom {
      overflow: auto;
   }
}

我还将为a属性设置背景色。

.navMenuCustom a {
   background-color: #444;
}

剩下的唯一问题是图像的z索引比菜单项高，因此它将显示在图像上方。您可以使用以下代码解决此问题：

在要显示在顶部的元素上添加更高的索引。

#nav {
   z-index: 10
}

#slideshow-main-homepage div img {
    z-index: 9;
}

Answer 3

这是因为您在#nav中用！important声明了height，所以建议删除它或使用下面的代码。

@media screen and (max-width: 600px) {
  #nav {
    height: auto !important;
 }
}

响应式移动菜单未扩展

3 个答案: