How to call a remote navigation menu in html? - html

Question

everytime I make a new tab in my nav menu, I need to edit all my html files.
How do I make a remote file with all the nav items, that I then call to show up?

Answer 1

Simple: make your navigation into a separate HTML file and use an iframe to call it.
Another way is to make it one whole HTML file and use the following:
var d = {
e: function(id){
return(document.getElementById(id) || "err:404");
},
v: function(id){
return(document.getElementById(id).value || "err:404");
}
};
var System = {
tabs: {
init: function(){
try{
var tabs = d.e("tabs").querySelectorAll("tab");
for(var i = 0; i < tabs.length; i++){
var e = tabs[i];
e.onclick = function(){
System.tabs.activate(this);
};
}
System.tabs.activate(tabs[0]);
}catch(err){
alert(err.stack);
}
},
activate: function(name){
try{
var tabs = d.e("tabs").querySelectorAll("tab");
for(var i = 0; i < tabs.length; i++){
tabs[i].setAttribute("active","false");
}
name.setAttribute("active","true");
var contents = d.e("content").querySelectorAll("pane");
for(var i = 0; i < contents.length; i++){
contents[i].style.display = "none";
}
contents[Array.from(tabs).indexOf(name)].style.display = "block";
}catch(err){
alert(err.stack);
}
}
}
};
window.onload = function(){
System.tabs.init();
};
tab{
display: inline-block;
background: #000000;
color: #888888;
height: 20px;
border-right: 1px solid #444444;
border-left: 1px solid #444444;
border-bottom: 1px solid #222222;
}
tab[active="false"]:hover{
background: #000000;
color: #ffffff;
}
tab[active="true"]{
background: #080808;
color: #ffffff;
border-bottom: 1px solid #000000;
}
tab[active="true"]:hover{
background: #181818;
color: #ffffff;
}
<div id="tabs">
<tab>Tab name</tab><tab>Another tab name</tab>
</div>
<div id="content">
<pane>
<p>Hi there! Welcome to some tab program I made! Please click the tab labeled <code>Another tab name</code> to test out the feature.</p>
</pane>
<pane>
<p>The best part is: no need for element IDs or JQuery or any of that difficult stuff! Feel free to click as many times as you want to see how perfect the tabs work.</p>
</pane>
</div>
I realized that the first option might not work with the current knowledge I know. It is still possible though. Meanwhile the second is obviously gonna work very good even though all I know is that it can work in Chrome, but I can't test it in other browsers because this is a school Chromebook that I am on and my dad is refusing to repair mine and my brother's shared PC.