(function()
{
//Note JSON.pasrse("true" || "false") is used to convert string bool to actual bool datatype
var dropdownTogglers = document.querySelectorAll("a.dropdown-toggler"); //get a list of toggle buttons
var toggleElementsIds = ["services", "projects"]; //create a list of elements id to be toggled
var otherLinks = document.querySelectorAll(".link");
//helper function for getting an element by id
function _id(id) {
return document.getElementById(id);
}
//Target all other links
for (var i = 0; i < otherLinks.length; i++) {
otherLinks[i].addEventListener("click", function () {
for (var i = 0; i < toggleElementsIds.length; i++) {
_id(toggleElementsIds[i]).style.display = "none";
_id(toggleElementsIds[i]).setAttribute("data-active", false);
}
});
}
_id("content-container").addEventListener("click", function () {
for (var i = 0; i < toggleElementsIds.length; i++) {
_id(toggleElementsIds[i]).style.display = "none";
_id(toggleElementsIds[i]).setAttribute("data-active", false);
}
});
//for all toggler buttons found,
for(var i = 0; i < dropdownTogglers.length; i++)
{
//add a click event to that button
dropdownTogglers[i].addEventListener("click",
//get even as parameter
function(event)
{
//use event to know which button is being clicked
var el = event.target || src.target;
//check if the button clicked is for services
if (el.getAttribute("data-el") == toggleElementsIds[0])
{
//check the current state of "data-active" of the services
if (!JSON.parse(_id(el.getAttribute("data-el")).getAttribute("data-active"))) {
//at this point services "data-active" is false
//set it to true
_id(el.getAttribute("data-el")).setAttribute("data-active", true);
//and ensure that the other toggling elements are hidden, or set to false
_id(toggleElementsIds[1]).setAttribute("data-active", false);
} else {
//at this point the services data-val was true
//set it to false
_id(el.getAttribute("data-el")).setAttribute("data-active", false);
}
//check if the button clicked is for projects
} else if (el.getAttribute("data-el") == toggleElementsIds[1])
{
//check the current state of "data-active" of the projects
if (!JSON.parse(_id(el.getAttribute("data-el")).getAttribute("data-active"))) {
//at this point projects "data-active" is false
//set it to true
_id(el.getAttribute("data-el")).setAttribute("data-active", true);
//and ensure that the other toggling elements are hidden, or set to false
_id(toggleElementsIds[0]).setAttribute("data-active", false);
} else {
//at this point the projects data-val was true
//set it to false
_id(el.getAttribute("data-el")).setAttribute("data-active", false);
}
}
//after setting all data-active values, change their display status based on their values
//call the toggle funtion
ToggleOperations();
}
);
}
//perform toggle operations,
//this function just sets css display properties of toggleElements based on their "data-active" true or false
function ToggleOperations() {
//Target all toggle elements
for (var i = 0; i < dropdownTogglers.length; i++) {
//if this toggle element "data-val" is true
if (JSON.parse(_id(toggleElementsIds[i]).getAttribute("data-active")))
{
//set its display to block
_id(toggleElementsIds[i]).style.display = "block";
} else
//if this toggle element "data-val" is false
{
//set the display to none
_id(toggleElementsIds[i]).style.display = "none";
}
}
}
})();
html, body{
display: block;
position: relative;
height: 100%;
width: 100%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
nav {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
background: #000;
z-index: 9000;
}
h1 {
color: #fff;
text-transform: uppercase;
}
.menu {
display: flex;
justify-content: space-between;
align-items: center;
}
.menu li {
position: relative;
}
.menu a {
padding: 20px;
display: block;
color: #fff;
}
.menu a:hover {
background: #fff;
color: #333;
}
.menu .sub-menu {
position: absolute;
top: 100%;
background: #000;
width: 130%;
left: 0;
display: none;
}
<nav>
<h1 class="logo">Hiep</h1>
<ul class="menu">
<li><a href="#" class="link">Home</a></li>
<li><a href="#" class="link">About</a></li>
<li>
<a class="dropdown-toggler" data-el="services">Serices</a>
<ul class="sub-menu" id="services" data-active="false">
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 2</a></li>
<li><a href="#">Service 3</a></li>
<li><a href="#">Service 4</a></li>
</ul>
</li>
<li><a href="#" class="link">Contact</a></li>
<li >
<a class="dropdown-toggler" data-el="projects">Projects</a>
<ul class="sub-menu" id="projects" data-active="false">
<li><a href="#">Project 1</a></li>
<li><a href="#">Project 2</a></li>
<li><a href="#">Project 3</a></li>
<li><a href="#">Project 4</a></li>
</ul>
</li>
</ul>
</nav>
<div id="content-container"
style="width: 100%;
height: 100%;
background-color: whitesmoke;">
</div>