Cara Mudah Membuat Menu Navigasi Multilevel Responsive di Blog
Artikel kali ini merupakan artikel pertama dari saya yang membahas tentang pembuatan menu navigasi di blog, pada artikel sebelumnya saya hanya sedikit membahas tentang cara membuat color picker, template, pembuatan form dll yang bisa anda lihat di style milik Rizki Design.
Sebelum memulai cara mudah membuat menu navigasi multilevel responsive di blog ini, saya akan sedikit menjelaskan fungsi dari menu navigasi itu sendiri.
Ini merupakan beberapa fungsi dari menu navigasi:
- Membantu Anda untuk mempermudah dalam mengelola blog atau website.
- Membantu pengunjung yang mengunjungi blog atau website.
- Memperindah tampilan blog atau website.
Mungkin itu salah satu fungsi dari menu navigasi, namun sebenarnya ada 1 fungsi lagi yang mungkin sudah tidak asing lagi untuk Anda, yaitu:
- Salah satu syarat untuk mendaftar Google Adsense.
Fungsi inilah yang berguna bagi Anda yang ingin bermitra dengan Google Adsense.
Kurang lebih kita akan membuat menu navigasi multilevel seperti pada gambar di atas.
Pada pembuatan menu navigasi ini kita menggunakan 3 jenis kode yaitu HTML, CSS, dan JavaScript. Pasang ketiga jenis kode ini dengan benar agar tampil sesuai dengan demo yang saya berikan, untuk melihat demonya silahkan klik button dibawah ini.
Silahkan simak untuk cara pemasangannya.
Kode HTML
Untuk pemasangan kode HTML ini silahkan Anda cari </header> di dalam template blog Anda, dan simpan kode HTML di bawah ini tepat di atas kode </header>.
<rdnav>
<center><a class="responsive-rdmenu" href="#" id="resp-rdmenu"><i class="fa fa-reorder"></i></a></center>
<ul class="rdmenu">
<li><a class="rdhome" href="/"><i class="fa fa-home"></i> Home</a>
<ul class="sub-rdmenu">
<li><a href="#">DropDown Home 1</a></li>
<li><a href="#">DropDown Home 2</a></li>
<li><a href="#">DropDown Home 3</a></li>
<li><a href="#">DropDown Home 4</a></li>
<li><a href="#">DropDown Home 5</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-user"></i> About</a></li>
<li><a href="#"><i class="fa fa-camera"></i> Portofolio</a>
<ul class="sub-rdmenu">
<li><a href="#">DropDown Portofolio 1</a></li>
<li><a href="#">DropDown Portofolio 2</a>
<ul>
<li><a href="#">DropDown I Portofolio 1</a></li>
<li><a href="#">DropDown I Portofolio 2</a></li>
<li><a href="#">DropDown I Portofolio 3</a></li>
<li><a href="#">DropDown I Portofolio 4</a></li>
<li><a href="#">DropDown I Portofolio 5</a></li>
</ul>
</li>
<li><a href="#">Portofolio 3</a>
<ul>
<li><a href="#">DropDown Portofolio 1</a></li>
<li><a href="#">DropDown Portofolio 2</a></li>
<li><a href="#">DropDown Portofolio 3</a></li>
<li><a href="#">Sub Sub-Menu 4</a></li>
<li><a href="#">DropDown Portofolio 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-bullhorn"></i> Blog</a></li>
<li><a href="#"><i class="fa fa-tags"></i> Categori</a>
<ul class="sub-rdmenu">
<li><a href="#">DropDown Categori 1</a></li>
<li><a href="#">DropDown Categori 2</a>
<ul>
<li><a href="#">DropDown I Categori 1</a></li>
<li><a href="#">DropDown I Categori 2</a></li>
<li><a href="#">DropDown I Categori 3</a></li>
<li><a href="#">DropDown I Categori 4</a></li>
<li><a href="#">DropDown I Categori 5</a></li>
</ul>
</li>
<li><a href="#">Categori 3</a>
<ul>
<li><a href="#">DropDown Categori 1</a></li>
<li><a href="#">DropDown Categori 2</a></li>
<li><a href="#">DropDown Categori 3</a></li>
<li><a href="#">DropDown Categori 4</a></li>
<li><a href="#">DropDown Categori 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-envelope"></i> Contact</a></li>
<li><a href="#"><i class="fa fa-sitemap"></i> Sitemap</a></li>
<li><a href="#"><i class="fa fa-exclamation-triangle"></i> Disclaimer </a></li>
</ul>
</rdnav>Kode CSS
Untuk menyimpan kode CSS ini Anda bisa menyimpannya di atas kode ]]></b:skin> atau agar kode CSS ini tidak bercampur dengan kode bawaan template, Anda bisa membuat kode CSS sendiri di bawah kode <body> dengan menambahkan kode <style type='text/css'> isi kode CSS di bawah ini </style>.
rdnav{
display: block;
background: #424242;
}
.rdmenu{
display: block;
}
.rdmenu li{
display: inline-block;
position: relative;
z-index: 100;
}
.rdmenu li:first-child{
margin-left: 0;
}
.rdmenu li a{
font-weight: 600;
text-decoration: none;
padding: 20px 15px;
display: block;
color: #b7b7b7;
transition: all 0.2s ease-in-out 0s;
}
.rdmenu li a:hover,.menu li:hover>a{
color: #fff;
background: orange;
}
.rdmenu ul{
visibility: hidden;
opacity: 0;
margin: 0;
padding: 0;
width: 150px;
position: absolute;
left: 0px;
background: #fff;
z-index: 99;
transform: translate(0,20px);
transition: all 0.2s ease-out;
}
.rdmenu ul:after{
bottom: 100%;
left: 20%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 6px;
margin-left: -6px;
}
.rdmenu ul li{
display: block;
float: none;
background: none;
margin: 0;
padding: 0;
}
.rdmenu ul li a{
font-size: 12px;
font-weight: normal;
display: block;
color: #797979;
background: #fff;
}
.rdmenu ul li a:hover,.menu ul li:hover>a{
background: #F70000;
color: #fff;
}
.rdmenu li:hover>ul{
visibility: visible;
opacity: 1;
transform: translate(0,0);
}
.rdmenu ul ul{
left: 149px;
top: 0px;
visibility: hidden;
opacity: 0;
transform: translate(20px,20px);
transition: all 0.2s ease-out;
}
.rdmenu ul ul:after{
left: -6px;
top: 10%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 6px;
margin-top: -6px;
}
.rdmenu li>ul ul:hover{
visibility: visible;
opacity: 1;
transform: translate(0,0);
}
.responsive-rdmenu{
display: none;
width: 100%;
padding: 20px 15px;
background: #374147;
color: #fff;
text-transform: uppercase;
font-weight: 600;
}
.responsive-rdmenu:hover{
background: #374147;
color: #fff;
text-decoration: none;
}
a.rdhome{
background: #F70000;
}
@media (min-width: 768px) and (max-width: 979px){
.rdmainWrap{
width: 768px;
}
.rdmenu ul{
top: 37px;
}
.rdmenu li a{
font-size: 12px;
}
a.rdhome{
background: #374147;
}
}
@media (max-width: 767px){
.rdmainWrap{
width: auto;
padding: 50px 20px;
}
.rdmenu{
display: none;
}
.responsive-rdmenu{
display: block;
}
rdnav{
margin: 0;
background: none;
}
.rdmenu li{
display: block;
margin: 0;
}
.rdmenu li a{
background: #fff;
color: #797979;
}
.rdmenu li a:hover,.menu li:hover>a{
background: #F70000;
color: #fff;
}
.rdmenu ul{
visibility: hidden;
opacity: 0;
top: 0;
left: 0;
width: 100%;
transform: initial;
}
.rdmenu li:hover>ul{
visibility: visible;
opacity: 1;
position: relative;
transform: initial;
}
.rdmenu ul ul{
left: 0;
transform: initial;
}
.rdmenu li>ul ul:hover{
transform: initial;
}
}
@media (max-width: 480px){
}
@media (max-width: 320px){
}Kode JavaScript
Untuk memasang kode JavaScript ini Anda cari kode </body>, kemudian simpan kode JavaScript di bawah ini tepat di atas kode </body>.
<script type='text/javascript'>
$(document).ready(function(){
var touch = $('#resp-rdmenu');
var menu = $('.rdmenu');
$(touch).on('click', function(e){
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 767 && menu.is(':hidden')){
menu.removeAttr('style');
}
});
});
</script>
Link untuk memanggil Font Awesome & jQuery
Link ini bisa Anda simpan di dalam template blog Anda. Jika, di dalam template blog Anda belum terdapat kode di bawah ini, jika memang kode di bawah ini sudah terdapat di template blog Anda, sebaiknya Anda tidak perlu memasangnya kembali.
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Untuk menyimpan link di atas silahkan Anda simpan di bawah kode <head>.
Keterangan:
- Kode # di dalam kode HTML isi dengan link tujuan yang sesuai dengan nama menu.
- Kode rdmenu yang terdapat di dalam kode HTML, CSS dan JavaScript merupakan style yang bisa Anda ubah, kenapa saya menggunakan nama rdmenu, karena supaya tidak terjadi tabrakan antara kode menu bawaan template blog Anda dengan kode menu Rizki Design.
- Kode rdnav di dalam kode CSS yang bagian background, bisa anda sesuaikan dengan warna template Anda.
- Untuk Kode JavaScript bisa Anda terapkan atau tidak juga tidak jadi masalah.
Baca: 10 Text Editor Terbaik Untuk PemrogramanNantikan tutorial-tutorial berikutnya hanya di Rizki Design, maka dari itu silahkan Anda Follow blog saya atau like Fanspage Facebook saya untuk mendapatkan informasi tutorial-tutorial yang keren berikutnya.