Question

我对CSS中的整个响应式设计非常陌生。我刚刚制作了一个有效的响应式菜单，当我将浏览器窗口缩小时，它在我的电脑上工作正常，但是当我在手机上加载网站时，它只是缩小了，并且不会将菜单显示为响应式菜单。

我不知道为什么会这样，有人吗？我已将最大宽度设置为900px，因此如果窗口太短，我的菜单实际上会崩溃。

这是菜单的HTML：

<ul class="topnav" id="myTopnav">
            <li><a href="#">Fonder</a></li>
            <li><a href="#">Priser</a></li>
            <li><a href="#">Produkter</a></li>
            <li><a href="#">Frågor</a></li>
            <li><a href="#">Juridik</a></li>
            <li><a href="#">Om oss</a></li>
            <li><a href="#" class="active">Hem</a></li>
            <li class="icon">
                <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
            </li>
        </ul>

这是JS：

/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
    function myFunction() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
            x.className += " responsive";
        } else {
            x.className = "topnav";
        }
    }

这是响应式CSS：

@media screen and (max-width:900px) {
    ul.topnav li {display:none;}
    ul.topnav li.icon {
        float: right;
        display: inline-block;
        opacity: 1;
    }
}
@media screen and (max-width:900px) {
    ul.topnav.responsive {position:relative;}
    ul.topnav.responsive li.icon {
        position: absolute;
        right: 0;
        top: 0;
        background-color: none; 
        opacity: 1;
    }
    ul.topnav.responsive li {
        float: none;
        display: inline;
        position: relative;
        top: 32px;
    }
    ul.topnav.responsive li a {
        display: block;
        text-align: right;
        /*background-color: red;*/
    }
}

Answer 1

您可能需要在<meta>中添加<head>：

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

要了解如何正确使用此<meta>（您可以在content属性中添加更多值），您可以阅读本指南：
Using the viewport meta tag to control layout on mobile browsers

Answer 2

nvbar将与ajax库一起使用。确保页面中存在jquery。它易于设计并且与手机兼容。有关更多信息，请参考to interactive menu with optional sub-menus。

<nav role="navigation" id="wb-sm" data-ajax-replace="./ajax/sitemenu-en.html" data-trgt="mb-pnl" class="wb-menu visible-md visible-lg" typeof="SiteNavigationElement">
<div class="container nvbar">
<h2>Topics menu</h2>
<div class="row">
<ul class="list-inline menu">
<li><a href="./index-en.html">WET project</a></li>
<li><a href="./docs/start-en.html#implement">Implement WET</a></li>
<li><a href="./docs/start-en.html">Contribute to WET</a></li>
</ul>
</div>
</div>
</nav>

只需确保在页脚末尾添加以下内容即可。

</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="./wet-boew/js/wet-boew.min.js"></script>

Answer 3

您可以为响应式网站使用引导程序。它很容易实现。 http://getbootstrap.com/getting-started/

您也可以使用bootstrap创建菜单。点击以下链接

Bootstrap Menus

响应式菜单不适用于移动设备

3 个答案: