Membuat website dengan togle menu

Sebelumnya kita pernah Membuat website pertama dengan html dan css, begitupun dengan yang ini, masih dengan html dan css.

Yang kedua kali nya kita mencoba lagi membuat website dasar hanya menggunakan html dan css sebagai bahan latihan.

Menu togle dengan html dan css


Website dasar yang akan kita buat kali ini menggunakan menu togel yang sudah popular sebelumnya, langsung saja lihat scriptnya dibawah ini.

<!DOCTYPE html>
<html lang="id">
<head>
	<meta charset="utf-8" />
    <title>Membuat website dengan togle menu</title>
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	
<!-- begin CSS code -->

<style>
body {
  margin: 0;
  background: #dde;
  background-size: cover;
  font-family: 'Quicksand', sans-serif;
  color: #333;
  min-height: 100%;
}
h1 {
  font-weight: normal;
}
a {
  text-decoration: none;
}
.main-header {
  background: #222;
  padding: 5px 0 5px 65px;
  color: white;
  position: fixed;
  width: 100%;
  left: 0;
  transition: all 0.3s ease;
}
.main-header a {
  position: absolute;
  left: 20px;
  top: 20px;
  color: white;
  font-size: 32px;
}
.page-wrap {
  float: right;
  width: 100%;
  transition: width 0.3s ease;
}
.site-nav {
  position: fixed;
  top: 0;
  width: 0;
  height: 100%;
  background: #222;
  overflow-y: auto;
  transition: width 0.3s ease;
  white-space: nowrap;
  text-transform: uppercase;
}
.site-nav a {
  display: block;
  border-bottom: 1px solid #666;
  color: white;
  padding: 34px;
}
.site-nav a:hover,
.site-nav a:focus {
  background: #333;
}
.site-nav:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 4px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
}
.content {
  padding: 100px 20px 20px 20px;
  max-width: 900px;
}
.close-menu {
  display: none;
}
#site-nav:target {
  width: 30%;
}
#site-nav:target + .page-wrap {
  width: 70%;
}
#site-nav:target + .page-wrap .close-menu {
  display: block;
}
#site-nav:target + .page-wrap .main-header {
  width: 70%;
  left: 30%;
}
</style>

<!-- end of CSS code -->

</head>
<body>

<!-- this content between tag <body>...</body> will be show on browser -->

<nav class="site-nav" id="site-nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Works</a>
    <a href="#">Contact</a>
</nav>

<div class="page-wrap">

    <header class="main-header">
		<a href="#site-nav">☰</a>
		<a href="#" class="close-menu">☰</a>
		<h1>Website dengan togle menu</h1>
    </header>

    <div class="content">
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu sem ac est facilisis efficitur. Fusce sed fermentum elit. Integer placerat convallis porttitor. Quisque luctus porttitor mi. Nam pulvinar rhoncus ligula. Suspendisse vel neque varius, dapibus erat quis, pellentesque eros. Vivamus eu blandit erat, vel fringilla enim. Suspendisse non tellus placerat, commodo est eget, volutpat massa. Quisque interdum id ante ac tristique. Aenean fermentum libero sit amet magna mollis, nec iaculis odio ultrices.
		</p>
	</div>
	
</div>

<!-- End of body content -->

</body>
</html>

Anda bebas memodifikasi atau mengedit ulang script diatas sebagai bahan untuk belajar dan latihan koding.

Silahkan melihat dan mengedit script diatas pada halaman Realtime HTML Editor ↗

Sampai disini saja dulu pombahasan tentang membuat website dengan togle menu, selamat belajar dan smoga sukses.

Mungkin Anda Menyukai