我最近将我的标题/导航迁移到一个单独的文档中，现在我的汉堡菜单不起作用-解网

问：

因此，正如我上面所说，我最终决定通过将页眉/导航和页脚拉入单独的文档以提高效率来使我的网站更加精简。它们分别是 header.html 和 footer.html。

我基本上从主文档文件中提取了整个部分，并将加载函数放入主文件中。它确实有效，但在移动设备上或压缩窗口提示汉堡菜单选项时无效。汉堡菜单不会扩展。

我附加了主文件的外观、header.html 文件包含的内容以及我用于加载标头的代码。

另外，我宁愿远离 PHP，因为我不想为一个我不会维护的网站进入任何服务器端。我希望网站所有者尽可能易于管理。

你可以在 zachgrady.com 现场看到我的经历

这是我的索引页面

<!doctype html>
<html lang="en-US">
<head>

    <!-- Meta -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="Zach Grady - Multimedia Journalist" />
    <meta name="keywords" content="vcard, resposnive, resume, personal, card, cv, cvio, portfolio" />
    <meta name="author" content="beshleyua" />

    <!-- Title -->
    <title>Zach Grady - Multimedia Journalist</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap&subset=cyrillic" rel="stylesheet">
<script src="https://kit.fontawesome.com/cbeb8513e1.js" crossorigin="anonymous"></script>




    <!-- Styles -->
    <link rel="stylesheet" href="css/basic.css" />
    <link rel="stylesheet" href="css/layout.css" />
    <link rel="stylesheet" href="css/magnific-popup.css" />
    <link rel="stylesheet" href="css/animate.css" />
    <link rel="stylesheet" href="css/jarallax.css" />
    <link rel="stylesheet" href="css/swiper.css" />
    <link rel="stylesheet" href="css/fontawesome.css" />
    <link rel="stylesheet" href="css/brands.css" />
    <link rel="stylesheet" href="css/solid.css" />

<link rel="stylesheet" href="css/theme-colors/orange.css" />
    <!-- Theme Colors
    <link rel="stylesheet" href="css/theme-colors/blue.css" />
    <link rel="stylesheet" href="css/theme-colors/green.css" />
    <link rel="stylesheet" href="css/theme-colors/orange.css" />
    <link rel="stylesheet" href="css/theme-colors/brown.css" />
    <link rel="stylesheet" href="css/theme-colors/purple.css" />
    <link rel="stylesheet" href="css/theme-colors/red.css" />
    <link rel="stylesheet" href="css/theme-colors/beige.css" />
    <link rel="stylesheet" href="css/theme-colors/green_light.css" />
    <link rel="stylesheet" href="css/theme-colors/yellow.css" />
    <link rel="stylesheet" href="css/theme-colors/yellow_light.css" />
    -->
        
    <!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <link rel="shortcut icon" href="images/favicons/zaglogo.png">
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script>  
$(function(){ 
  $("#header").load("header.html");  
  $("#footer").load("footer.html");  
}); 
</script> 

</head>

