Iklan

Membuat Menu Navigation Responsive Ala Arlina Design

Menu Navigasi Ala Arlina

Seperti yang Anda ketahui, menu navigasi yaitu salah satu point untuk mempercantik / bagus tampilan blog Anda, maka dari itu gue akan membagikan tutorial membuat menu navigasi yang di pakai oleh Arlina Design.

Seperti yang Anda ketahui, blog Arlina Design yaitu blog yang membagikan template dan tutorial blog. Dengan itu blog tersebut sudah pasti bagus dan elegan. Sebelumnya gue juga sudah membagikan tutorial widget-widget atau disain yang di pakai oleh Arlina Design. Bila Anda ingin memakai widget-widget tersebut.

Membuat Navigation Menu Ala Arlina Design


Langkah pertama :

Login ke Blogger > Tema > Edit HTML. Lalu Anda taruh isyarat CSS dibawah ini di atas isyarat ]]></b:skin> atau </style>

/* CSS Main Menu */ a.menu-slide{display:none;background:#374760;padding:0 15px;height:46px;line-height:46px;color:#fff;text-transform:uppercase} a.menu-slide:hover {color:#fff;} #nav {font-size:14px;font-weight:700;background:#374760;height:56px;line-height:56px;margin:0 auto;} .arlina-mainmenu {background:#374760;list-style:none;margin:0;float:left;} .arlina-mainmenu:before,.arlina-mainmenu:after {content: " ";display:table;} .arlina-mainmenu:after {clear:both;} .arlina-mainmenu ul {list-style:none;margin:0;width:11em;} .arlina-mainmenu a {display:block;padding:0 15px;} .arlina-mainmenu li {position:relative;margin:0;} .arlina-mainmenu > li {float:left;} .arlina-mainmenu > li > a {display:block;height:56px;line-height:56px;color:#fff;overflow:hidden;transition:initial} .arlina-mainmenu > li > a.active {background:#3cc091;color:#fff;} .arlina-mainmenu > li:hover > a {background:#3cc091;color:#fff;} .arlina-mainmenu > li:hover > a.active {background:#37b185;} .arlina-mainmenu li ul {background:#fafafa;display:block;position:absolute;top:50%;left:0;z-index:10;visibility:hidden;opacity:0;transition:all .3s} .arlina-mainmenu li li ul {left:100%;top:-1px;} .arlina-mainmenu > li.hover > ul {visibility:visible;opacity:1;top:100%;} .arlina-mainmenu li li.hover ul {visibility:visible;opacity:10;} .arlina-mainmenu li li a {display:block;color:#768187;position:relative;z-index:100;height:42px;line-height:42px;font-weight:400;transition:initial} .arlina-mainmenu li li a:hover {background:#3cc091;color:#fff;} .arlina-mainmenu li li li a {background:#fff;z-index:20;color:#151515;} .arlina-mainmenu li .parent:after {content: "\f0d7";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px;color:#858d8f;} .arlina-mainmenu li:hover .parent:after{color:#fff;} .arlina-mainmenu li ul li .parent:after {content: "\f0da";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px;color:#768187;float:right;} .arlina-mainmenu li ul li .parent:hover:after {color:#fff;} #search-form {background:#374760;float:right;margin:0;width:210px;} #search-form table {width:100%;margin:0;} #search-form input#search-box[type="text"] {background:#fff;height:36px;line-height:36px;margin:5px 0 5px 10px;padding:0 10px;width:99%;border:none;} #search-form input#search-button[type="submit"] {font-family:FontAwesome;background:#3cc091;color:#fff;height:36px;line-height:36px;margin:5px 10px 5px -2px;padding:0 15px;border:none;outline:none;transition:all 0.25s;} #search-form input#search-button[type="submit"]:hover{background:#37b185;cursor:pointer;} #search-form input#search-box[type="text"]:focus {background:#fdfdfd;outline:none;} @media only screen and (max-width:640px){ .responsive-menu,#nav{background:#374760;margin:0;height:46px;line-height:46px;} } @media only screen and (max-width:768px){ #nav {background:#f5f5f5;} .nav {float:none;width:100%;max-width:100%} .active {display:block;} .arlina-mainmenu > li > a.active {background:#263142;} .arlina-mainmenu > li > a.active:hover {background:#263142;} #search-form {margin:0;} .nav > li {float:none;overflow:hidden;} .nav ul {display:block;width:100%;float:none;} .arlina-mainmenu li ul {background:#f6f6f6;box-shadow:none;} .arlina-mainmenu li ul li a{background:#f0f0f0;} .arlina-mainmenu > li > a{background:#263142;height:40px;line-height:40px} .arlina-mainmenu li li a:hover {background:#263142;color:#fff;} .nav > li.hover > ul , .nav li li.hover ul {position:static;} .arlina-mainmenu li .parent:after,.arlina-mainmenu li ul li .parent:after {content: "\f0d7";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px;float:right;color:#949ea0;} .arlina-mainmenu li:active .parent:after,.arlina-mainmenu li ul li:active .parent:after {color:#c5cbd0;} #search-form td.search-box {padding:0 0 0 10px;} #search-form td.search-button {width:1%;} #search-form input#search-box[type="text"] {margin:0;background:#fff;} #search-form input#search-box[type="text"]:focus {background:#fdfdfd;outline:none;} }

Jika di template Anda sudah mempunyai css responsive, silakan Anda pastekan css diatas sesuai disain responsive diatas

Langkah kedua :

Silakan ganti isyarat HTML navigasi menu Anda, dan ganti dengan dibawah ini

<nav id='nav' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'> <a class='menu-slide' href='#'><i class='fa fa-list'></i> Menu</a> <ul class='nav arlina-mainmenu'> <li><a class='active' href='/'><span itemprop='name'><i class='fa fa-home'></i> Home</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Web Tools</span></a> <ul> <li><a href='YOU URL HERE' itemprop='url'><span itemprop='name'>Ad Converter</span></a></li> <li><a href='YOU URL HERE' itemprop='url'><span itemprop='name'>Color Picker</span></a></li> <li><a href='YOU URL HERE' itemprop='url'><span itemprop='name'>CSS Filter</span></a></li> <li><a href='YOU URL HERE' itemprop='url'><span itemprop='name'>CSS Minifier</span></a></li> <li><a href='YOU URL HERE' itemprop='url'><span itemprop='name'>CSS Triangle</span></a></li> <li><a href='YOU URL HERE' itemprop='url'><span itemprop='name'>Fontawesome</span></a></li> <li><a href='YOU URL HERE' itemprop='url'><span itemprop='name'>Kamus HTML</span></a></li> </ul> </li> <li><a href='YOU URL HERE' itemprop='url'><span itemprop='name'>SEO</span></a></li> <li><a href='YOU URL HERE' itemprop='url' target='_blank'><span itemprop='name'>Template</span></a></li> <li><a href='YOU URL HERE' itemprop='url'><span itemprop='name'>Tips Blogger</span></a></li> <li><a href='YOU URL HERE' itemprop='url'><span itemprop='name'>Widget</span></a></li> <li><a href='YOU URL HERE' itemprop='url' target='_blank'><span itemprop='name'>Cekkembali.com</span></a></li> </ul> <form action='YOU URL SEARCH' id='search-form'> <input name='cx' type='hidden' value='partner-pub-015677962493346910872:l4_ho9aq0bm'/> <input name='cof' type='hidden' value='FORID:10'/> <input name='ie' type='hidden' value='ISO-8859-1'/> <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...'/> </td> <td class='search-button'> <input id='search-button' type='submit' value=''/> </td> </tr> </tbody> </table> </form> </nav>

Langkah ketiga :

Copy isyarat Javascript di bawah ini diatas isyarat </body>

<script type='text/javascript'> //<![CDATA[ // Main Menu var ww=document.body.clientWidth;$(document).ready(function(){$(".nav li a").each(function(){if($(this).next().length>0){$(this).addClass("parent")}});$(".menu-slide").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){$(".menu-slide").css("display","inline-block");if(!$(".menu-slide").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){$(".menu-slide").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>

Silakan Anda Save. Jika terjadi error, atau tidak responsivenya navigasi tersebut, Anda mampu berkomentar dibawah. Setahu gue tutorial ini tidak ada yang error, soalnya sudah gue testing terlebih dahulu di blog Template Cloaning Arlina Design.

0 Response to "Membuat Menu Navigation Responsive Ala Arlina Design"

Posting Komentar