Membuat Menu dropdown Responsive
Membuat Menu dropdown Responsive terkadang menjadi salah satu kebutuhan pada blog yang kita kelola, terlebih jika blog yang kita kelola memiliki banyak halaman dan kategori serta opsi lainya. Membuat Menu dropdown Responsive juga menjadi salah satu pilihan bagi mas brow yang memiliki blog dengan menu kurang responsive, paling utama pada versi mobile.
Cara Membuat Menu dropdown Responsive ini akan saya berikan dalam dua versi, yang pertama untuk pengguna umum(blogspot dan platform lain), yang kedua bagi para pengguna platform PopojiCms.
Berikut adalah cara Membuat Menu dropdown Responsive untuk pengguna blogspot:
Pada dashboard blogger, silahkan pilih blog mana yang ingin diberi menu dropdown. Klik menu tata letak, klik tambah gadget, pilih HTML/Javascript, lalu silahkan tempel script berikut.
Demo Menu Dropdown
Atau silahkan Unduh file Menu Dropdowd Responsive.
Silahkan sesuaikan menu dengan kebutuhan, kemudian save. Letakkan gadget menu pada bagian header diatas main blogpost, klik simpan setelan.
Mengapa saya berikan tutorial melalui penambahan gadget? Karena lebih mudah untuk di terima seluruh pengguna blogspot secara umum terutama bagi mereka yang masih dalam tahap belajar.
Cara Membuat Menu dropdown Responsive untuk pengguna platform PopojiCms:
Tambahkan kode css berikut ini pada file css yang digunakan pada tema aktif atau buat file css baru:
#menu-wrap {
float: left;
width: 100% !important;
background: transparent linear-gradient(180deg, #FFB400 0%, #FF7E00 100%) repeat scroll 0% 0%;
margin: 0;
}
#menu-wrap ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu-wrap li {
float: left;
margin-right: 0;
position: relative;
}
#menu-wrap li:last-child {
margin-right: 0;
}
#menu-wrap a {
background-color: transparent linear-gradient(180deg, #FFB400 0%, #FF7E00 100%) repeat scroll 0% 0%;
color: #FFFFFF;
display: block;
padding: 15px 15px;
text-decoration: none;
}
#menu-wrap li ul {
margin: 20px 0 0;
opacity: 0;
position: absolute;
transition:0.5s;
visibility: hidden;
width: 220px;
}
#menu-wrap li li {
float: none;
margin: 0;
}
#menu-wrap li:hover > ul{
transition:0.5s;
margin: 0;
visibility: visible;
opacity: 1;
z-index:2;
}
#menu-wrap li li ul {
box-shadow: -1px 0 0 rgba(255, 255, 255, 0.3);
left: 200px;
margin: 0 0 0 20px;
top: 0;
}
#menu-wrap ul a:hover {
color: #FFFFFF;
background-color: transparent linear-gradient(180deg, #FFB400 0%, #FF7E00 100%) repeat scroll 0% 0%;
background-image: linear-gradient(#04acec, #0186ba);
}
#menu-wrap li:hover > a {
color: #FFFFFF;
background-image: linear-gradient(#04acec, #0186ba);
background-color: transparent linear-gradient(180deg, #FFB400 0%, #FF7E00 100%) repeat scroll 0% 0%;
}
@media screen and (min-width: 768px){
#menu-wrap {
float: left;
width: 100%;
background: transparent linear-gradient(180deg, #FFB400 0%, #FF7E00 100%) repeat scroll 0% 0%;
margin: 0;
}
#responsive{
display :none !important;
}
#menu-wrap > ul{
display: block !important;
width: 100%;
margin: 0px 50px;
}
#menu-wrap li ul {
margin: 5px 0 0;
background: transparent linear-gradient(180deg, #FFB400 0%, #FF7E00 100%) repeat scroll 0% 0%;
}
}
@media screen and (max-width: 768px) {
#menu-wrap {
float: left;
width: 100% !important;
background: transparent linear-gradient(180deg, #FFB400 0%, #FF7E00 100%) repeat scroll 0% 0%;
margin: 0 !important;
}
#menu-wrap li {
float: none;
position: relative;
}
#menu-wrap li a{
margin: 0 0 1px !important;
}
#menu-wrap {
float: none;
position: relative;
}
#menu-wrap > ul {
display: none;
padding: 0 !important;
margin-left: 5px;
max-height: 400px; /* reset the max-height */
overflow-y: hidden;
overflow-y: scroll; /* 1 */
}
#menu-wrap li ul {
margin: 5px 0 0;
}
#menu-wrap ul {
background:transparent linear-gradient(180deg, #FFB400 0%, #FF7E00 100%) repeat scroll 0% 0%;
box-shadow: none !important;
left: 0 !important;
list-style: none outside none;
margin: 0 !important;
opacity: 1 !important;
padding: 0 0 0 45px;
position: relative !important;
top: 0 !important;
visibility: visible !important;
width: auto !important;
}
#responsive {
background: transparent linear-gradient(180deg, #FFB400 0%, #FF7E00 100%) repeat scroll 0% 0%;
color: #FFFFFF;
margin: 0 0 2px;
padding: 10px;
display :block;
transition:0.5s;
cursor: pointer;
}
#responsive:hover {
background-color:transparent linear-gradient(180deg, #FFB400 0%, #FF7E00 100%) repeat scroll 0% 0%;
background-image:linear-gradient(#04acec, #0186ba);
}
}Tambahkan script berikut pada file js yang digunakan pada tema aktif atau tambahkan diatas
