Langkah Gampang Menciptakan Sliding Sajian Dengan Css Dan Html

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

Konten situs web yang terlalu bagus menciptakan kita membutuhkan ruang yang cukup luas, memungkinkan untuk menyesuaikan hidangan atau dengan kata lain menyembunyikan hidangan untuk mendapat ruang.

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

Kita dapat menciptakan sliding hidangan atau drawer hidangan ini dengan css saja, bahkan dapat membuatnya ala-ala material design. Penasaran?

Cara Membuat sliding hidangan dengan css dan html

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

Membuat struktur HTML

Untuk langkah pertama siapkan dulu file HTML (index.html)
Pada file css dari font awesome jangan lupa disertakan semoga kita dapat menampilkan ikon-ikon yang dibutuhkan, ibarat 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, Makara 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 hidangan / drawer hidangan 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 hidangan yang kalian buat jadi terlihat lebih manis dan dapat berfungsi dengan baik maka perlu ditambahkan script CSS. Yang kita bikin kali ini memakai CSS animation dengan menambahkan dampak 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.

Bagikan Artikel ini