JSFiddle - React, Tailwind, and code Playground
HTML
<div id="navigation">
<div class="navlinks">
<div id="output2">
<ul class="mainMenu">
<li class="mmenu-item-0"> <a href="http://www.thegaminghideout.com/About.html">About</a>
</li>
<li class="mmenu-item-1"> <a href="http://www.thegaminghideout.com/Games.html">Games</a>
</li>
<li class="mmenu-item-2"> <a href="http://www.thegaminghideout.com/The Hideout.html">The Hideout</a>
</li>
<li class="mmenu-item-3"> <a href="http://www.thegaminghideout.com/Staff.html">Staff</a>
</li>
<li class="mmenu-item-4"> <a href="http://www.thegaminghideout.com/Donate.html">Donate</a>
</li>
<li class="mmenu-item-5"> <a href="http://www.thegaminghideout.com/Contact Us.html">Contact Us</a>
</li>
</ul>
</div>
</div>
<br>
<br>
<br>
<button onclick="removeLinks()">Remove Links</button>
<button onclick="execFunction()">Link Set 1</button>
<button onclick="execFunction2()">Link Set 2</button>
CSS
#navigation {
width: 760px;
height: 35px;
position: absolute;
border-bottom: 2px solid #000000;
background: orange;
padding: 0px;
}
#navigation .padding {
padding: 2px;
}
#navigation .navlinks {
position: absolute;
top: 1px;
left: 0px;
}
#navigation .navlinks ul {
margin: 0px;
padding: 0px;
text-align: center;
list-style-type: none;
width: 760px;
height: 35px;
}
#navigation .navlinks li {
position: relative;
top: 5px;
margin: 0px 5px 0px 5px;
list-style-type: none;
display: inline;
}
#navigation .navlinks li a {
color: #000000;
padding: 5px 0px 9px 0px;
text-decoration: none;
font-size: 18px;
font-family: karmatic_arcaderegular;
padding: 5px 0px 9px 0px;
}
#navigation .navlinks li a:hover {
margin: 0px;
color: #ffffff;
background: orange;
text-decoration: underline;
}
JavaScript
function execFunction() {
removeLinks();
linksAddSet1();
}
function execFunction2() {
removeLinks();
linksAddSet2();
}
function removeLinks() {
var list = document.getElementById("output2");
while (list.hasChildNodes()) {
list.removeChild(list.lastChild);
}
}
function linksAddSet1() {
var out = document.getElementById("output2");
var args = ["About", "Games", "The Hideout", "Staff", "Donate", "Contact Us", ];
function displayMenu() {
var ul = document.createElement('ul');
ul.className = "mainMenu";
args.forEach(function (name, index) {
var li = document.createElement('li'),
an = document.createElement('a');
li.className = "mmenu-item-" + index;
li.setAttribute = "link rel", "stylesheet", "type", "text/css", "href", "http://www.thegaminghideout.com/style.css";
an.innerHTML = name;
an.setAttribute('href', "http://www.thegaminghideout.com/" + name + ".html");
li.appendChild(an);
ul.appendChild(li);
});
out.appendChild(ul);
}
if (output2.childNodes.length > 0) {} else {
displayMenu();
}
}
function linksAddSet2() {
var list = document.getElementById("output2");
var out = document.getElementById("output2");
var args = ["Tools", "Tutorials"];
function displayMenu() {
var ul = document.createElement('ul');
ul.className = "mainMenu";
args.forEach(function (name, index) {
var li = document.createElement('li'),
an = document.createElement('a');
li.className = "mmenu-item-" + index;
li.setAttribute = "link rel", "stylesheet", "type", "text/css", "href", "http://www.thegaminghideout.com/style.css";
an.innerHTML = name;
an.setAttribute('href', "http://www.thegaminghideout.com/" + name + ".html");
li.appendChild(an);
...