Postingan ini yakni lanjutan dari postingan yang lalu Membuat Recent Post Widget Responsive Berwarna dimana sudah kita bahas dan praktekkan di postingan lanjutan ini akan dibahas lanjut mengenai salah satu menu Navigasi pada blog. Seperti yang sudah kita ketahui bersama penempatan Navigasi Blog sangat penting bagi Blog semoga dengan mudah di rayapi oleh mesin pencari menyerupai Google, apalagi Google sekarang ini terus memperbaharui Logika script mereka yang tujuannya yakni semoga pengguna internet dapat nyaman dan mudah dalam mengakses gosip yang disediakan.
Penerapan Menu Navigasi pada blog sangat kuat juga terhadap SEO dan pastinya berafiliasi pribadi juga dengan mesin pencari, kalau di dalam blog atau website SEO nya kuat meskipun banyak artikel yang sejenis tetap saja Blog tersebut masih di Urutan halaman depan di pencarian Google. Nah teerkait hal tersebut di postingan ini akan di bahas lebih lanjut Tools Menu navigasi yaitu Bagaimana Membuat Menu Responsive With CSS And JavaScript.
Tampilan pada blog dipengaruhi dengan penerapan instruksi script yang tertanam pada template blog, banyak blog yang agak kurang memperhatikan mobile friendly bagi blog-nya hal itu juga akan mensugesti trafik pengunjung sebab selain tampilannya tidak responsive juga biasanya loading blog terlalu lama sehingga sepi pengunjung. Di Menu Responsive ini ditambahkan instruksi CSS dan Javascript semoga dikala di tampilkan responsive dan mampu menyesuaikan dengan media yang ditampilkan.
Bagi sahabat yang ingin mencobanya silahkan simak langkah-langkah berikut ini.
Langkah Pertama
Silahkan salin instruksi CSS dibawah ini lalu letakkan diatas instruksi ]]></b:skin> atau </style>
Langkah Ke-2
Setelah langkah menambahkan instruksi CSS diatas lanjut silahkan salin kembali kodeJavascript ini lalu letakkan sebelum instruksi </head>
Langkah Ke-Tiga
Silahkan salin instruksi Javascript dibawah ini lalu letakkan sebelum instruksi </body>
Langkah Terakhir ke-4
Silahkan sahabat salin kembali instruksi HTML ini dan letakkan bebas dimana sahabat mau ditampilkan nantinya biasanya di bawah Header
Dan karenanya menyerupai Demo tampilan di bawah ini
Nah hingga sini sudah selesai namun kalau sahabat mau menambahkan submenu lainnya sahabat mampu tambahkan sendiri ul dengan id berbeda misal a2, a3 dan seterusnya setiap ada penambahan submenu menyerupai tampilan instruksi berikut ini
Dan Selesai, Selamat Mencoba kalau ada yang ingin di tanyakan mampu melalui kolom komentar dibawah ini semoga bermanfaat.
#menu,#menu input,#menu ul{height:50px} #menu a.trigger2::after,#menu a.trigger2:hover::after{border-width:5px 6px;top:20px;width:0;height:0;border-style:solid} #menu a.prett::after,#menu a.trigger2::after,#menu a.trigger2:hover::after{content:""} #menu-wrapper{height:50px;width:100%;position:relative} #menu{background:#666;color:#eee;font-family:Roboto,sans-serif} #menu li,#menu ul{margin:0;padding:0;list-style:none} #menu li{float:left;display:inline;position:relative} #menu li a{font-size:16px;font-weight:700;color:#eee;text-transform:uppercase} #menu a{display:block;line-height:50px;padding:0 20px;text-decoration:none;color:#eee} #menu li a:hover,#menu li:hover>a{color:#111} #menu input{display:none;margin:0;padding:0;width:80px;opacity:0;cursor:pointer} #menu label{font-size:30px;display:none;width:35px;height:51px;line-height:51px;text-align:center} #menu label span{font-size:13px;position:absolute;left:35px;text-transform:none} #menu ul.menus{height:auto;overflow:hidden;width:180px;background:#ddd;position:absolute;z-index:99;display:none;color:#555;text-transform:none} #menu a.prett:hover,#menu li:hover>a.prett,#menu ul.menus a:hover{color:#fff;background:#bbb} #menu ul.menus a{color:#555;line-height:30px!important;font-size:14px;padding:0 20px;font-weight:300;text-transform:none} #menu ul.menus li{display:block;width:100%;text-transform:none} #menu a.prett,#menu a.trigger2{padding:0 27px 0 20px} #menu a.prett::after{width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent;position:absolute;top:23px;right:9px} #menu a.trigger2::after{border-color:transparent transparent transparent #eee;position:absolute;right:9px} #menu a.trigger2:hover::after{border-color:transparent transparent transparent #333;position:absolute;right:9px} @media screen and (max-width: 770px){ #menu ul.menus,.main-wrapper{width:100%;border:none} .outer-wrapper{padding:0} #sidebar-wrapper,.sidebar1-wrapper,.sidebar2-wrapper,.sidebar3-wrapper{width:100%;text-align:center;margin:0 auto} #menu{position:relative} #menu ul{background:#838383;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none} #menu ul.menus{position:static} #menu li{display:block;float:none;width:auto;text-align:left} #menu li a{color:#fff} #menu li a:hover{color:#333} #menu a.prett:hover,#menu li:hover,#menu li:hover>a.prett{background:#BABABA;color:#333} #menu ul.menus a{background:#BABABA} #menu ul.menus a:hover{background:#ddd;color:#333} #menu input,#menu label{position:absolute;top:0;left:15px;display:block} #menu input{z-index:4} #menu input:checked+label{color:#fff} }Langkah Ke-2
Setelah langkah menambahkan instruksi CSS diatas lanjut silahkan salin kembali kodeJavascript ini lalu letakkan sebelum instruksi </head>
<script type='text/javascript'> //<![CDATA[ function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) } loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");loadCSS("http://fonts.googleapis.com/css?family=Roboto:300,700"); //]]> </script>Langkah Ke-Tiga
Silahkan salin instruksi Javascript dibawah ini lalu letakkan sebelum instruksi </body>
<script type='text/javascript'> //<![CDATA[ function switchid(d){hideallids(),showdiv(d)}function hideallids(){for(var d=0;d<ids.length;d++)hidediv(ids[d])}function hidediv(d){document.getElementById?document.getElementById(d).style.display="none":document.layers?document.id.display="none":document.all.id.style.display="none"}function showdiv(d){document.getElementById?document.getElementById(d).style.display="block":document.layers?document.id.display="block":document.all.id.style.display="block"}var ids=new Array("a1","a2"); var boxArray=["a1","a2"];window.addEventListener("mouseup",function(e){for(var r=0;r<boxArray.length;r++){var o=document.getElementById(boxArray[r]);e.target!=o&&e.target.parentNode!=o&&(o.style.display="none")}}); var button=document.querySelector("#nav-icon");button.addEventListener("click",function(){var t=document.querySelector(button.getAttribute("data-target"));t.style.display="block"==t.style.display?"none":"block"}); //]]> </script>Langkah Terakhir ke-4
Silahkan sahabat salin kembali instruksi HTML ini dan letakkan bebas dimana sahabat mau ditampilkan nantinya biasanya di bawah Header
<div id='menu-wrapper'> <nav id='menu'> <input data-target='#nav-ul' id='nav-icon' type='checkbox'/> <label><i class='fa fa-bars'></i><span>Navigation</span></label> <ul id='nav-ul'> <li><a href='/' title='Home'>Home</a></li> <li><a href='#' title='Menu 1'>Menu 1</a></li> <li><a class='prett' href='javascript:switchid('a1');' title='Drop Menu'>Drop Menu</a> <ul class='menus' id='a1'> <li><a href='#' title='Drop Menu1'>Drop Menu 1</a></li> <li><a href='#' title='Drop Menu2'>Drop Menu 2</a></li> <li><a href='#' title='Drop Menu3'>Drop Menu 3</a></li> </ul> </li> <li><a href='#' title='Menu 2'>Menu 2</a></li> <li><a class='prett' href='javascript:switchid('a2');' title='Drop Menu1'>Drop Menu 1</a> <ul class='menus' id='a2'> <li><a href='#' title='Drop Menu 1'>Drop Menu 1</a></li> <li><a href='#' title='Drop Menu 2'>Drop Menu 2</a></li> <li><a href='#' title='Drop Menu 3'>Drop Menu 3</a></li> </ul> </li> <li><a class='trigger2' href='#' onclick='window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7cen&amp;hl=en'); return false;' rel='nofollow' target='_blank' title='English'>Translate</a></li> </ul> </nav> </div>Dan karenanya menyerupai Demo tampilan di bawah ini
Nah hingga sini sudah selesai namun kalau sahabat mau menambahkan submenu lainnya sahabat mampu tambahkan sendiri ul dengan id berbeda misal a2, a3 dan seterusnya setiap ada penambahan submenu menyerupai tampilan instruksi berikut ini
<li><a class='prett' href='javascript:switchid('a3');' title='Drop Menu1'>Drop Menu 1</a> <ul class='menus' id='a3'> <li><a href='#' title='Drop Menu 1'>Drop Menu 1</a></li> <li><a href='#' title='Drop Menu 2'>Drop Menu 2</a></li> <li><a href='#' title='Drop Menu 3'>Drop Menu 3</a></li> </ul> </li>Dan Selesai, Selamat Mencoba kalau ada yang ingin di tanyakan mampu melalui kolom komentar dibawah ini semoga bermanfaat.
Comments