Cara Gampang Menciptakan Sajian Navigasi Multilevel Responsive Di Blog

Cara Praktis Membuat Menu Navigasi Multilevel Responsive di Blog

Artikel kali ini merupakan artikel pertama dari aku yang membahas perihal pembuatan sajian navigasi di blog, pada artikel sebelumnya aku hanya sedikit membahas perihal cara menciptakan color picker, template, pembuatan form dll yang sanggup anda lihat di style milik .

Sebelum memulai cara gampang menciptakan sajian navigasi multilevel responsive di blog ini, aku akan sedikit menjelaskan fungsi dari sajian navigasi itu sendiri.

Ini merupakan beberapa fungsi dari sajian 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 sajian navigasi, namun bantu-membantu ada 1 fungsi lagi yang mungkin sudah tidak absurd lagi untuk Anda, yaitu:

Salah satu syarat untuk mendaftar Google Adsense.

Fungsi inilah yang berkhasiat bagi Anda yang ingin bermitra dengan Google Adsense.

Kurang lebih kita akan menciptakan sajian navigasi multilevel menyerupai pada gambar di atas.

Pada pembuatan sajian navigasi ini kita memakai 3 jenis isyarat yaitu HTML, CSS, dan JavaScript. Pasang ketiga jenis isyarat ini dengan benar semoga tampil sesuai dengan demo yang aku berikan, untuk melihat demonya silahkan klik button dibawah ini.

Silahkan simak untuk cara pemasangannya.

Kode HTML

Untuk pemasangan isyarat HTML ini silahkan Anda cari </header> di dalam template blog Anda, dan simpan isyarat HTML di bawah ini sempurna di atas isyarat </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 isyarat CSS ini Anda sanggup menyimpannya di atas isyarat ]]></b:skin> atau semoga isyarat CSS ini tidak bercampur dengan isyarat bawaan template, Anda sanggup menciptakan isyarat CSS sendiri di bawah isyarat <body> dengan menambahkan isyarat <style type='text/css'> isi isyarat 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 isyarat JavaScript ini Anda cari isyarat </body>, lalu simpan isyarat JavaScript di bawah ini sempurna di atas isyarat </body>.

 <script type='text/javascript'> $(document).ready(function(){     var touch  = $('#resp-rdmenu');     var sajian  = $('.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 sanggup Anda simpan di dalam template blog Anda. Jika, di dalam template blog Anda belum terdapat isyarat di bawah ini, bila memang isyarat 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 isyarat <head>.

Keterangan:

Kode # di dalam isyarat HTML isi dengan link tujuan yang sesuai dengan nama menu.
Kode rdmenu yang terdapat di dalam isyarat HTML, CSS dan JavaScript merupakan style yang sanggup Anda ubah, kenapa aku memakai nama rdmenu, alasannya yakni supaya tidak terjadi ukiran antara isyarat sajian bawaan template blog Anda dengan isyarat sajian .
Kode rdnav di dalam isyarat CSS yang bab background, sanggup anda sesuaikan dengan warna template Anda.
Untuk Kode JavaScript bisa Anda terapkan atau tidak juga tidak jadi masalah.

Untuk lebih gampang dalam pengeditan, aku sarankan Anda memakai text editor terlebih dahulu alasannya yakni itu akan lebih mempermudah dalam pengeditak kode.

Baca: 10 Text Editor Terbaik Untuk Pemrograman

Nantikan tutorial-tutorial berikutnya hanya di , maka dari itu silahkan Anda Follow blog aku atau like Fanspage Facebook aku untuk mendapat gosip tutorial-tutorial yang keren berikutnya.