There are dozens of ways you can achieve this, with or without server-side scripting:
Below is an eaxmple without server-side scripting, just using a javascript file.
First you would need to set up a container on each page where you want the navigation to appear, along with a link to a javascript file, in this case 'navigation.js': You have to initially insert some kind of code on each page if you use a server include script like php, so its no extra steps.
<nav>
<ul class="mainNav">
<script src="navigation.js"></script>
</ul>
</nav>
Then in the navigation.js file you can store the 'linkUrl' and 'linkText' in an object array then loop through it using the forEach function:
const mainNav = document.querySelector('.mainNav');
const navigation = [
{linkUrl: 'link_1.html', linkText: 'Link 1'},
{linkUrl: 'link_2.html', linkText: 'Link 2'},
{linkUrl: 'link_3.html', linkText: 'Link 3'},
{linkUrl: 'link_4.html', linkText: 'Link 4'},
{linkUrl: 'link_5.html', linkText: 'Link 5'},
{linkUrl: 'link_6.html', linkText: 'Link 6'},
{linkUrl: 'link_7.html', linkText: 'Link 7'},
];
navigation.forEach(function(nav) {
mainNav.innerHTML += `
<li><a href="${nav.linkUrl}">${nav.linkText}</a></li>
`;
});
I prefer to use a php include because php is what I use by default but javascript is an option if you dont have a server-side set-up, along with the other solutions so far provided.
9
Replies
AdChoices