Membuat Button Side Navigation dengan HTML dan CSS

Halo teman teman webmaster dumet school, kali ini kita akan belajar membuat Membuat Button Side Navigation dengan HTML dan CSS, Pertama tama teman teman buat 4 halaman html dengan nama nama yang berbeda contoh nya, index.html, blog.html, contact.html dan project.html. seperti ini struktur html nya.

index.html

<!DOCTYPE html>
<html>
<head>
  <link rel = "stylesheet" href = "style.css" type = "text/css">
  <title>Side Navigation menu</title>
</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>

Blog.html

<!DOCTYPE html>
<html>
<head>
  <link rel = "stylesheet" href = "style.css" type = "text/css">
  <title>Side Navigation menu</title>
</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>

contact.html

<!DOCTYPE html>
<html>
<head>
  <link rel = "stylesheet" href = "style.css" type = "text/css">
  <title>Side Navigation menu</title>
<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>

project.html

<!DOCTYPE html>
<html>
<head>
  <link rel = "stylesheet" href = "style.css" type = "text/css">
  <title>Side Navigation menu</title>
</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>

seperti ini tampilannya.

bila kita klik salah satu button nya maka akan piondah ke halaman lain,.

sekian tutorial Membuat Button Side Navigation dengan HTML dan CSS, semoga bermanfaat yah teman teman.

Membuat Button Side Navigation dengan HTML dan CSS

Kategori