Membuat Side Navigation Buttons dengan CSS

Halo teman teman, kali ini saya akan menjelaskan bagaimana cara Membuat Side Navigation Buttons dengan CSS. Langsung saja kita praktekan.

Pertama buka text editor kalian dan ketikan kode HTML di bawah ini dan beri nama dengan nama index.html

Index.html

<!DOCTYPE html>

<html>

<head>

  <link rel = "stylesheet" href = "style.css" type = "text/css">

  <title>Side Navigation menu</title>

<style>


</style>

</head>

<body>


<div id = "mySidenav" class = "sidenav">

  <a href ="index.html" id ="about"> Home </a>

  <a href ="blog.html" id ="blog"> About </a>

  <a href ="project.html" id ="projects"> Projects </a>

  <a href ="contact.html" id ="contact"> Contact </a>

</div>


<div style ="margin-left:80px; background: #4CAF50; color: #fff; padding: 20px; margin-top:20px; ">

  <h2> Klik side buttons </h2>

  <p> ini adalah halaman Home </p>

</div>

    

</body>

</html>

Lalu ketikan kode HTML berikut dan simpan dengan nama blog.html

blog.html

<!DOCTYPE html>

<html>

<head>

  <link rel = "stylesheet" href = "style.css" type = "text/css">

  <title>Side Navigation menu</title>

<style>


</style>

</head>

<body>


<div id = "mySidenav" class = "sidenav">

  <a href ="index.html" id ="about"> Home </a>

  <a href ="blog.html" id ="blog"> About </a>

  <a href ="project.html" id ="projects"> Projects </a>

  <a href ="contact.html" id ="contact"> Contact </a>

</div>


<div style ="margin-left:80px; background: #2196F3; color: #fff; padding: 20px; margin-top:20px; ">

  <h2> Klik side buttons </h2>

  <p> ini adalah halaman About </p>

</div>

    

</body>

</html>

Lalu ketikan kode HTML berikut dan simpan dengan nama project.html

project.html

<!DOCTYPE html>

<html>

<head>

  <link rel = "stylesheet" href = "style.css" type = "text/css">

  <title>Side Navigation menu</title>

<style>


</style>

</head>

<body>


<div id = "mySidenav" class = "sidenav">

  <a href ="index.html" id ="about"> Home </a>

  <a href ="blog.html" id ="blog"> About </a>

  <a href ="project.html" id ="projects"> Projects </a>

  <a href ="contact.html" id ="contact"> Contact </a>

</div>


<div style ="margin-left:80px; background:#F44336; color: #fff; padding: 20px; margin-top:20px; ">

  <h2> Klik side buttons </h2>

  <p> ini adalah halaman Project </p>

</div>

    

</body>

</html>

Lalu ketikan kode HTML berikut dan simpan dengan nama contact.html

contact.html

<!DOCTYPE html>

<html>

<head>

  <link rel = "stylesheet" href = "style.css" type = "text/css">

  <title>Side Navigation menu</title>

<style>


</style>

</head>

<body>


<div id = "mySidenav" class = "sidenav">

  <a href ="index.html" id ="about"> Home </a>

  <a href ="blog.html" id ="blog"> About </a>

  <a href ="project.html" id ="projects"> Projects </a>

  <a href ="contact.html" id ="contact"> Contact </a>

</div>


<div style ="margin-left:80px; background:#555555; color: #fff; padding: 20px; margin-top:20px; ">

  <h2> Klik side buttons </h2>

  <p> ini adalah halaman Contact </p>

</div>

    

</body>

</html>

Terakhir ketikan kode CSS berikut dan beri nama style.css

style.css

#mySidenav a {

    position: absolute;

    left: -80px;

    transition: 0.3s;

    padding: 15px;

    width: 100px;

    text-decoration: none;

    font-size: 20px;

    color: white;

    border-radius: 0 5px 5px 0;

}


#mySidenav a:hover {

    left: 0;

}


#about {

    top: 20px;

    background-color: #4CAF50;

}


#blog {

    top: 80px;

    background-color: #2196F3;

}


#projects {

    top: 140px;

    background-color: #f44336;

}


#contact {

    top: 200px;

    background-color: #555

}

Sekian tutorial Membuat Side Navigation Buttons dengan CSS, semoga bermanfaat..