Google trends Public Holidays Coupon Code Code Compiler

Custom Navigation Tabs

Jan 31, 2019

Custom Navigation Tabs

In this tutorial, we are going to look at how to create tabs in HTML, CSS and javascript. Tabs are a great way of grouping lots of content into a very small space. They can be incredibly handy when you have a lot of content that would simply fill up your page with too much information in one go.

Well-designed navigation tabs not only help users know where to go, they are important to drive traffic to the internal pages of your website or blog as well.

So, for my web designer friends, here is a long list of nice and clean CSS tab-based navigation scripts.

CSS Code

.tab {
  background: #F13F2E;
  overflow: hidden;
.tab button {
	float: left;
	border: none;
	outline: none;
	font-weight: bold;
	cursor: pointer;
	background-color: inherit;
	padding: 15px 20px;
	transition: 0.2s;
	font-size: 17px;
	color: #fff;

.tab button:hover {
  background-color: yellow;
  color: #111;

.tab {
  background-color: yellow;
  color: #111;

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;


<div class="wraper">
	<img src="" style="width: 30%;">
	<h2>Custom Tabs Design Using JavaScript</h2>
	<div class="tab">
	  <button class="tablinks" onclick="openTab(event, 'HTML')">HTML</button>
	  <button class="tablinks" onclick="openTab(event, 'CSS')">CSS</button>
	  <button class="tablinks" onclick="openTab(event, 'PHP')">PHP</button>

	<div id="HTML" class="tabcontent">
	  <p>Hypertext Markup Language is the standard markup language for creating web pages and web applications.</p>

	<div id="CSS" class="tabcontent">
	  <p>Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML.</p> 

	<div id="PHP" class="tabcontent">
	  <p>Hypertext Preprocessor is a server-side scripting language designed for Web development, but also used as a general-purpose programming language.</p>

Javascript Code

function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";

Copyright 2024. All rights are reserved