Membuat Sidebar Menu 2 Level CSS dan jQuery

Posted by Desain Kode Tuesday, January 12, 2016 1 comments
membuat sidebar menu 2 level css dan jquery

Pada kesempatan ini, saya akan membagikan tutorial membuat Sidebar Menu atau menu yang ada di samping kanan blog Desain Kode ini. Tutorial ini akan menjawab pertanyaan berikut dari salah satu komentator di blog DesainKode. Memang saya sudah menjelaskannya di balasan komentar tersebut, tapi alangkah baiknya jika dijadikan artikel tutorial di blog ini, agar yang lain bisa mencobanya jika berminat dengan menu samping ini.

membuat menu samping blog desainkode


Menu ini bersifat melayang (fixed) dimana iconnya menggunakan font-awesome. Jadi, kita bebas memilih ikon dan bebas menentukan nama judul-judul menunya. Klik Tombol dibawah untuk melihat demonya.


Langsung saja, silahkan ikuti langkah-langkah berikut jika ingin menerapkannya di blog anda :

Membuka Menu Di Awal Tampilan

1. Buka Menu Template Edit HTML

2. Letakkan kode CSS berikut di atas kode ]]></b:skin>
.MenuKanan {
  min-width: 1260px;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0px auto;
}
.MenuKanan.MenuKanan-mengecil .MenuKananblog {
  width: 62px;
  transition: all 200ms cubic-bezier(0.45, 0.05, 0.55, 0.95);;
  transition-delay: 400ms;
}
.MenuKanan.MenuKanan-melebar .MenuKananblog {
  width: 250px;
  transition: all 200ms cubic-bezier(0.45, 0.05, 0.55, 0.95);;
}
.MenuKanan.MenuKanan-mengecil .MenuKanan-icon {
  transform: rotate(90deg);
  transition: all 400ms cubic-bezier(0.45, 0.05, 0.55, 0.95);;
}
.MenuKanan.MenuKanan-melebar .MenuKanan-icon {
  transform: rotate(0deg);
  transition: all 400ms cubic-bezier(0.45, 0.05, 0.55, 0.95);;
}
.MenuKanan.MenuKanan-mengecil .LogoMenu {
  height: 135px;
  transition: all 200ms cubic-bezier(0.45, 0.05, 0.55, 0.95);;
  transition-delay: 400ms;
}
.MenuKanan.MenuKanan-melebar .LogoMenu {
  height: 135px;
  transition: all 200ms cubic-bezier(0.45, 0.05, 0.55, 0.95);;
}
.MenuKanan.MenuKanan-mengecil #LogoMenu {
  opacity: 0;
  transition: all 300ms cubic-bezier(0.45, 0.05, 0.55, 0.95);;
}
.MenuKanan.MenuKanan-melebar #LogoMenu {
  opacity: 1;
  transition: all 300ms cubic-bezier(0.45, 0.05, 0.55, 0.95);;
  transition-delay: 400ms;
}
.MenuKanan.MenuKanan-mengecil #IsiMenuKanan span {
  opacity: 0;
  transition: all 100ms linear;
}
.MenuKanan.MenuKanan-melebar #IsiMenuKanan span {
  opacity: 1;
  transition: all 300ms linear;
  transition-delay: 400ms;
}
.MenuKananblog {
  position: fixed;
  float: left;
  width: 250px;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #353940;
  color: #BFBFBF;
  font-family: "Segoe UI";
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
  z-index: 1;
}
#IsiMenuKanan {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom: 20px;
}
#IsiMenuKanan li {
  position: relative;
  margin: 0;
  font-size: 12px;
  border-bottom: 1px solid rgba(69, 74, 84, 0.7);
  padding: 0;
}
#IsiMenuKanan li ul {
  opacity: 0;
  height: 0px;
}
#IsiMenuKanan li a {
  font-style: normal;
  font-weight: 400;
  position: relative;
  display: block;
  padding: 10px 20px;
  color: #BFBFBF;
  white-space: nowrap;
  z-index: 2;
}
#IsiMenuKanan li a:hover {
  color: #ffffff;
  background-color: #333944;
  transition: color 2100ms cubic-bezier(0.45, 0.05, 0.55, 0.95);, background-color 2100ms cubic-bezier(0.45, 0.05, 0.55, 0.95);;
}
#IsiMenuKanan li.active > a {
  background-color: #2b303a;
  color: #ffffff;
}
#IsiMenuKanan ul li { background-color: #2b303a; }
#IsiMenuKanan ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#IsiMenuKanan li ul {
  position: absolute;
  visibility: hidden;
  right: 100%;
  top: -1px;
  background-color: #2b303a;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.1s linear;
  border-top: 1px solid rgba(69, 74, 84, 0.7);
}
#IsiMenuKanan li:hover > ul {
  visibility: visible;
  opacity: 1;
}
#IsiMenuKanan li li ul {
  right: 100%;
  visibility: hidden;
  top: -1px;
  opacity: 0;
  transition: opacity 0.1s linear;
}
#IsiMenuKanan li li:hover ul {
  visibility: visible;
  opacity: 1;
}
#IsiMenuKanan .fa { margin-right: 5px; }
.LogoMenu {
  width: 100%;
  padding: 22px;
  box-sizing: border-box;
}
.MenuKanan-icon {
  position: relative;
  float: right;
  margin-top: 30px;
  border: 1px solid #454a54;
  text-align: center;
  line-height: 1;
  font-size: 16px;
  padding: 8px 10px;
  border-radius: 3px;
  color: #888;
  background-clip: padding-box;
  text-shadow: 5px 5px 7px rgba(0,0,0,0.5);
}
.fa-heartbeat {
  color: #fff;
  margin-left: 50px;
}

