如何在网页上同步导航栏更改

Question

If I am making a website, what is the fastest way to put new pages onto the navigation bar, and be seen from every page. Each time a new page is created, the navigation bar is updated, and then I have to go copy and paste the new code onto every single page's code in my site (I think.) I have just now completed the homepage, so it isn't a problem yet, but I don't want to continue until I have this problem straightened out so I don't end up in trouble later. Is there some way to put the navigation bar's code onto a different HTML file and then link the pages to it so that they all stay synced up? Sorry if that is confusing, but please help me. Thank you so much, I am pretty new to HTML and CSS, but I am willing to learn whatever is required to optimize this.

Update: I now have this working using the PHP command:

<?php include 'PHP/nav_bar_code.php'; ?>

Answer 1

The basic AJAX or XMLHTTPRequest call is (without resorting to libraries):

<script>
function loadNavigation() {
  var xmlhttp;
  if( window.XMLHttpRequest ) {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {// code for IE6, IE5
    xmlhttp=new ActiveXObject( "Microsoft.XMLHTTP" );
  }
  xmlhttp.onreadystatechange=function() {
    if( xmlhttp.readyState==4 && xmlhttp.status==200 ) {
      //--- change this to your navigation element
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
  //--- change the filename to the navigation file
  xmlhttp.open("GET","ajax_info.txt",true);
  xmlhttp.send();
}
</script>

When specifying the filename just be aware that the above will work in a flat file system and you may have to specify the full URL path to your navigation file is you are using a multi-level file structure - if that makes sense.

Answer 2

There a few methods to achieve this. An easy one is to use a CMS to create your site. Something like WordPress, Joomla, Drupal, Plone, etc... The other approach could be to use AJAX as mentioned in the comments. jQuery provides a simple method for this. All you would do is create a div at the head of each page and use the .load() method to load your header page in. It would probably be a better design to use ajax to load your pages into a framework. This is where you layout the main page, and set a content container, each of your subsequent pages are loaded into that container...

The other approach would be to use php files and the include command to include the header page. More info found here .

If you're keen to get into AJAX, then this book is great - http://www.apress.com/9781590596678