Menu navigasi pada sebuah website atau blog merupakan hal yang peting dan wajib ada, ini bertujuan semoga pengunjung situs lebih gampang menavigasi situs Anda.
Ada satu alasan yang aku ingat dikala daftar AdSense lalu di tolak dengan alasan"Navigasi Situs Sulit", ini membuktikan bahwa menciptakan hidangan navigasi di blog atau website harus dengan terang dan gampang di pahami.
Saya yakin bahwa memakai hidangan navigasi yang responsive menjadi pilihan terbaik untuk mengatasi penolakan adsense tersebut.
Balik lagi, kita bahas mengenai hidangan navigasi.
Sebenarnya ada banyak bentuk navigasi yang dapat Anda gunakan, ada yang berbentuk vertikal biasanya di tempatkan di bab kiri, ada juga berbentuk horizontal biasanya di tempatkan di bab header atau bab teratas dari sebuah blog atau website.
Kebanyakan orang memakai hidangan navigasi horizontal.
Menu navigasi mempunyai fitur masing-masing ada yang flat atau datar tanpa mempunyai sub menu, ada juga yang mempunyai dropdown bahkan multi dropdown.
Di sini aku akan menjelaskan cara menciptakan menu navigasi dorpdown multilevel responsive.
Lengkap banget pokoknya.
Menu dropdown multilevel responsive ini memakai font awesome sehingga terlihat lebih keren ada gambar atau icon di samping tulisannya.
Tapi jikalau Anda tidak ingin menampilkan gambar atau icon yang berada di samping kiri tulisannya dapat dengan menghapus kodenya di bab html atau tidak perlu memakai file css bundle font awesome.
Jika Anda tertarik untuk menciptakan hidangan navigasi dropdown multilevel responsive di blog silahkan ikuti langkah-langkahnya di bawah ini.
Pertama, tambahkan instruksi CSS ini kedalam template blog Anda, simpan di atas instruksi
Itulah artikel mengenai cara menciptakan hidangan dropdown multilevel responsive di blogger, semoga bermanfaat. Sumber https://www.caramanual.com/
Ada satu alasan yang aku ingat dikala daftar AdSense lalu di tolak dengan alasan"Navigasi Situs Sulit", ini membuktikan bahwa menciptakan hidangan navigasi di blog atau website harus dengan terang dan gampang di pahami.
Saya yakin bahwa memakai hidangan navigasi yang responsive menjadi pilihan terbaik untuk mengatasi penolakan adsense tersebut.
Balik lagi, kita bahas mengenai hidangan navigasi.
Sebenarnya ada banyak bentuk navigasi yang dapat Anda gunakan, ada yang berbentuk vertikal biasanya di tempatkan di bab kiri, ada juga berbentuk horizontal biasanya di tempatkan di bab header atau bab teratas dari sebuah blog atau website.
Kebanyakan orang memakai hidangan navigasi horizontal.
Menu navigasi mempunyai fitur masing-masing ada yang flat atau datar tanpa mempunyai sub menu, ada juga yang mempunyai dropdown bahkan multi dropdown.
Di sini aku akan menjelaskan cara menciptakan menu navigasi dorpdown multilevel responsive.
Lengkap banget pokoknya.
Menu dropdown multilevel responsive ini memakai font awesome sehingga terlihat lebih keren ada gambar atau icon di samping tulisannya.
Tapi jikalau Anda tidak ingin menampilkan gambar atau icon yang berada di samping kiri tulisannya dapat dengan menghapus kodenya di bab html atau tidak perlu memakai file css bundle font awesome.
Jika Anda tertarik untuk menciptakan hidangan navigasi dropdown multilevel responsive di blog silahkan ikuti langkah-langkahnya di bawah ini.
Cara Membuat Menu Dropdown Multilevel Responsive di Blog
Untuk berjaga-jaga lebih baik template blog Anda di back-up terlebih dahulu, silahkan baca artikel mengenai cara backup template blog.
Jika blog Anda sebelumnya sudah mempunyai hidangan navigasi alangkah lebih baiknya jikalau instruksi cssnya di hapus terlebih dahulu untuk menghindari tampilan hidangan yang berserakan alasannya ialah instruksi css usang bentrok atau bertubrukan dengan instruksi css baru.
Silahkan lihat demonya terlebih dahulu di bawah ini sebelum menciptakan hidangan navigasi di blog Anda.
]]></b:skin> atau </style>nav { display: block; background: #374147; } .menu { display: block; } .menu li { display: inline-block; position: relative; z-index: 100; } .menu li:first-child { margin-left: 0; } .menu li a { font-weight: 600; text-decoration: none; padding: 20px 15px; display: block; color: #fff; transition: all 0.2s ease-in-out 0s; } .menu li a:hover,.menu li:hover>a { color: #fff; background: #ff3c41; } .menu 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; } .menu 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; } .menu ul li { display: block; float: none; background: none; margin: 0; padding: 0; } .menu ul li a { font-size: 12px; font-weight: normal; display: block; color: #797979; background: #fff; } .menu ul li a:hover,.menu ul li:hover>a { background: #ff3c41; color: #fff; } .menu li:hover>ul { visibility: visible; opacity: 1; transform: translate(0,0); } .menu ul ul { left: 149px; top: 0px; visibility: hidden; opacity: 0; transform: translate(20px,20px); transition: all 0.2s ease-out; } .menu 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; } .menu li>ul ul:hover { visibility: visible; opacity: 1; transform: translate(0,0); } .responsive-menu { display: none; width: 100%; padding: 20px 15px; background: #374147; color: #fff; text-transform: uppercase; font-weight: 600; } .responsive-menu:hover { background: #374147; color: #fff; text-decoration: none; } a.homer { background: #ff3c41; } @media (min-width: 768px) and (max-width: 979px) { .mainWrap { width: 768px; } .menu ul { top: 37px; } .menu li a { font-size: 12px; } a.homer { background: #374147; } } @media (max-width: 767px) { .mainWrap { width: auto; padding: 50px 20px; } .menu { display: none; } .responsive-menu { display: block; margin-top: 100px; } nav { margin: 0; background: none; } .menu li { display: block; margin: 0; } .menu li a { background: #fff; color: #797979; } .menu li a:hover,.menu li:hover>a { background: #ff3c41; color: #fff; } .menu ul { visibility: hidden; opacity: 0; top: 0; left: 0; width: 100%; transform: initial; } .menu li:hover>ul { visibility: visible; opacity: 1; position: relative; transform: initial; } .menu ul ul { left: 0; transform: initial; } .menu li>ul ul:hover { transform: initial; } } @media (max-width: 480px) { } @media (max-width: 320px) { }</header><nav> <a id="resp-menu" class="responsive-menu" href="#"><i class="fa fa-reorder"></i> Menu</a> <ul class="menu"> <li><a class="homer" href="#"><i class="fa fa-home"></i> HOME</a> <ul class="sub-menu"> <li><a href="#">Sub-Menu 1</a></li> <li><a href="#">Sub-Menu 2</a></li> <li><a href="#">Sub-Menu 3</a></li> <li><a href="#">Sub-Menu 4</a></li> <li><a href="#">Sub-Menu 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> PORTFOLIO</a> <ul class="sub-menu"> <li><a href="#">Sub-Menu 1</a></li> <li><a href="#">Sub-Menu 2</a> <ul> <li><a href="#">Sub Sub-Menu 1</a></li> <li><a href="#">Sub Sub-Menu 2</a></li> <li><a href="#">Sub Sub-Menu 3</a></li> <li><a href="#">Sub Sub-Menu 4</a></li> <li><a href="#">Sub Sub-Menu 5</a></li> </ul> </li> <li><a href="#">Sub-Menu 3</a> <ul> <li><a href="#">Sub Sub-Menu 1</a></li> <li><a href="#">Sub Sub-Menu 2</a></li> <li><a href="#">Sub Sub-Menu 3</a></li> <li><a href="#">Sub Sub-Menu 4</a></li> <li><a href="#">Sub Sub-Menu 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> CATEGORIES</a> <ul class="sub-menu"> <li><a href="#">Sub-Menu 1</a></li> <li><a href="#">Sub-Menu 2</a> <ul> <li><a href="#">Sub Sub-Menu 1</a></li> <li><a href="#">Sub Sub-Menu 2</a></li> <li><a href="#">Sub Sub-Menu 3</a></li> <li><a href="#">Sub Sub-Menu 4</a></li> <li><a href="#">Sub Sub-Menu 5</a></li> </ul> </li> <li><a href="#">Sub-Menu 3</a> <ul> <li><a href="#">Sub Sub-Menu 1</a></li> <li><a href="#">Sub Sub-Menu 2</a></li> <li><a href="#">Sub Sub-Menu 3</a></li> <li><a href="#">Sub Sub-Menu 4</a></li> <li><a href="#">Sub Sub-Menu 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> </nav></body><script type='text/javascript'> //<![CDATA[ $(document).ready(function(){ var touch = $('#resp-menu'); var hidangan = $('.menu'); $(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><b:skin><link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>Itulah artikel mengenai cara menciptakan hidangan dropdown multilevel responsive di blogger, semoga bermanfaat. Sumber https://www.caramanual.com/