window.onload = () => { swal("Please upvote 💞", "This Navigation bar is made for the contest. Click that three bars above", "success"); } function homeanim(){ console.log("Home button is clicked"); var home = document.getElementById("home"); home.style.fontSize = "30px"; home.style.backgroundColor = "rgb(141,93,240)"; home.style.border = "5px"; home.style.borderLeftStyle = "solid"; home.style.borderColor = "red"; var about = document.getElementById("about"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("service"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("details"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("contact"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("email"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("follow"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; document.getElementById("cover").style.width = "0"; document.querySelector("body").style.backgroundColor = "#f11696"; document.getElementById("menu").style.width = "0"; document.getElementById("menu").style.height = "0"; document.getElementById("content").style.marginLeft = "0"; document.getElementById("msg").innerHTML = "Welcome to the Home Page. This is a Navigation Bar contest code."; } function aboutanim(){ console.log("About button is clicked") var about = document.getElementById("about"); about.style.fontSize = "30px"; about.style.backgroundColor = "rgb(141,93,240)"; about.style.border = "5px"; about.style.borderLeftStyle = "solid"; about.style.borderColor = "red"; var about = document.getElementById("home"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("service"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("details"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("contact"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("email"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("follow"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; document.querySelector("body").style.backgroundColor = "rgb(129, 44, 168)"; document.getElementById("cover").style.width = "0"; document.getElementById("menu").style.width = "0"; document.getElementById("menu").style.height = "0"; document.getElementById("content").style.marginLeft = "0"; document.getElementById("msg").innerHTML = "Welcome to the About Page. This is a Navigation Bar contest code."; } function serviceanim(){ console.log("Services button is clicked"); var service = document.getElementById("service"); service.style.fontSize = "30px"; service.style.backgroundColor = "rgb(141,93,240)"; service.style.border = "5px"; service.style.borderLeftStyle = "solid"; service.style.borderColor = "red"; var about = document.getElementById("home"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("about"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("details"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("contact"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("email"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("follow"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; document.querySelector("body").style.backgroundColor = "rgb(247, 163, 7)"; document.getElementById("cover").style.width = "0"; document.getElementById("menu").style.width = "0"; document.getElementById("menu").style.height = "0"; document.getElementById("content").style.marginLeft = "0"; document.getElementById("msg").innerHTML = "Welcome to the Service Page. This is a Navigation Bar contest code."; } function detailsanim(){ console.log("Details button is clicked"); var details = document.getElementById("details"); details.style.fontSize = "30px"; details.style.backgroundColor = "rgb(141,93,240)"; details.style.border = "5px"; details.style.borderLeftStyle = "solid"; details.style.borderColor = "red"; var about = document.getElementById("home"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("about"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("service"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("contact"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("email"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("follow"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; document.querySelector("body").style.backgroundColor = "rgb(123, 247, 7)"; document.getElementById("cover").style.width = "0"; document.getElementById("menu").style.width = "0"; document.getElementById("menu").style.height = "0"; document.getElementById("content").style.marginLeft = "0"; document.getElementById("msg").innerHTML = "Welcome to the Details Page. This is a Navigation Bar contest code."; } function contactanim(){ console.log("Contacts button is clicked"); var contact = document.getElementById("contact"); contact.style.fontSize = "30px"; contact.style.backgroundColor = "rgb(141,93,240)"; contact.style.border = "5px"; contact.style.borderLeftStyle = "solid"; contact.style.borderColor = "red"; var about = document.getElementById("home"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("about"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("service"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("details"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("email"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("follow"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; document.querySelector("body").style.backgroundColor = "rgb(7, 247, 235)"; document.getElementById("cover").style.width = "0"; document.getElementById("menu").style.width = "0"; document.getElementById("menu").style.height = "0"; document.getElementById("content").style.marginLeft = "0"; document.getElementById("msg").innerHTML = "Welcome to the Contact Page. This is a Navigation Bar contest code."; } function emailanim(){ console.log("Email button is clicked"); var email = document.getElementById("email"); email.style.fontSize = "30px"; email.style.backgroundColor = "rgb(141,93,240)"; email.style.border = "5px"; email.style.borderLeftStyle = "solid"; email.style.borderColor = "red"; var about = document.getElementById("home"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("about"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("service"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("details"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("contact"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("follow"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; document.querySelector("body").style.backgroundColor = "rgb(255, 64, 64)"; document.getElementById("cover").style.width = "0"; document.getElementById("menu").style.width = "0"; document.getElementById("menu").style.height = "0"; document.getElementById("content").style.marginLeft = "0"; document.getElementById("msg").innerHTML = "Welcome to the Email Page. This is a Navigation Bar contest code."; } function followanim(){ console.log("Follow me button is clicked"); var follow = document.getElementById("follow"); follow.style.fontSize = "30px"; follow.style.backgroundColor = "rgb(141,93,240)"; follow.style.border = "5px"; follow.style.borderLeftStyle = "solid"; follow.style.borderColor = "red"; var about = document.getElementById("home"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("about"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("service"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("details"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("contact"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("email"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; document.querySelector("body").style.backgroundColor = "rgb(90, 78, 255)"; document.getElementById("cover").style.width = "0"; document.getElementById("menu").style.width = "0"; document.getElementById("menu").style.height = "0"; document.getElementById("content").style.marginLeft = "0"; document.getElementById("msg").innerHTML = "Welcome to the Follow Me Page. This is a Navigation Bar contest code."; } function openMenu() { document.getElementById("menu").style.width = "230px"; document.getElementById("cover").style.width = "100%"; document.getElementById("menu").style.height = "100%"; } function closeMenu() { document.getElementById("menu").style.width = "0"; document.getElementById("menu").style.height = "0"; document.getElementById("content").style.marginLeft = "0"; var about = document.getElementById("about"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("service"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("details"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("contact"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("email"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("follow"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; var about = document.getElementById("home"); about.style.fontSize = "25px"; about.style.backgroundColor = "rgb(89, 38, 209)"; about.style.border = "0px"; document.getElementById("cover").style.width = "0"; }

Nav-Bar Contest Code