CODEWITHSUNDEEP
htmlcsspug
Christopher
Christopher

Reputation: 149

One navigation menu for every page

I switched from Jade to basic HTML and ran into the following problem:

How can I have one navigation menu for my whole website (in one file)?

In Jade I did the following:

I had my menu in default.jade:

body
    .header-site
        h1.page-title Christopher Kadé

    ul.nav-site
        li: a(href='/') About me
        li: a(href='/projects') Projects
        li: a(href='/contact') Contact

    .main-content
        block content

And would include default.jade in every other .jade file, and write its content in a block content. This way, I have my header and menu available throughout my website.

But I can't seem to figure out the equivalent method in good old plain HTML.

Upvotes: 0

Views: 342

Answers (2)

philomath
philomath

Reputation: 324

In order to have the same navigation menu throughout your website, you could either use php or javascript. Using php-

<?php
include_once 'navigation.php';
?>

Using javascript

<div  id="navigation">
</div>

<script>
$("#navigation").load("navigation.html");
</script>

Upvotes: 2

Squiggs.
Squiggs.

Reputation: 4474

You need a server side include (with a server side language) - HTML doesn't support this natively. Or if using jQuery:

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#nycontent").load("header.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="mycontent"></div>
  </body> 
</html>

header.html
<h1>test</h1>

alternatively, with plain old JS:

<html>


<body>
<script src="myscript.js" />
</body>
</html>

document.write('\
\
    <h1>This is my include file</h1>\
\
');

Upvotes: 0

Related Questions