Membuat Menu Slide Di Samping

Mau buat menu seperti pada gambar diatas atau pada menu disamping kiri pada blog ini. Gampang sobat hanay ikutis step-stepnya, ok langsung tancap gan....

Pilir Rancangan, Edit Html

Cari kode </head>

Masukan kode dibawah ini sebelum kode no.3



<style type='text/css'>
#sidemnu {
 background: transparent url() right top no-repeat;
 padding: 0;
 position: fixed;
 left: 0;
 width: 355px;
 margin-left: -325px;
 margin-top: 75px;
 -o-transition: all 3s ease-in;
 -moz-transition: all 3s ease-in;
 -webkit-transition: all 3s ease-in;
 opacity: 0.4;
 }
#sidemnu:hover {
 opacity: 1.0;
 -o-transform: translate(325px);
 -moz-transform: translate(325px);
 -webkit-transform: translate(325px);
 }
.GRmouseover {
 font: 20px Arial Narrrow;
 font-weight: bold;
 float: right;
 margin: 10px 10px 0 0;
 color: #FF0000;
 text-shadow: 0.01em 0.01em 0.2em #fff;
 -o-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -webkit-transition: all 0.5s ease; 
 }
.GRmouseover:hover {
 -o-transform: scale(1.0) rotate(720deg) translate(0px);
 -moz-transform: scale(1.0) rotate(720deg) translate(0px);
 -webkit-transform: scale(1.0) rotate(720deg) translate(0px);
 color: #ffffff; 
 text-shadow: 1px 1px 2px #000; 
 background: #bfbfbf; padding: 0 8px; opacity(0.5)
 border-radius: 8px;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px; 
 border: 1px solid #777; 
 }  
#sidemnu .boxdalam {
 padding:10px 5px;
 border: 1px solid #333;
 background: #39393E;
 width: 300px;
 border-radius: 12px;
 -moz-border-radius: 12px;
 -webkit-border-radius: 12px;
 box-shadow: 1px 1px 15px #000; 
 -moz-box-shadow: 1px 1px 15px #000; 
 -webkit-box-shadow: 1px 1px 15px #000; 
 } 
#sidemnu .boxdalam2 {
 width: 275px;
 color: #000066;
 font: 12px Arial;
 padding: 5px 10px;
 }
#sidemnu .boxdalam ul, #sidemnu .boxdalam li{list-style: none;margin: 0;padding: 0;}
#sidemnu .boxdalam h3 {
 font: 18px Droid Serif;
 font-weight: bold;
 color: #2AFF00;
 text-shadow: 0 1px 1px #fff;
 border-bottom: 1px dotted #555;
 border-top: 1px dotted #555;
 background: #15181B;
 text-align: center; 
  }
#sidemnu .boxdalam li {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0HG6WmuuT6EeqaeDd52CKMKtk8-6c7mU3ZC6ULIZAOScJq2Jw_uhyAFbfePceHi8Ga_SSyVzjKncafORCufB2BQaUjtKs7whQ-HAxHJZgFg8vx8fTgMz__bhcoBj2p6CInDc-rkASa3wu/s128/RedArrowH12V10.png) top left no-repeat;
 background-position: 0px 3px;
 border-bottom: 1px dotted #666;
 }
#sidemnu .boxdalam li:hover {
 background: none;
 } 
#sidemnu .boxdalam li a{
 padding-left: 20px;
 font: 11px calibri; 
 color: #00FFFC;
 text-shadow: 0px 1px 1px #000000;
 text-decoration: none; 
 }
#sidemnu .boxdalam li a:hover{
 color: #eee;
 background: #222;
 padding: 5px;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px; 
 text-shadow: 0px 0px 1px red;
 line-height: 20px;
 margin:0 10px;  
 }
#sidemnu .boxdalam img {
 padding: 2px;
 border: 6px solid #000;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 -o-transition: all 3s ease;
 -moz-transition: all 3s ease;
 -webkit-transition: all 3s ease;
 opacity: 0.5;  
 }
#sidemnu .boxdalam img:hover {
 opacity: 1.0;
 }
</style>

Setelah itu cari kode <body>, letakan kode dibawah ini dimana saja yang penting masih di dalam tag <body>



<div id='sidemnu'>
<div class='GRmouseover'>MENU</div>
<div class='boxdalam'>
<div class='boxdalam2' style='height:300px;overflow-y:auto;'>

<h3>Judul 1</h3>
<ul>
<li><a href='url tujuan sobat'>Terserah sobat</a></li>
<li><a href='url tujuan sobat'>Terserah sobat</a></li>
<li><a href='url tujuan sobat'>Terserah sobat</a></li>
<li><a href='url tujuan sobat'>Terserah sobat</a></li>
<li><a href='url tujuan sobat'>Terserah sobat</a></li>
<li><a href='url tujuan sobat'>Terserah sobat</a></li>
</ul>
<h3>Judul 2</h3>
<ul>
<li><a href='url tujuan sobat'>Terserah sobat</a></li>
<li><a href='url tujuan sobat'>Terserah sobat</a></li>
<li><a href='url tujuan sobat'>Terserah sobat</a></li>
<li><a href='url tujuan sobat'>Terserah sobat</a></li>
<li><a href='url tujuan sobat'>Terserah sobat</a></li>
<li><a href='url tujuan sobat'>Terserah sobat</a></li>
</ul>
<h3>Judul 3</h3>
<ul>
<li><a href='url tujuan sobat'>Terserah sobat</a></li>
<li><a href='url tujuan sobat'>Terserah sobat</a></li>
<li><a href='url tujuan sobat'>Terserah sobat</a></li>
<li><a href='url tujuan sobat'>Terserah sobat</a></li>
<li><a href='url tujuan sobat'>Terserah sobat</a></li>
<li><a href='url tujuan sobat'>Terserah sobat</a></li>
</ul>

</div>
</div>
</div>

Setelah itu klik simpan, dan lihat hasilnya.....

Gimana, menarik bukan......
Sobat bisa mengganti warna atau menambah backgroun pada script CSS, untuk url tujuan dan linknya silahkan sobat ganti sesuai dengan keperluan sobat.
Ok selamat berkreasi....
Tetaplah semangat untuk tersenyum, Salam senyum dariku....

Salam senyum dariku untuk semuanya, tetaplah untuk bersemangat. Jangan lupa Comment atau isi buku tamu ya sob. Sedikit pemberitahuan untuk sobat yang ingin mengambil [Copy-Paste], Owner tidak melarang sobat untuk memperbanyak artikel namun Owner berharap sobat berlaku dengan bijak agar mencantumkan link active maupun yang tidak. Owner berharap partisipasinya ya sob.