0

I own a website at https://shadowdragonp.github.io/ using a somewhat well-known template called "Squadfree."

On the navigation bar, there are your typical buttons, such as "home", "about", "contact", etc. However, there is also a drop-down menu (not hyperlinked) called "Portals" that takes you to various sub-directories. Although the navigation bar changes depending on the sub-directory, the "portals" menu will always be the same on every page.

The "portals" menu will include more items on the list as time goes on. I do not want to edit all of the pages when I add an item to the portal menu, so I am looking for a way to possibly reuse code for the HTML. All suggestions are welcome!

    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Portals <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="portals/music.html">Music</a></li>
        <li><a href="portals/games.html">Games</a></li>
        <li><a href="portals/software.html">Software</a></li>
        <li><a href="portals/images.html">Image Gallery</a></li>
      </ul>
    </li>
ShadowDragon
  • 1
  • 2
  • Because adding new pages would mean that I would have to change the code in every HTML file once I have the answer, I am unable to make progress to my website. To anyone willing to help, your expertise is greatly appreciated. – ShadowDragon Apr 13 '17 at 04:24

1 Answers1

0

Add a new html file to a directory something like PortalSubMenu.html. write the code you want to reuse inside of this newly created html document. In your case its gonna be the code your wrote above. Now assign an Id to your navigation bar lets say id="menu". Once done write the following script just before the ending of body tag ''.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
//wait until the dom is fully loaded
$(document).ready(function () {
    //adds PortalSubMenu.html content into "#menu" element
    $('#menu').load('PortalSubMenu.html');
});
</script>

Don't forget to remove the Portal navigation drop down from man page as this will be coming from separate source. For more info take a look at this Stack Overflow thread Link

I hope you will achieve what you are looking for but I still recommend you to use some server side rather then plain html. because in that case you will generally have a master page or Layout page where you can define things that will stay same across your websites.

Community
  • 1
  • 1
Abdul Hannan
  • 424
  • 1
  • 6
  • 20
  • Thank you for your quick response! I placed the code you wrote just before the `

    ` tag. I also copied the code I had before into a new "PortalSubMenu.html" file, but the dropdown menu doesn't show up. How does the "index.html" file know where to place the "PortalSubMenu.html" code if it is only referenced at the end?

     – ShadowDragon Apr 14 '17 at 01:44