Lompat ke konten Lompat ke sidebar Lompat ke footer

Langkah Mudah Membuat Sliding Menu Dengan CSS Dan HTML


Hallow sobat blogger mari membagi dan membagi tips sederhana, walau sederhana tapi yang sederhana ini aku yakin ada sebagian  sobat blogger yang belum tahu kan. Gimana sih Cara membuat sliding menu dengan css dan html pada blog platform blogger. Untuk kesempatan kali saya akan membagikan tutorial "Cara membuat menu geser dengan css dan html".

Konten situs web yang terlalu bagus membuat kita membutuhkan ruang yang cukup luas, memungkinkan untuk menyesuaikan menu atau dengan kata lain menyembunyikan menu untuk mendapatkan ruang.

Menu yang disembunyikan tentu saja bisa difungsikan kembali disaat kita membutuhkannya lagi, oleh karena itu terciptalah menu geser atau yang biasa disebut juga dengan istikal drawer menu.

Kita bisa membuat sliding menu atau drawer menu ini dengan css saja, bahkan bisa membuatnya ala-ala material design. Penasaran?

Langkah Mudah Membuat Sliding Menu Dengan CSS Dan HTML


Cara Membuat sliding menu dengan css dan html

Sliding menu yang saya bagikan kali ini adalah menu yang akan muncul atau hilang ketika sebuah tombol berbentuk gambar tiga garis (hamburger menu) di klik. Menu seperti itu sedang jadi tren saat ini.

Membuat struktur HTML

Untuk langkah pertama siapkan dulu file HTML (index.html)
Pada file css dari font awesome jangan lupa disertakan agar kita bisa menampilkan ikon-ikon yang dibutuhkan, seperti ikon hamburger menu, facebook, twitter dan ikon lainnya sesuai isi hati kalian.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Kemudian Di Dalam Tubuh Tubuh Dan / Tubuh, Kita Kita Batal STRTHUR HTML Yang Berisi Daftar Menu Dan ISi ATAU Konten Dari Situs Web. Memicu Atai Pemicu Muncul Auau Menghilangnya MenuBennya Adalah Menbah Checkbox, Jadi KETIKA Checkbox Terpilih Maka Menu Akan Ditikankan, Sedokan Ketika Tidak Terpilih Maka Menu Akan Disembunyikan.

<header>
  <input type="checkbox" id="tag-menu"/>
  <label class="fa fa-bars menu-bar" for="tag-menu"></label>
  <div class="jw-drawer">
    <nav>
      <ul>
        <li><a href="#"><i class="fa fa-facebook"></i>&nbsp;&nbsp;Facebook</a></li>
        <li><a href="#"><i class="fa fa-google-plus"></i>&nbsp;&nbsp;Google Plus</a></li>
        <li><a href="#"><i class="fa fa-twitter"></i>&nbsp;&nbsp;Twitter</a></li>
        <li><a href="#"><i class="fa fa-linkedin"></i>&nbsp;&nbsp;LinkedIn</a></li>
        <li><a href="#"><i class="fa fa-pinterest"></i>&nbsp;&nbsp;Pinterest</a></li>
      </ul>
    </nav>
  </div>
</header>

<div class="content">
  <h1>Jurnalweb.com</h1>
  <p>Contoh pembuatan sliding menu / drawer menu dengan CSS, baca tutorialnya <a href="http://www.jurnalweb.com/tutorial-cara-membuat-sliding-menu-dengan-css-dan-html">disini</a></p>
</div>

Mempercantik dengan CSS

Agar menu yang kalian buat jadi terlihat lebih cantik dan bisa berfungsi dengan baik maka perlu ditambahkan script CSS. Yang kita bikin kali ini menggunakan CSS animation dengan menambahkan efek slide-in dan slide-outuntuk memunculkan dan menyembunyikan menu.

 * {
 padding:0;
 margin:0;
}

body {
 font-family:Verdana, Geneva, sans-serif;
 font-size:18px;
 background-color:#FFF
}

header {
 width:100%;
 background-color:#006faa ;
 z-index:1000;
}

.menu-bar {
 color:#FFF;
 font-size:25px;
 cursor:pointer;
 padding:10px 12px;
 margin-left:10px;
 margin-top:5px;
 margin-bottom:5px;
}

.menu-bar:hover {
 background-color:rgba(0, 0, 0, 0.1);
 border-radius:50px;
}

#tag-menu {
 display:none;
}


#tag-menu:checked ~ div.jw-drawer {
 animation: slide-in 0.5s ease;
 animation-fill-mode: forwards;
}

.jw-drawer {
 position:fixed;
 left:-280px;
 background-color:#006faa;
 height:100%;
 z-index:100;
 width:230px;
 animation: slide-out 0.5s ease;
 animation-fill-mode: forwards;
}

.jw-drawer ul li {
 list-style:none;
}

.jw-drawer ul li a {
 padding:10px 20px;
 text-decoration:none;
 display:block;
 color:#FFF;
 border-top:1px solid #059;
}

.jw-drawer ul li a:hover{
 background-color:rgba(0, 0, 0, 0.1);
}

.jw-drawer ul li a i {
 width:50px;
 height:35px;
 text-align:center;
 padding-top:15px;
}

@keyframes slide-in {
 from {left: -280px;}
 to {left: 0;}
}

@keyframes slide-out {
 from {left: 0;}
 to {left: -280px;}
}


.content{
  padding: 100px 0 0 250px;
} 

Sobat LenkTech sekian dulu yaa untuk tutorial hari ini. Dan semoga artikel kali ini bermanfaat.

Posting Komentar untuk "Langkah Mudah Membuat Sliding Menu Dengan CSS Dan HTML"