3. Taruh kode HTML berikut di atas kode </body>
<div class="MenuKanan">
<div class="MenuKananblog">
    <header class="LogoMenu"> <a href="#" class="MenuKanan-icon"> <span class="fa fa-bars"></span> </a> <a href="#"> <span id="LogoMenu" class="fa fa-heartbeat fa-5x"></span></a> </header>
    <div style="border-top:1px solid rgba(68, 74, 74, 0.8)"></div>
    <div class="IsiMenuKanan">
      <ul id="IsiMenuKanan" >
        <li id="IsiMenuKanan-home" ><a href="http://desainkode.blogspot.co.id/"><i class="fa fa-home"></i><span>Home</span></a></li>
        <li><a href="#"><i class="fa fa-envelope"></i><span>About</span><span class="fa fa-angle-right" style="float: right"></span></a>
          <ul>
            <li><a href="#">Halaman Kontak</a></li>
            <li><a href="#">Tentang Kami</a></li>
          </ul>
        </li>
        <li><a href="#"><i class="fa fa-anchor"></i><span>Blog Tools</span><span class="fa fa-angle-double-right" style="float: right"></span></a>
          <ul>
            <li style="width: 130px" ><a href="#">Tools 1<i class="fa fa-angle-right" style="float: right; margin-right: -8px; margin-top: 2px;"></i></a>
              <ul>
                <li><a href="#">Tools 1.1</a></li>
                <li><a href="#">Tools 1.2</a></li>
              </ul>
            </li>
            <li><a href="#">Tools 2</a></li>
            <li><a href="http://editkode-live.blogspot.co.id/"><span>EditorKode-Live</span></a></li>
          </ul>
        </li>
        <li><a href="#"><i class="fa fa-sitemap"></i><span>Sitemaps</span></a></li>
        <li><a href="#"><i class="fa fa-share-alt"></i><span>Share</span><span class="fa fa-angle-right" style="float: right"></span></a>
          <ul>
            <li><a href="#" onclick='window.open(&apos;https://www.facebook.com/sharer/sharer.php?u=&apos; + encodeURIComponent(document.URL)); return false;' target='_blank' title='Share on Facebook' rel='nofollow' target='_blank'><i class="fa fa-facebook"></i> Facebook</a></li>
            <li><a href="#" onclick='window.open(&apos;https://twitter.com/intent/tweet?text=&apos; + encodeURIComponent(document.title) + &apos;:%20&apos;  + encodeURIComponent(document.URL)); return false;' rel='nofollow' target='_blank'><i class="fa fa-twitter"></i> Twitter</a></li>
            <li><a href="#" onclick='window.open(&apos;https://plus.google.com/share?url=&apos; + encodeURIComponent(document.URL)); return false;' rel='nofollow' target='_blank' title='Share on Google+' rel='nofollow' target='_blank'><i class="fa fa-pinterest"></i> Google+</a></li>
          </ul>
        </li>
        
      </ul>
    </div>
  </div>
</div>

4. Taruh kode jQuery berikut, juga di atas kode </body>
<script>
//Sidebar IsiMenuKanan DesainKode
var toggle = true;
            
$(".MenuKanan-icon").click(function() {                
  if (toggle)
  {
    $(".MenuKanan").addClass("MenuKanan-mengecil").removeClass("MenuKanan-melebar");
    $("#IsiMenuKanan span").css({"position":"absolute"});
  }
  else
  {
    $(".MenuKanan").removeClass("MenuKanan-mengecil").addClass("MenuKanan-melebar");
    setTimeout(function() {
      $("#IsiMenuKanan span").css({"position":"relative"});
    }, 500);
  }
                
                toggle = !toggle;
            });
</script>

5. Agar template lebih tersusun rapi, simpan saja eksternal resource Font Awesome dan jQuery Library berikut di atas <b:skin>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
Note: Hapus salah satu atau kedua eksternal resource tersebut jika sudah ada di template blog anda

6. Save dan Lihat Hasilnya

Menutup Menu Di Awal Tampilan

Saat ditampilkan, menu ini akan langsung terbuka jika menggunakan kode yang diatas. Nah, jika ingin menampilkan menu yang tertutup di awal, Edit di bagian CSS-nya :

  • Ganti semua width: 250px; dengan width: 62px; (ada 2)
  • Ganti juga width: 62px; dengan width: 250px; (ada 1)

Sekian tutorial untuk membuat Sliding Sidebar Menu 2 Level dengan CSS dan jQuery. Jangan lupa Subcribe dan berlangganan Artikel dari blog DesainKode, masukkan alamat email di bagian footer blog ini. Gratis, langsung ke email anda.

1 comment

Faizal
Balas
Faizal
Terima kasih gan,,,akan segera dicoba ilmu barunya tentang membuat sidebar menu 2 level CSS dan JQuery,,,semangat gan,,,

Kunjungi website saya ya : https://faiz4l.mahasiswa.atmaluhur.ac.id/ dan website kampus saya : http://www.atmaluhur.ac.id

Tautan (link) hidup dalam komentar bersifat nofollow.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://nama_situs.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI...</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI...</em>

Konversi Kode di Sini

:) :( :p :D :o ;) 8-) 8:) :/ :'( 3:) O:) :* <3 ^_^ -_- o.O O.o >:o :v :3
Batal