Multitab menu in HTML 5
How to create a multitab menu in HTML 5? The basic idea is to deal with visibility of the elements.
The basic elements
Let's say we have 2 tabs; each tab is a button element:
<div> <button class="tab"> Tab 1 </button> <button class="tab"> Tab 2 </button> </div>Each tab is associated with a div element as content. We define a common class, such as "content", and an id to distinguish each content:
<div id="1" class="content"> ... </div> <div id="2" class="content"> ... </div>Now, we can use a style (either in HTML code or in a CSS) to hide all elements associated with the class named "content":
<style>
.content {
display: none;
...
}
</style>
Visual feedback
To provide a visual feedback, we define a style to show vivid colors when the user move the mouse on a tab (hover). Also, when the tab is selected, the background color goes to white:
.tab button {
background-color: #ccc;
opacity: 0.5;
}
.tab button:hover {
opacity: 1;
}
.tab button.active {
background-color: white;
}
Managing the tabs
This is now time to manage the tabs and contents. When the user click on a tab, we want all other tab to become inactive; this is achieved with some javascript:
<script>
function opentab(evt) {
var i, t;
t = document.getElementsByClassName("tab");
for (i = 0; i < t.length; i++) {
t[i].className = t[i].className.replace(" active", "");
}
evt.currentTarget.className += " active";
}
</script>
Now, we need to call this function on click:
<div> <button class="tab" onclick="opentab(event);"> Tab 1 </button> <button class="tab" onclick="opentab(event);"> Tab 2 </button> </div>
Displaying the content
To display the content, we will show the div corresponding to the selected tab. We modify our script to add the id of the content to display:
<script>
function opentab(evt, cnt) {
var i, t;
t = document.getElementsByClassName("tab");
for (i = 0; i < t.length; i++) {
t[i].className = t[i].className.replace(" active", "");
}
evt.currentTarget.className += " active";
/* We hide all the elements from class "content" */
t = document.getElementsByClassName("content");
for (i = 0; i < t.length; i++) {
t[i].style.display = "none";
}
/* We show all the elements with id "cnt" (usually only one) */
t = document.getElementsById(cnt);
for (i = 0; i < t.length; i++) {
t[i].style.display = "block";
}
}
</script>
With the ternary operator, we can compact the code:
<script>
function opentab(evt, cnt) {
var i, t;
t = document.getElementsByClassName("tab");
for (i = 0; i < t.length; i++) {
t[i].className = t[i].className.replace(" active", "");
}
evt.currentTarget.className += " active";
/* Hide all "content" elements but the one in parameters */
t = document.getElementsByClassName("content");
for (i = 0; i < t.length; i++) {
t[i].style.display = (t[i].id==cnt)?"block":"none";
}
}
</script>
Now, we add the id of the content:
<div> <button class="tab" onclick="opentab(event,'1');"> Tab 1 </button> <button class="tab" onclick="opentab(event,'2');"> Tab 2 </button> </div>It is not necessary to distinguish each tab with an "id"; the event will target only the tab just clicked.
Full code
Here is the full code
<html>
<head>
<style>
.content {
display: none;
}
.tab button {
background-color: #ccc;
opacity: 0.5;
}
.tab button:hover {
opacity: 1;
}
.tab button.active {
background-color: white;
}
</style>
<script>
function opentab(evt, cnt) {
var i, t;
t = document.getElementsByClassName("tab");
for (i = 0; i < t.length; i++) {
t[i].className = t[i].className.replace(" active", "");
}
evt.currentTarget.className += " active";
t = document.getElementsByClassName("content");
for (i = 0; i < t.length; i++) {
t[i].style.display = (t[i].id==cnt)?"block":"none";
}
}
</script>
</head>
<body>
<div>
<button class="tab" onclick="opentab(event,'1');"> Tab 1 </button>
<button class="tab" onclick="opentab(event,'2');"> Tab 2 </button>
</div>
<div id="1" class="content">
This is the content of tab 1.
</div>
<div id="2" class="content">
This is the content of tab 2.
</div>
</body>
</html>
A more complex example: menu and submenus
In this example, we use 3 levels of menus and submenus
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<style>
.content {
display: none;
}
.tab button {
background-color: #ccc;
opacity: 0.5;
}
.tab button:hover {
opacity: 1;
}
.tab button.active {
background-color: white;
}
</style>
<script>
function opentab(evt, str, cnt) {
var i, t;
t = document.getElementsByClassName("tab");
for (i = 0; i < t.length; i++) {
t[i].className = t[i].className.replace(" active", "");
}
evt.currentTarget.className += " active";
t = str.getElementsByClassName("content");
for (i = 0; i < t.length; i++) {
t[i].style.display = (t[i].id==cnt)?"block":"none";
}
}
</script>
</head>
<body>
<div>
<button class="tab" onclick="opentab(event,document.body,'1');"> Tab 1 </button>
<button class="tab" onclick="opentab(event,document.body,'2');"> Tab 2 </button>
</div>
<div id="1" class="content">
<div>
<button class="tab" onclick="opentab(event,document.getElementById('1'),'11');"> Tab 11 </button>
<button class="tab" onclick="opentab(event,document.getElementById('1'),'12');"> Tab 12 </button>
</div>
<div id="11" class="content">
<div>
<button class="tab" onclick="opentab(event,document.getElementById('11'),'111');"> Tab 111 </button>
<button class="tab" onclick="opentab(event,document.getElementById('11'),'112');"> Tab 212 </button>
</div>
<div id="111" class="content">
This is the content of tab 111.
</div>
<div id="112" class="content">
This is the content of tab 112.
</div>
</div>
<div id="12" class="content">
This is the content of tab 12.
</div>
</div>
<div id="2" class="content">
This is the content of tab 2.
</div>
</body>
</html>
Comments