Cara Membuat Menu Aside dengan CSS3

Menu pada tampilan website merupakan element yang paling penting harus ada, karena dengan adanya menu user bisa melihat isi dari web dengan kategori yang berbeda tentunya, biasa nya kita bisa melihat berbagai macam tampilan menu seperti menu dropdown, menu aside dan lain sebagainya. Nah berbicara mengenai tampilan menu pada setiap website berikut ini akan dijelaskan bagaimana Cara Membuat Menu Aside dengan CSS3. Berikut langkah-langkah nya.

Untuk membuat tampilan menu tentunya kita butuh list atau daftar menu yang akan ditampilkan, silahkan ketikan sintak HTML5 berikut untuk membuat list menu nya.

<body>
	<main>
	  <aside>
	    <ul class="menuaside">
	      <li><a href="" class="listmenu">Home</a></li>
	      <li><a href="" class="listmenu">About</a></li>
	      <li><a href="" class="listmenu">Peroduct</a></li>
	      <li><a href="" class="listmenu">Services</a></li>
	      <li><a href="" class="listmenu">Contact Us</a></li>
	    </ul>
	  </aside>
	  <section>
	    <input type="checkbox" id="input">
	    <label for="input">
	      <span class="bar top"></span>
	      <span class="bar middle"></span>
	      <span class="bar bottom"></span>
	    </label>

	    <div class="content">
	      <h1>DUMETSCHOOL.</h1>
	    </div>
	  </section>
	</main>
	</body>

Setelah membuat list menu seperti diatas, selanjut nya adalah kita akan desain tampilan menu diatas  menjadi tampilan menu aside, berikut sintak CSS3 untuk desain menu aside.

@import url('https://fonts.googleapis.com/css?family=Comfortaa');
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: 'Comfortaa', cursive;
}

main {
  height: 100%;
  width: 100%;
}

aside {
  background-color: #e67e22;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 20%;
  z-index: 1;
}

section {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;
  overflow: hidden;
}

label {
  display: inline-block;
  padding: 7px 10px;
  background-color: transparent;
  cursor: pointer;
  margin: 10px;
  z-index: 3;
  position: fixed;
}

.bar {
  display: block;
  background-color: #e67e22;
  width: 30px;
  height: 3px;
  border-radius: 5px;
  margin: 5px auto;
  transition: background-color .5s ease-in, transform .5s ease-in, width .5s ease-in;
}

.content {
  top: 0;
  bottom: 0;
  position: absolute;
  right: 0;
  left: 0;
  background-color: #fff;
  z-index: 2;
  transition: transform .5s ease-in-out;
}

h1 {
  margin: 0;
  position: relative;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: center;
  font-size: 76px;
  font-weight: bold;
  color: #3498db;
}

.menuaside {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 100px;
  text-align: center;
  border-top: 2px solid rgba(255, 255, 255, .7);
}

.listmenu {
  border-bottom: 2px solid rgba(255, 255, 255, .7);
  padding: 20px 0;
  display: block;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 20px;
  font-weight: 500;
  position: relative;
  transition: color .3s .15s ease-in;
}

.listmenu::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100%;
  background-color: #fff;
  width: 0;
  transition: width .3s ease-in;
  z-index: -1;
}

.listmenu:hover {
  color: #e67e22;
}

.listmenu:hover::after {
  width: 100%;
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked ~ .content {
  transform: translateX(20%);
}

input[type="checkbox"]:checked ~ label .bar {
  background-color: #fff;
}

input[type="checkbox"]:checked ~ label .top {
  -webkit-transform: translateY(0px) rotateZ(45deg);
  -moz-transform: translateY(0px) rotateZ(45deg);
  -ms-transform: translateY(0px) rotateZ(45deg);
  -o-transform: translateY(0px) rotateZ(45deg);
  transform: translateY(0px) rotateZ(45deg);
}

input[type="checkbox"]:checked ~ label .bottom {
  -webkit-transform: translateY(-15px) rotateZ(-45deg);
  -moz-transform: translateY(-15px) rotateZ(-45deg);
  -ms-transform: translateY(-15px) rotateZ(-45deg);
  -o-transform: translateY(-15px) rotateZ(-45deg);
  transform: translateY(-15px) rotateZ(-45deg);
}

input[type="checkbox"]:checked ~ label .middle {
  width: 0;
}

.middle {
  margin: 0 auto;
}

.ua {
  position: absolute;
  right: 20px;
  bottom: 20px;
  color: #0799d3;
  font-size: 2em;
  z-index: 2;
}

Setelah semua sintak diatas telah diketikan semua, langkah terakhir adalah simpan file nya kemudian jalankan pada browser masing-masing dan lihat hasilnya. Maka pada browser akan terlihat toggle dipojok kiri atas dan ketikan kalian klik makan akan muncul menu aside. Nah itulah sedikit tutorial mengenai bagaimana Cara Membuat Menu Aside dengan CSS3. semoga bermanfaat dan bisa menjadi inspirasi dalam mendesain tampilan menu.

Selamat mencoba 🙂

Risman Hakim Author

Menjadi seorang Web Designer membuat saya ingin selalu berbagi ilmu. Berbagi tidak mengurangi ilmu, dengan berbagi ilmu akan terus bertambah. Kenal lebih jauh tentang saya di DUMET School :)

Leave a Reply

Your email address will not be published. Required fields are marked *