Custom Navigation Tabs

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

.wraper{
	width:70%;
	margin:auto;
}
.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 button.active {
  background-color: yellow;
  color: #111;
}

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

HTML Code

<div class="wraper">
	<img src="http://significanttechno.com/logo.png" 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>

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

	<div id="CSS" class="tabcontent">
	  <h3>CSS</h3>
	  <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>

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

Javascript Code

<script>
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";
}
</script>