Sliding Menu Menggunakan HTML Dan CSS

Di panduan kali ini kamu akan belajar bagaimana cara membangun Sliding Fitur Menggunakan HTML Dan CSS .

 

Bagi membangun fitur navigasi kini ini telah banyak yang amat kreatif pada segi tampilanya, dan kebanyakan bagus-bagus. tetapi bagus saja belum tentu bagus dari segi UI dan UX karena menurut saya fitur navigasi yang bagus yaitu fitur yang dapat mengantarkan user atau pengunjung laman ke halaman atau bagian lain dari laman kita tanpa bingung ataupun mengganggu bagian yang lain dari laman kita.

 

Bagi itu saya akan memberikan panduan membangun sliding fitur yang mana design fitur seperti ini amat bermanfaat karena bagian menunya dapat di hilangkan atau tak di tampilkan dan dapat di tampilkan kembali dikala di butuhkan.

 

Salin code berikut :

HTML //

<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>Sliding fitur</h1>
  <p>Contoh penyusunan sliding fitur / drawer fitur dengan CSS</a></p>
</div>

 

CSS//

* {
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;
}

 

Apabila telah silahkan kalian jalankan di browser masing-masing.

Oke itu saja dan semoga bermanfaat. 🙂

Sumber https://kursuswebsite.org