Sliding Menu Menggunakan HTML Dan CSS

Pada tutorial kali ini anda akan belajar bagaimana cara membuat Sliding Menu Menggunakan HTML Dan CSS .

Untuk membuat menu navigasi sekarang ini sudah banyak yang sangat kreatif dalam segi tampilanya, dan kebanyakan bagus-bagus. tetapi bagus saja belum tentu baik dari segi UI dan UX karena menurut saya menu navigasi yang baik adalah menu yang dapat mengantarkan user atau pengunjung website ke halaman atau bagian lain dari website kita tanpa bingung ataupun mengganggu bagian yang lain dari website kita.

Untuk itu saya akan memberikan tutorial membuat sliding menu yang mana design menu seperti ini sangat berguna karena bagian menunya bisa di hilangkan atau tidak di tampilkan dan bisa di tampilkan kembali saat 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 menu</h1>
  <p>Contoh pembuatan sliding menu / drawer menu 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;
}

Jika sudah silahkan kalian jalankan pada browser masing-masing.

Oke itu saja dan semoga bermanfaat. 🙂

Kategori