HTML site navigation

Question

I am starting to program in HTML5. I am doing a basic navigation menu with links to "1.html", "2.html" and so on HTML pages. The thing is that when the navigation button links me to the "1.html" page a new page appers and navigation menu is lost.

Is there a way to keep the navigation menu always on the screen? Should I copy/paste the navigation menu HTML code in every page? (I hope not)

Thanks in advance.

I am using HTML with CSS and JS. I do not know if this is enough for creating a web, but the books I read refered to theese technologies. — Ivan, Apr 22 '16 at 12:08
Yes, I am using header tag for containing the navigation menu as follows.

Inicio

Tutoriales

Cursos

Preguntame algo

Contacto — Ivan, Apr 22 '16 at 12:09

score 1 · Answer 1 · answered Apr 22 '16 at 11:25

you need to keep this in mind:
if you open a html document, it will only represent its content. it cannot inherit from a so called „navigation template“ unless you provide the template with every document.

you could create the navigation using plain javascript and just link to the corresponding js file in every document.
you could use framesets or a simple iframe (wich should be avoided where possible but might solve your problem)
you could use a serversided preparser to glue multiple html files together and use your stuff among multiple url's
you could just copy and paste the menu to every document
you could use a task runner like grunt or equal to create your final documents through precompiling templates
you could request the navigation template using javascript through an xmlhttprequest (falsy known as ajax) and add it to your current document

thats the options you have.

Which of theese option is the best one nowadays? I am looking to some js script to change the — Ivan, Apr 26 '16 at 09:34
i'd recommend keeping all of them in mind. it really depends. you should pick the one you are the most comfortable with. if you just got started using html5 then you should definitely play around with theese options. check this out too: http://stackoverflow.com/questions/1203068/why-should-i-not-use-html-frames whats comfortable for the developer might not be comfortable for the end user. — GottZ, Apr 26 '16 at 14:42

score 1 · Answer 2 · answered Apr 22 '16 at 11:26

If pure HTML: use iFrames for header and body (or copy/paste header code to every page)

<a href="http://stackoverflow.com" target="my-iframe">Home</a>
<a href="http://stackoverflow.com/help" target="my-iframe">Help</a>
<br/>

<iframe name="my-iframe" style="border: 0; height: 400px; width: 100%;"></iframe>

If using PHP: include php file in every page:

<html>
    <?php include('common/header.php'); ?>
    <body>
        <?php include('common/menu.php'); ?>
        <h1>Hello World</1>
        <?php include('common/footer.php'); ?>
    </body>
</html>

If using jQuery: load your page content using Ajax:

$('#header').load('common/header.html');

HTML site navigation

2 Answers2