Cara Mudah Membuat Menu Navigasi Responsive Mirip Evo Magz

Sumber:www.masyadi.com

Kalian pasti pernah kan melihat menu navigasi yang terdapat pada template Evo Magz buatan mas sugeng? admin yakin pasti kalian sudah pernah melihat menu navigasi responsive tersebut. menu navigasi sendiri berfungsi untuk mempermudah pengunjung blog menelusuri isi dari setiap artikel yang terdapat pada blog kita.

Dan bukan hanya ituh saja menu navigasi juga berperan penting dari hasil pencarian google atau iklan google (adsense), jadi jika kalian ingin mendaftarkan blog ke google adsense pastikan blog yang kita punya sudah terdapat menu navigasi tersebut.

Nah pada kesempatan kali ini Riziq Design akan membahas cara mudah membuat menu navigasi responsive mirip Evo Magz, template buatan mas sugeng yang satu ini memang sangat responsive sekali, jadi jika kita buka melalu browser yang berbeda pun tampilnya akan terlihat keren dan menyesuaikan dengan layar smartphone atau layar komputer yang mengaksesnya.

Oke jika kalian sudah tidak sabar pengen cepet-cepet tahu caranya kita langsung saja menuju ke tutorialnya, silahkan lihat di bawah ini.

1) Masuk Blogger.
2) Pilih Tema => Edit HTML.

3) Lalu cari kode ]]></b:skin> atau </style> gunakan tombol Ctrl+F untuk mempermudah pencarian.

4) Jika sudah ketemu kalian copy kode di bawah ini tepat di atas kode ]]></b:skin> atau </style> tadi.

/* Navigasi Black As Kariting */ .toggleMenu{display:none;background:#E73138;padding:0 15px;height:48px;line-height:48px;color:#fff!important} #nav{font:normal bold 12px Arial,sans-serif;background:#333333;text-transform:uppercase;height:48px;line-height:48px} .nav-menu2{background:#333333;list-style:none;margin:0 0 0 0;*zoom:1;float:left} .nav-menu2:before,.nav-menu2:after{content:" ";display:table} .nav-menu2:after{clear:both} .nav-menu2 ul{list-style:none;margin:0 0 0 0;width:12em} .nav-menu2 a{display:block;padding:0 15px} .nav-menu2 li{position:relative;margin:0 0} .nav-menu2 > li{float:left} .nav-menu2 > li > a{display:block;height:48px;line-height:48px;color:#ffffff;box-shadow:0 4px 0 #333333 inset} .nav-menu2 > li > a.active{background:#222222;box-shadow:0 4px 0 #E73138 inset} .nav-menu2 > li:hover > a{background:#222222;box-shadow:0 4px 0 #E73138 inset} .nav-menu2 li ul{background:#fff;display:block;position:absolute;left:0;z-index:10;visibility:hidden;opacity:0;-webkit-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-ms-transition:all .25s ease-out;-o-transition:all .25s ease-out;transition:all .25s ease-out;border:1px solid #d9d9d9;border:1px solid rgba(217,217,217,1);box-shadow:0 0 2px rgba(0,0,0,0.2)} .nav-menu2 li li ul{left:100%;top:-1px} .nav-menu2 > li.hover > ul{visibility:visible;opacity:10} .nav-menu2 > li > ul:before{content:"";width:0;height:0;position:absolute;bottom:100%;left:20px;border-width:8px;border-style:solid;border-color:transparent transparent #fff transparent;display:block} .nav-menu2 li li.hover ul{visibility:visible;opacity:10} .nav-menu2 li li a{display:block;color:#333;position:relative;z-index:100;line-height:32px} .nav-menu2 li li a:hover{background:#f0f0f0} .nav-menu2 li li li a{background:#fff;z-index:20;color:#333} .nav-menu2 li .parent:after{content:"\f107";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px} #search-form{background:#333333;float:right;margin:0 0;width:200px} #search-form table{width:100%;margin:0 0 0 0} #search-form td.search-box{padding-right:30px} #search-form input#search-box[type="text"]{background:#ffffff;height:36px;line-height:36px;margin:5px 0 5px 10px;padding:0 10px;width:99%;color:#666666;border:none} #search-form input#search-button[type="submit"]{font-family:FontAwesome;background:#E73037;color:#ffffff;height:36px;line-height:36px;margin:5px 10px 5px 0;padding:0 12px;border:none;outline:none;transition:all 0.25s;-moz-transition:all 0.25s;-webkit-transition:all 0.25s} #search-form input#search-button[type="submit"]:hover{background:#222222;cursor:pointer} #search-form input#search-box[type="text"]:focus{background:#eee;outline:none} @media only screen and (max-width:768px){.nav{float:none;width:100%;max-width:100%}.active{display:block}#search-form{width:100%;margin:0 0 0 0!important}.nav li ul:before{display:none}.nav > li{float:none;overflow:hidden}.nav ul{display:block;width:100%;float:none}.nav-menu2 li ul{background:#eee;border:none;box-shadow:none}.nav-menu2 li li ul{background:#f5f5f5}.nav-menu2 li li a:hover{background:#ddd}.nav > li.hover > ul,.nav li li.hover ul{position:static}#search-form{width:100%;background:#444}#search-form td.search-box{padding:0 10px!important}#search-form td.search-button{padding:0 10px;width:1%}#search-form input#search-box[type="text"]{margin:0 0 0 0}#search-form input#search-button[type="submit"]{margin:0 0 0 0}} 

5) Lalu copy kode di bawah ini tepat di bawah kode </header>.