<body class="home">

    <!-- Preloader -->
    <div class="preloader">
        <div class="centrize full-width">
            <div class="vertical-center">
                <div class="spinner">
                    <div class="double-bounce1"></div>
                    <div class="double-bounce2"></div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Container -->
    <div class="container">

    <!-- Header -->
        
    <div id="header"></div>



        <!-- Wrapper -->
        <div class="wrapper">   

            <!-- Section Started -->
            <div class="section started personal" id="section-started">

                <!-- background -->
                <div class="video-bg">
                    <div class="video-bg-mask"></div>
                    <div class="video-bg-texture" id="grained_container"></div>
                </div>

                <!-- started content -->
                <div class="centrize full-width">
                    <div class="vertical-center">
                        <div class="started-content">
                            <div class="logo" style="background-image: url(images/zachgradyindex.png);"></div>
                            <h1 class="h-title">
                                "You can't stop people from trying to limit your dreams, but you can stop it from becoming a reality. 
                                Your dreams are up to you. I encourage you to always be curious, always seek out things you love and 
                                always work hard once you find it."
                                <br>
                                <p align="right"><strong>-Kobe Bryant</strong></p>
                            </h1>
                            <div class="h-subtitle typing-subtitle">
                                <p>Multimedia <strong>Journalist</strong></p>
                                <p>Sports <strong>Reporter</strong></p>
                                <p>Studio <strong>Anchor</strong></p>
                                <p>Radio <strong>Personality</strong></p>

                            </div>
                            <span class="typed-subtitle"></span>
                        </div>
                    </div>
                </div>

            </div>

        </div>
        
        <!-- Footer -->


        <div id="footer"></div>




        <!-- Lines -->
        <div class="lines">
            <div class="line-col"></div>
            <div class="line-col"></div>
            <div class="line-col"></div>
            <div class="line-col"></div>
            <div class="line-col"></div>
        </div>
        
    </div>

    <!-- Scripts -->
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.validate.js"></script>
    <script src="js/magnific-popup.js"></script>
    <script src="js/simpleParallax.js"></script>
    <script src="js/typed.js"></script>
    <script src="js/jarallax.js"></script>
    <script src="js/jarallax-video.js"></script>
    <script src="js/jarallax-element.js"></script>
    <script src="js/imagesloaded.pkgd.js"></script>
    <script src="js/isotope.pkgd.js"></script>
    <script src="js/swiper.js"></script>
    <script src="js/grained.js"></script>
    <script src="js/scripts.js"></script>

</body>
</html>

这是我用来加载标头.html文件的内容：

<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script>  
$(function(){ 
  $("#header").load("header.html");  
  $("#footer").load("footer.html");  
}); 
</script>

这是我在header.html文件中得到的：

<!-- Header -->
        <header class="header">
            <div class="head-top">

                <!-- menu button -->
                <a href="#" class="menu-btn"><span></span></a>

                <!-- logo -->
                <div class="logo hover-masks-logo">
                    <a href="/images/zachgrady-resume.pdf" download="Grady, Zach Resume">

                        <span class="mask-lnk">Zach <strong>Grady</strong></span>
                        <span class="mask-lnk mask-lnk-hover">Download <strong>Resume</strong></span>
                    </a>
                </div>
                
                <!-- top menu -->                       
                <div class="top-menu hover-masks">
                    <div class="top-menu-nav">  
                        <div class="menu-topmenu-container">
                            <ul class="menu">
                                <li class="menu-item current-menu-item ">
                                    <a href="index.html">Home</a>
                                </li>
                                <li class="menu-item">
                                    <a href="reel.html">Reel</a>
                                </li>
                                <li class="menu-item ">
                                    <a href="resume.html">Bio & Resume</a>
                                </li>
                                <li class="menu-item">
                                    <a href="gallery.html">Media Gallery</a>
                                </li>
                                <li class="menu-item">
                                    <a href="https://open.spotify.com/show/0LqpVzChtSyaKGpwlu2Q7c">Podcast</a>
                                </li>
                                <li class="menu-item">
                                    <a href="blog.html">Blog</a>
                                </li>
                                <li class="menu-item">
                                    <a href="contact.html">Contact</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

            </div>
        </header>

任何帮助将不胜感激。我正在努力简化这个网站，使我的朋友尽可能简单地维护。

因此，正如我上面所说，我最终决定通过将页眉/导航和页脚拉入单独的文档以提高效率来使我的网站更加精简。它们分别是 header.html 和 footer.html。

html jquery 头文件 nav hamburger-menu

答： 暂无答案

上一个：我在 M2 Macbook air 上使用 Visual Studio Code，但我似乎无法让我的头文件正常工作 [重复]

下一个：显示更新包含路径时出错，无法打开源文件 studio.h、stdlib.h 、iostream 即所有头文件

我最近将我的标题/导航迁移到一个单独的文档中，现在我的汉堡菜单不起作用

I recently migrated my Header/Nav into a separate document and now my hamburger menu doesn't work

评论