Model model desain template web tidak dapat ditinggalkan begitu saja. Selama dakade tentunya para desainer telah bekerja keras untuk membuat tampilan dan antarmuka halaman web yang dapat di pergunakan dengan sama baiknya di berbagai ukuran layar perangkat.
Sehingga muncul istilah desain responsif dan desain adaptif. Keduanya merujuk pada penggunaan halaman di layar desktop dan mobile. Bisa di pergunakan di layar dengan ukuran besar seperti PC desktop dan laptop, bisa di akses dengan mudah dan nyaman melalui layar tablet dan hape.
Contoh menu yang responsif adalah ketika ia dibuka pada beberapa layar berbeda: Pada PC desktop, laptop, tablet dan hape mobile. Pada PC layar besar menu tersebut tampak horisontal, sedangkan pada layar kecil seperti hape ia menjadi berbentuk menu hamburger yang dapat di klik untuk memunculkan menu menu.
Sedangkan pada desain adaptif menu akan terlihat sama baik pada saat di buka melalui layar desktop, laptop, tablet maupun hape mobile.
Model dengan Javascript:
yang unik pada menu hamburger yang akan saya uraikan rahasia pembuatannya adalah: Toggle dari hamburger garis tiga bersusun menjadi close (x). Biasanya itu di buat dengan Javascript. Namun bundle CSS3 ternyata mampu memberikan efek toggle yang sama. Saya tunjukan contoh dengan menggunakan Java script:
<style>
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
</style>
Di atas adalah pengaturan CSS perhatikan perubahan dari bar1 bar2 hingga3, itu pengaturan 3 garis bersusun yang kita sebut menu hamburger tadi.
HTMLnya:
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
Namun ia tidak dapat memberikan transisi toggle atau peralihan dari garis tiga
hamburger menjadi animasi tutup/close (x) tanpa javascript berikut:
<script>
function myFunction(x) {
x.classList.toggle("change");
}
</script>
Hasilnya:
See the Pen by sufyan (@sufyan33) on CodePen.
Model murni CSS:
Cara menerapkan menu hamburger model blogger editblogtema khusus template contempo dan essential (bisa untuk template varian template lain namun dengan sedikit editing bagian CSSnya):
1. CSS
- Masuk ke pengaturan atau dasbor blogger
- Pilih Tema
- Pilih Edit HTML
Pada halaman editor HTML blog yang telah terbuka cari kode </head> dan letakan kode CSS berikut di atasnya:
<style>html,a {text-decoration: none;color: #cdcdcd;transition: color 0.3s ease;outline: none;-webkit-tap-highlight-color: transparent;}a:hover {color: #6f0000;}h1 {text-align: center;float:center;margin-left:20px;position: absolute;top: 28px;color: #cdcdcd;-webkit-user-select: none;user-select: none;}#navicon {display: block;position: absolute;top: 18px;left: 20px;z-index: 999;-webkit-user-select: none;user-select: none;}#navicon input {display: block;width: 50px;height: 32px;position: absolute;top: 5px;left: -5px;cursor: pointer;opacity: 0;z-index: 1000;-webkit-tap-highlight-color: transparent;}#navicon span {display: block;width: 33px;height: 4px;top: 17px;left: 10px;margin-bottom: 5px;position: relative;background: #CCCCFF;border-radius: 3px;z-index: 999;transform-origin: 4px 0px;transition: transform 0.5s ease-in-out, background 0.5s ease,opacity 0.55s ease;}.drawer {opacity: 0;visibility: hidden;position: fixed;width: 100%;height: 100%;margin: -100px 0 0 -50px;padding-top: 125px;padding-right: 20px;background: #000000;transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;}.drawer li {transform: translate(0, 100%);transition: transform 1s ease-in-out;list-style-type: none;text-align: center;padding: 10px 20px;font-size: 22px;}#navicon input:checked ~ .drawer {opacity: 0.8;visibility: visible;}#navicon input:checked ~ .drawer li {transform: translate(0, 0);}#navicon input:checked ~ span {opacity: 1;transform: rotate(45deg) translate(-2px, -1px);background: #cdcdcd;}#navicon input:checked ~ span:nth-last-child(3) {opacity: 0;transform: rotate(0deg) scale(0.2, 0.2);}#navicon input:checked ~ span:nth-last-child(2) {opacity: 1;transform: rotate(-45deg) translate(0, -1px);}#navicon span:first-child,#navicon span:nth-last-child(2) {transform-origin: 0% 100%;}</style>
2. HTML
Lalu di bawah kode </head> tadi letakan kode HTML berikut :
<header><div id='navicon'><input type='checkbox'/><span/><span/><span/><ul class='drawer'><li><a href='/'><svg style='width:44px;height:44px' viewBox='0 0 24 24'><path d='M19.07,4.93C17.22,3 14.66,1.96 12,2C9.34,1.96 6.79,3 4.94,4.93C3,6.78 1.96,9.34 2,12C1.96,14.66 3,17.21 4.93,19.06C6.78,21 9.34,22.04 12,22C14.66,22.04 17.21,21 19.06,19.07C21,17.22 22.04,14.66 22,12C22.04,9.34 21,6.78 19.07,4.93M17,12V18H13.5V13H10.5V18H7V12H5L12,5L19.5,12H17Z' fill='currentColor'/></svg></a></li><li><a href='#link1'>Trik meletakan profile penulis</a></li><li><a href='#link2'>Kode warna</a></li><li><a href='#link3'>Utak atik template</a></li><li><a href='#link4'>A.I dan Singularity</a></li><li><a href='#link5'>Paradox</a></li><li><a href='#link6'>Navigasi menu Blog</a></li><li><a href='#link7'>Sudut Cerita</a></li><li><a href='#link8'>Tips dan Triks</a></li></ul></div></header>
Ganti setiap tulisan (link menu) yang disorot kuning dengan URL atau link kalian sendiri
Ganti setiap tulisan (judul menu) dengan Judul menu kalian sendiri.
3. Kesimpulan
Menu tersebut adalah responsif dan terlihat adaptif pada setiap ukuran layar
Murni CSS tanpa Javascript
Namun untuk menerapkannya seperti template editblogtema, kalian harus merombak layout template secara keseluruhan, misalnya tataletak header dari section ke section harus dipindah dari posisi aslinya.
.png)