<nav id='nav'> <a class='toggleMenu' href='#'><i class='fa fa-th-list'/> Menu</a> <!-- secondary navigation menu start --> <ul class='nav nav-menu2'> <li><a class='active' href='/'><i class='fa fa-home'/> Home</a></li> <li><a href='#'>Menu1</a> <li><a href='#'>Menu2</a></li> <li><a href='#'>Menu3</a></li> </li> <li><a href='#'>Menu4</a> <ul> <li><a href='#'>SubMenu1</a></li> <li><a href='#'>SubMenu2</a></li> <li><a href='#'>SubMenu3</a></li> <li><a href='#'>SubMenu4</a></li> </ul> </li> <li><a href='#'>Menu5</a> <ul> <li><a href='#'>SubMenu1</a></li> <li><a href='#'>SubMenu2</a></li> <li><a href='#'>SubMenu3</a></li> </ul> </li> <li><a href='#'>Menu6</a></li> <li><a href='#'>Menu7</a></li> </ul> <!-- secondary navigation menu end --> <form action='/search' id='search-form' method='get' style='display: inline;'><table><tbody><tr><td class='search-box'><input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='SEARCH...' vinput=''/></td> <td class='search-button'><input id='search-button' type='submit' value=''/></td></tr></tbody></table></form> </nav> 

Admin sarankan agar kalian hapus kode menu navigasi yang dulu baru ganti dengan kode di atas.

6) Agar menu navigasinya menjadi responsive silahkan kalian copy kode di bawah ini dan pastekan tepat di atas kode ]]></b:skin> atau </style> tadi.

@media only screen and (max-width: 768px) { .nav { float: none; width: 100%; max-width: 100%; }.active { display: block; }#search-form { width: 100%; margin: 0 0 0 0 !important; }.nav li ul:before { display: none; }.nav > li { float: none; overflow: hidden; }.nav ul { display: block; width: 100%; float: none; }.nav-menu2 li ul { background: #eee; border: none; box-shadow: none; }.nav-menu2 li li ul { background: #f5f5f5; }.nav-menu2 li li a:hover { background: #ddd; }.nav > li.hover > ul, .nav li li.hover ul { position: static; }#search-form { width: 100%; background: #444; }#search-form td.search-box { padding: 0 10px !important; }#search-form td.search-button { padding: 0 10px; width: 1%; }#search-form input#search-box[type="text"] { margin: 0 0 0 0; }#search-form input#search-button[type="submit"] { margin: 0 0 0 0; } }

7) Lalu kalian cari kode </body> dan copy kode di bawah ini lalu pastekan tepat di atas kode </body> tadi.

<script type='text/javascript'> //<![CDATA[ var ww=document.body.clientWidth;$(document).ready(function(){$(".nav li a").each(function(){if($(this).next().length>0){$(this).addClass("parent")}});$(".toggleMenu").click(function(e){e.preventDefault();$(this).toggleClass("active");$(".nav").toggle()});adjustMenu()});$(window).bind("resize orientationchange",function(){ww=document.body.clientWidth;adjustMenu()});var adjustMenu=function(){if(ww<768){$(".toggleMenu").css("display","inline-block");if(!$(".toggleMenu").hasClass("active")){$(".nav").hide()}else{$(".nav").show()}$(".nav li").unbind("mouseenter mouseleave");$(".nav li a.parent").unbind("click").bind("click",function(e){e.preventDefault();$(this).parent("li").toggleClass("hover")})}else if(ww>=768){$(".toggleMenu").css("display","none");$(".nav").show();$(".nav li").removeClass("hover");$(".nav li a").unbind("click");$(".nav li").unbind("mouseenter mouseleave").bind("mouseenter mouseleave",function(){$(this).toggleClass("hover")})}} //]]></script><script src='https://googledrive.com/host/0BxH5pEKXqBWUSUhtOTZFOUw5QkU/menu-navigasi-evo-magz-masyadi-com.js'></script>

8) Karena  menu navigasi ini menggunakan font awesome maka kalian wajib memasang kode font awesome nya, silahkan copy kode di bawah ini dan pastekan tepat di atas kode </head>.

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'rel='stylesheet'/>

9) Terakhir simpan Template.

Nah ituh dia cara mudah membuat menu navigasi responsive mirip Evo Magz, gimana mudah kan? jika kalian masih tidak mengerti bisa langsung bertanya melalui komentar atau bisa juga lewat kontak from, admin akan membalas jika sedang tidak sibuk.

Mungkin sampai di sini dulu pembahasan kali ini semoga bisa bermanfaat bagi kalian semua dan terimakasih atas kunjungannya.

Facebook Twitter Google+