Cara Membuat Menu Dropdown Multilevel Responsive di Blogger
Minggu, 22 April 2018
6 Komentar
Menu navigasi pada sebuah website atau blog merupakan hal yang peting dan wajib ada, ini bertujuan agar pengunjung situs lebih mudah menavigasi situs Anda.
Ada satu alasan yang saya ingat ketika daftar AdSense kemudian di tolak dengan alasan"Navigasi Situs Sulit", ini menunjukan bahwa membuat menu navigasi di blog atau website harus dengan jelas dan mudah di pahami.
Saya yakin bahwa menggunakan menu navigasi yang responsive menjadi pilihan terbaik untuk mengatasi penolakan adsense tersebut.
Balik lagi, kita bahas mengenai menu navigasi.
Sebenarnya ada banyak bentuk navigasi yang bisa Anda gunakan, ada yang berbentuk vertikal biasanya di tempatkan di bagian kiri, ada juga berbentuk horizontal biasanya di tempatkan di bagian header atau bagian teratas dari sebuah blog atau website.
Kebanyakan orang menggunakan menu navigasi horizontal.
Menu navigasi memiliki fitur masing-masing ada yang flat atau datar tanpa memiliki sub menu, ada juga yang memiliki dropdown bahkan multi dropdown.
Di sini saya akan menjelaskan cara membuat menu navigasi dorpdown multilevel responsive.
Lengkap banget pokoknya.
Menu dropdown multilevel responsive ini menggunakan font awesome sehingga terlihat lebih keren ada gambar atau icon di samping tulisannya.
Tapi jika Anda tidak ingin menampilkan gambar atau icon yang berada di samping kiri tulisannya bisa dengan menghapus kodenya di bagian html atau tidak perlu menggunakan file css bundle font awesome.
Jika Anda tertarik untuk membuat menu navigasi dropdown multilevel responsive di blog silahkan ikuti langkah-langkahnya di bawah ini.
Pertama, tambahkan kode CSS ini kedalam template blog Anda, simpan di atas kode
Itulah artikel mengenai cara membuat menu dropdown multilevel responsive di blogger, semoga bermanfaat.
Ada satu alasan yang saya ingat ketika daftar AdSense kemudian di tolak dengan alasan"Navigasi Situs Sulit", ini menunjukan bahwa membuat menu navigasi di blog atau website harus dengan jelas dan mudah di pahami.
Saya yakin bahwa menggunakan menu navigasi yang responsive menjadi pilihan terbaik untuk mengatasi penolakan adsense tersebut.
Balik lagi, kita bahas mengenai menu navigasi.
Sebenarnya ada banyak bentuk navigasi yang bisa Anda gunakan, ada yang berbentuk vertikal biasanya di tempatkan di bagian kiri, ada juga berbentuk horizontal biasanya di tempatkan di bagian header atau bagian teratas dari sebuah blog atau website.
Kebanyakan orang menggunakan menu navigasi horizontal.
Menu navigasi memiliki fitur masing-masing ada yang flat atau datar tanpa memiliki sub menu, ada juga yang memiliki dropdown bahkan multi dropdown.
Di sini saya akan menjelaskan cara membuat menu navigasi dorpdown multilevel responsive.
Lengkap banget pokoknya.
Menu dropdown multilevel responsive ini menggunakan font awesome sehingga terlihat lebih keren ada gambar atau icon di samping tulisannya.
Tapi jika Anda tidak ingin menampilkan gambar atau icon yang berada di samping kiri tulisannya bisa dengan menghapus kodenya di bagian html atau tidak perlu menggunakan file css bundle font awesome.
Jika Anda tertarik untuk membuat menu 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 memiliki menu navigasi alangkah lebih baiknya jika kode cssnya di hapus terlebih dahulu untuk menghindari tampilan menu yang berantakan karena kode css lama bentrok atau bertubrukan dengan kode css baru.
Silahkan lihat demonya terlebih dahulu di bawah ini sebelum membuat menu 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 menu = $('.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 membuat menu dropdown multilevel responsive di blogger, semoga bermanfaat.
Assalamualaikum..kalo mau sub menu yang hanya apa harus save lagi kek awal lagi
BalasHapusWa'alaikumsalam, ini maksudnya gimana ya?
Hapusgan kalau di tampilan handphone agar menunya pas di layar, yang harus di atur cssnya apa ya ? terima kasih
BalasHapusHalo,
HapusUntuk tampilan mobile silahkan fokus ke bagian kode berikut:
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}
atau bisa menyesuaikan lebar smartphone yang paling umum digunakan.
kalau diganti auto tidak bisa ya gan ? soalnya smartphone orang khan beda2 lebarnya..
Hapusitu kode di atas masing-masing punya fungsinya mas, misalnya kalo hp dengan lebar 320px maka kode yang 480px tidak akan bekerja, silahkan bisa di setting sesuai keinginan atau bisa ambil contoh dari lebar 768px pada kode css di atas.
Hapus