Assalamualaikum Wr.Wb
Seperti judulnya pada kesempatan kali ini saya akan memposting tentang salah satu style yang tersedia pada w3.css yaitu sidebar. Sidebar ini hampir mirip dengan navbar tetapi sidebar ini umumnya terletak pada samping halaman web,dan fungsinya juga hampir mirip - mirip,sidebar ini juga bisa untuk di jadikan navigasi pada tampilan website kita,baiklah mari kita mulai saja.
Dan inilah hasilnya
Seperti judulnya pada kesempatan kali ini saya akan memposting tentang salah satu style yang tersedia pada w3.css yaitu sidebar. Sidebar ini hampir mirip dengan navbar tetapi sidebar ini umumnya terletak pada samping halaman web,dan fungsinya juga hampir mirip - mirip,sidebar ini juga bisa untuk di jadikan navigasi pada tampilan website kita,baiklah mari kita mulai saja.
- Tulis syntax yang akan di gunakan untuk memanggil w3.css
<meta name="viewport" content="width=device-width, initial-scale=1">Tuliskan syntax di atas di antara <title> dan </title> seperti gambar di bawah.
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
- Sekarang mari kita buat sidebarnya
<!DOCTYPE html>
<html>
<head>
<title>w3sidebar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-sidebar w3-bar-block w3-collapse w3-card-2 w3-animate-left" style="width: 200px;" id="mySidebar">
<button class="w3-bar-item w3-button w3-large w3-hide-large" onclick="w3_close()">Close ×</button>
<a href="#" class="w3-bar-item w3-button">Menu 1</a>
<a href="#" class="w3-bar-item w3-button">Menu 2</a>
<a href="#" class="w3-bar-item w3-button">Menu 3</a>
</div><!--w3sidebar-->
<div class="w3-main" style="margin-left: 200px">
<div class="w3-teal">
<button class="w3-button w3-teal w3-xlarge w3-hide-large" onclick="w3_open()">☰</button>
<div class="container">
<h1>Setiyono's Blog</h1>
</div><!--w3teal-->
</div><!--w3main-->
<div class="w3-container">
<h3>Resize Ukuran untuk melihat sidebar yang responsive</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<script>
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
</body>
</html>
Dan inilah hasilnya
Saat tampilan di perkecil
oh ya hampir kelupaan,selain menggunakan w3.css sidebar di atas juga menggunakan javascript yang di awali dengan <script> dan di akhiri dengan </script> yang fungsinya untuk memberikan efek bergerak pada sidebar saat ukuran layar di perkecil,untuk lebih jelasnya silahkan di coba sendiri.Sekian postingan kali ini semoga bermanfaat.
Wassalamualaikum Wr.Wb
0 komentar:
Posting Komentar