Membut Sebuah Top Navigation dengan HTML dan CSS

Membuat Top Navigation Bar

Langkah pertama:
Add HTML berikut ini


<div class="topnav" id="myTopnav">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>






Langkah kedua:
Add CSS berikut ini

/* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;}








Itu tadi cara membuat sebuah Top Navigation Bar, semoga bermanfaat bagi pembaca, sekian terima kasih dan sampai jumpa...

Membuat Tabs dengan HTML dan CSS

Tab sangat cocok untuk suatu halaman web yang mampu menampikan topik yang berbeda

• Membuat sebuah Tabs Togglable

Langkah pertama:

Add HTML berikut ini

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

Buat tombol untuk membuka konten tab tertentu. semua elemen <div> dengan class ="tabcontent" disembunyikan secara default (dengan CSS dan JS). Saat pengguna mengklik tombol - ia akan membuka konten tab yang "cocokkan" tombol ini.

Langkah kedua:

Add CSS berikut ini untuk style tombol dan isnya

/* Style the tab */
div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #ccc;}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;}

Langkah ketiga:

Add juga Javascript berikut ini

function openCity(evt, cityName) {
    // Declare all variables    var i, tabcontent, tablinks;

    // Get all elements with class="tabcontent" and hide them    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // Get all elements with class="tablinks" and remove the class "active"    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // Show the current tab, and add an "active" class to the button that opened the tab    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

• Tampikan tab secara default

Untuk membuka tab tertentu pada pemuatan halaman, gunakan JS untuk "klik" pada tombol tab yang ditentukan

Contohnya:

<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>

<script>
// Get the element with id="defaultOpen" and click on itdocument.getElementById("defaultOpen").click();</script>

• Menutup Tab

Jika anda ingin menutup tab tertentu gunakan JS untuk menyembunyikan tab dengan satu kali klik

Contonhya:

<!-- Click on the <span> element to close the tab -->

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
  <span onclick="this.parentElement.style.display='none'">x</span> 
</div>

itu tadi HTML dan CSS dan JS untuk membuat sebuah tabs, semoga bermanfaat bagi pembaca, sekian terima kasih dan sampai jumpa...

Membuat Tab Headers dengan HTML dan CSS

Membuat Togglabel Tab Headers

Langkah pertama:

Add HTML berikut

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<div id="Oslo" class="tabcontent">
  <h3>Oslo</h3>
  <p>Oslo is the capital of Norway.</p>
</div>

<button class="tablink" onclick="openCity('London', this, 'red')"id="defaultOpen">London</button>
<button class="tablink" onclick="openCity('Paris', this, 'green')">Paris</button>
<button class="tablink" onclick="openCity('Tokyo', this, 'blue')">Tokyo</button>
<button class="tablink" onclick="openCity('Oslo', this, 'orange')">Oslo</button>

Buat tombol untuk membuka konten tertentu. Semua elemen <div> dengan class="tabcontent" disembunyikan secara default dengan CSS dan juga JS. Saat pengguna mengklik tombol , ia akan mencocokkan konte tab yang kita klik.

Langkah kedua:

Add CSS berikut untuk style tombol dan konten tab

/* Style the tab buttons */
.tablink {
    background-color: #555;
    color: white;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    font-size: 17px;
    width: 25%;}

/* Change background color of buttons on hover */
.tablink:hover {
    background-color: #777;}

/* Set default styles for tab content */
.tabcontent {
    color: white;
    display: none;
    padding: 50px;
    text-align: center;}

/* Style each tab content individually */ 
#London {background-color:red;}
#Paris {background-color:green;}
#Tokyo {background-color:blue;}
#Oslo {background-color:orange;}

Langkah ketiga:

Add juga Javascript berikut

function openCity(cityName, elmnt, color) {
    // Hide all elements with class="tabcontent" by default */    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // Remove the background color of all tablinks/buttons    tablinks = document.getElementsByClassName("tablink");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].style.backgroundColor = "";
    }

    // Show the specific tab content    document.getElementById(cityName).style.display = "block";

    // Add the specific color to the button used to open the tab content    elmnt.style.backgroundColor = color;
}

// Get the element with id="defaultOpen" and click on itdocument.getElementById("defaultOpen").click();

Itu tadi cara membuat sebuah Tab Headers dengan HTML dan CSS dan juga JS, semoga bermanfaat bagi pembaca, sekian terima kasih dan sampai jumpa...