CODEWITHSUNDEEP
jqueryhtml
StarDart
StarDart

Reputation: 251

Using JQuery For a Universal Nav Bar?

I've been reading up on how to create a separate navigation bar that is maintained in a single file for easy updating. After assessing some options, I decided on JQuery as, at the moment, I don't have a site and am just learning how to code.

I'm using this code on the index.html file (followed by the unordered list in a separate nav.html file):

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script> 
    $(function(){
      $("#menu").load("nav.html"); 
    });
  </script> 
    <ul>
      <li><a href="#" class="active">Page1</a></li>
      <li><a href="#">Page2</a></li>
      <li><a href="#">Page3</a></li>
      <li><a href="#">Page4</a></li>
    </ul>

And then calling it with this on index.html:

<nav>
   <div id="menu">
</nav>

But nothing happens, the nav bar isn't visible on my page.

Any suggestions as to what's wrong?

Thanks!

Upvotes: 1

Views: 1457

Answers (1)

Fabricator
Fabricator

Reputation: 12772

Your code works. fiddle

$('#menu').load requires the source to be running on a server. It didn't work for you probably because you are not running it on a server.

Upvotes: 2

Related Questions