Cara Membuat Menu Navigasi Terbaru 2018

Bagaimana sih cara membuat menu navigas kayak di tempplate evo magz itu ? Banyak sekali yang bertanya seperti kepada saya , sampai akhirnya saya mau memberikan tutorialnya kepada sobat . Tapi niat saya tidak ingin mengclone template premium evo magz tersebut , melainkan ingin berbagi pada menu navigasinya saja .

Sebenarnya dengan mengintip kode dari template evo magz itu sendiri , sobat bisa membuat menu navigasnya yang keren itu , asalkan sobat paham sedikit mengenai css dan html , tapi kalau sobat belom bisa mungkin tutorial membuat menu navigasi ala evo magz ini pilihan terbaik anda . 

Bagi yang belom tahu seperti apakah menu navigasi keren dan evo magz ? sobat dapat mengetahuinya dengan melihat demonya di blognya langsung atau bisa juga melihat gambar berikut :

Bagaimana Cara Membuat Menu Navigasi Keren di Blog Ala Evo Magz ?

1. Pertama , silahkan sobat masuk ke editor template terlebih dahulu
2. Kemudian Pasang kode css berikut , tepat diatas kode  ]]></b:skin> atau</style>

   /* NAVIGATION MENU 2 */
   .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}

3. Untuk memanggil kode css diatas silahkan pasang htmlnya , caranya pasang kode dibawah ini tepat dibawah kode </header>

   <nav id='nav'>
   <a class='toggleMenu' href='#'><i class='fa fa-th-list'></i> Menu</a>
   <!-- secondary navigation menu start -->
   <ul class='nav nav-menu2'>
   <li><a class='active' href='masyadi.com'><i class='fa fa-home'></i> Home</a></li>
   <li><a href='#'>Menu 1</a>
   <ul>
   <li><a href='#'>Sub Menu 1</a></li>
   <li><a href='#'>Sub Menu 2</a></li>
   <li><a href='#'>Sub Menu 3</a></li>
   </ul>
   </li>
   <li><a href='#'>Menu 2</a>
   <ul>
   <li><a href='#'>Sub Menu 1</a>
   </li>
   <li><a href='#'>Sub Menu 2</a></li>
   <li><a href='#'>Sub Menu 3</a></li>
   </ul>
   </li>
   <li><a href='#'>Menu 3</a></li>
   <li><a href='masyadi.com'>Markup</a></li>
   <li><a href='masyadi.com'>Error Page</a></li>
   <li><a href='/p/lorem-ipsum-dolor-sit-amet-consectetur.html'>Static Page</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==&#39;&#39;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&#39;&#39;;' type='text' value='Search...' vinput=''/></td>
   <td class='search-button'><input id='search-button' type='submit' value=''/></td></tr></tbody></table></form>
   </nav>

4. Jika sudah silahkan save template sobat

Membuat Menu Navigasi Evo Magz jadi responsive di Blog

Sebetulnya , cara diatas sudah cukup untuk membuat menu navigasi yang mirip evo magz , tapi jika sobat suka desaign template yang responsive , maka sobat perlu melakukan tutorial dibawah ini :

1. Masih dalam halaman edit html
2. Cari kode </body> , dan pasang kode dibawah ini diatas kode </body> tersebut

   <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>

3. Serta pasang Juga Media Queris responsivenya . caranya pasang kode css berikut diatas kode  ]]></b:skin> atau </style>

   @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; }
   }

4. oh ya saya hampir lupa , karena menu navigasi menggunakan font awesome , silahkan pasang javascript font awesome berikut diatas kode </head>

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

5. Nah inilah yang ditunggu - tunggu , silahkan save template sobat dan lihat hasilnya

Tak terasa kini kita telah berhasil membuat menu navigasi ala evo magz mas sugeng , ternyata cukup capek juga ya membuat menu navigasi yang sekeren itu , hehhehehe tapi asalkan anda tahu lebih lelah yang menyajikan tutorialnya dari pada anda mempraktekan , hehehhe . ok sekian dari saya , silahkan mencobanya

tuyul jalan ninjaku

1 Comment

Blogger

02/01/18

• Share

Related Posts