Question

我有一个网站，该网站集中了html菜单，因此不必在每个页面上都重复它。在我的桌面上可以正常工作，但移动网站仅显示汉堡图标，而没有菜单项。

如果我只是在每个页面上都包含菜单html代码，则一切正常。但是，由于我有70多个页面，因此我确实需要集中并重新使用菜单代码。

我已经设置了___ nav.js来从__nav.html文件中加载html（所有代码均由本网站提供！-感谢所有贡献者）。下面，我尝试仅显示相关部分，因此我们可以集中精力于相关代码。如果我错过了重要事项，请告诉我，我会对其进行更新。

我是整个JavaScript / html领域的新手，因此，我们将不胜感激。

如果合适的话，我也很高兴考虑采用另一种完全不同的方法。

谢谢。

___ nav.js代码（摘自该网站的另一篇文章）：

$(document).ready(function () {
    $("#navbar-frame").load("___nav.html");
});

我的___ nav.html代码（这是我的菜单结构的简化版本）：

    <navi id="navi">
        <ul>
            <li><a href="../MainIndex.html">Home</a></li>
            <li>
                <a href="#">Life Stages</a>
                <ul>
                    <li><a href="../personas.html">Personas</a></li>
                    <li><a href="../tipsearly.html">Early</a></li>
                    <li><a href="../tipsmiddle.html">Middle</a></li>
                    <li><a href="#"> &nbsp Late</a>
                        <ul>
                            <li><a href="../tipslateplanning.html">Plan</a></li>
                            <li><a href="../tipslategoing.html">Preparation</a></li>
                            <li><a href="../tipslategone.html">Post</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="index.html">Quiz</a> 
            </li>
        </ul>
    </navi>

我的网页html代码（摘自“标头”部分）：

    <script src="assets/js/w3dataobject.js"></script>
    <script src="___nav.js"></script>

    <meta charset="utf-8" />
    <link rel="stylesheet" href="assets/css/main.css" />
    <meta name="viewport" content="width=1024, user-scalable=yes"/>

以及“标题”部分的摘录：

    <header id="header">
        <div id="navbar-frame"></div>
    </header>

菜单显示在桌面设备上，而不显示在移动设备上（使用.load集中显示菜单html）

0 个答案: