时间戳

首页 > 解决方案 > 如何将导航菜单添加到 html5 画布项目

javascript - 如何将导航菜单添加到 html5 画布项目

问题描述

我正在尝试为我在线下载的这个 html 5 项目添加导航菜单，但每次我输入导航菜单时，项目都会中断。我需要你的帮助社区。当前的源代码现在包含导航菜单。这是源代码：

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>The Last Experience</title>
  <!--
today: be happy
tomorrow: be happy
everyday: be happy
-->


<script>
if (window.location.href.indexOf("fullcpgrid") > -1) {
    document.addEventListener('DOMContentLoaded', function() {
        const original = document.createElement('iframe');
        original.style.display = 'none';
        document.body.appendChild(original);
        window.requestAnimationFrame = original.contentWindow.requestAnimationFrame;
    }, false);
}
</script>


      <link rel="stylesheet" href="css/style.css">


</head>

<body>

    <nav>
                                            <label for="drop" class="toggle">Menu</label>
                                        <input type="checkbox" id="drop" />
                                            <ul class="menu">
                                                <li><a href="index.php">Home</a></li>

                                                <li>
                                                    <!-- First Tier Drop Down -->
                                                    <label for="drop-1" class="toggle">About Us +</label>
                                                    <a href="#">About Us</a>
                                                    <input type="checkbox" id="drop-1"/>
                                                    <ul>
                                                        <li><a href="About us.html">About Us</a></li>
                                                        <li><a href="methodology.html">Methodology</a></li>

                                                    </ul>  

                                                </li>
                                                <li><a href="service.html">Services</a></li>
                                                <li>

                                                <!-- First Tier Drop Down -->
                                                <label for="drop-2" class="toggle">List of Courses +</label>
                                                <a href="#">List of Courses</a>
                                                <input type="checkbox" id="drop-2"/>
                                                <ul>
                                                    <li><a href="administration.html">Administration</a></li>
                                                    <li><a href="agriculture.html">Agriculture</a></li>


                                                </ul>
                                                </li>
                                                <li>

                                                <!-- First Tier Drop Down -->
                                                <label for="drop-2" class="toggle">Ongoing Courses +</label>
                                                <a href="#">Ongoing Courses</a>
                                                <input type="checkbox" id="drop-2"/>
                                                <ul>


                                                    <li><a href="creative.html">Creative</a></li>
                                                     <li><a href="enterprise.html">Enterprise</a></li>
                                                    <li><a href="excel.html">Microsoft Excel</a></li>
                                                    <li><a href="Hardware.html">Hardware</a></li>
                                                     <li><a href="management.html">MIS</a></li>
                                                    <li><a href="microsoft_office.html">Microsoft Office</a></li>
                                                    <li><a href="networking.html">Networking</a></li>
                                                     <li><a href="webdesign.html">Web Design</a></li>
                                                    <li><a href="webdev.html">Web Development</a></li>


                                                </ul>
                                                </li>
                                                <li><a href="gallery.html">Gallery</a></li>   
                                                <li><a href="events.html">Events</a></li>
                                                <li><a href="contact.php">Contact</a></li>
                                                <li><a href="http://thelearninghubng.com/blog/">Blog</a></li>

                                                <li><a href="https://www.facebook.com/TheLearningHubNG/"><img src="images/soc/facebook1.png" height="32" width="32"  alt " facebook icon"></a></li>
                                                <li><a href="https://twitter.com/LearningHubNG"><img src="images/soc/twitter1.png" height="32" width="32"  alt " twitter icon"></a></li>
                                                <li><a href="https://www.instagram.com/thelearninghub_ng/"><img src="images/soc/instagram1.png" height="32" width="34"  alt " instagram icon"></a></li>
                                            </ul>
                                        </nav>

                  <canvas></canvas>
<!-- 
                  ,--.    ,--.
                 ((O ))--((O ))
               ,'_`--'____`--'_`.
              _:  ____________  :_
             | | ||::::::::::|| | |
             | | ||::::::::::|| | |
             | | ||::::::::::|| | |
             |_| |/__________\| |_|
               |________________|
            __..-'            `-..__
         .-| : .----------------. : |-.
       ,\ || | |\______________/| | || /.
      /`.\:| | ||  __  __  __  || | |;/,'\
     :`-._\;.| || '--''--''--' || |,:/_.-':
     |    :  | || .----------. || |  :    |
     |    |  | || '----SSt---' || |  |    |
     |    |  | ||   _   _   _  || |  |    |
     :,--.;  | ||  (_) (_) (_) || |  :,--.;
     (`-'|)  | ||______________|| |  (|`-')
      `--'   | |/______________\| |   `--'
             |____________________|
              `.________________,'
               (_______)(_______)
               (_______)(_______)
               (_______)(_______)
               (_______)(_______)
              |        ||        |
              '--------''--------'
-->



    <script  src="js/index.js"></script>




</body>

</html>

为了清楚起见，我从 codepen 改编了这个项目。这是项目的链接https://codepen.io/ge1doot/pen/LkdOwj。

标签： javascripthtmlcss

解决方案

推荐阅读