If you are only willing to use html, css & javascript to fix it, then maybe you can achieve that by using angularjs which is a javascript framework and can solve your problem. You create your index.html with all the navigation links and load the external links/ html files in your index.html
I created this as an example for you:
http://codepen.io/Edrees21/pen/OPaYVv
<body ng-app="NavigationMenu">
<div class="container" ng-controller="NavigationController">
<ul class="nav-menu">
<li ng-repeat="item in navigationItems"
ng-class="{active:isActivePage(item.url)}"
ng-click="onItemClick(item)">
{{item.name}}
</li>
</ul>
<div class="content">
<div ng-include="currentPage"></div>
</div>
</div>
<script type="text/ng-template" id="your-first-html-file.html">
<h4>About us</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</script>
<script type="text/ng-template" id="your-second-html-file.html">
<h4>Links</h4>
<ul>
<li>some link</li>
<li>some link</li>
<li>some link</li>
</ul>
</script>
<script type="text/ng-template" id="your-third-html-file.html">
<h4>Contact</h4>
<p>John Doe</p>
<p>Long Avenue</p>
<p>1234567890</p>
</script>
</body>
Javascript:
angular.module('NavigationMenu', [])
.controller('NavigationController', ['$scope', function ($scope) {
$scope.navigationItems = [{
name: 'About us',
url: 'your-first-html-file.html'
},
{
name: 'Links',
url: 'your-second-html-file.html'
},
{
name: 'Contact',
url: 'your-third-html-file.html'
}];
$scope.currentPage = 'your-first-html-file.html';
$scope.onItemClick = function (item) {
$scope.currentPage = item.url;
}
$scope.isActivePage = function (pageUrl) {
return pageUrl == $scope.currentPage;
}
}]);
