Tolong pilih kategori sesuai, jenis posting (diskusi atau bukan) dan sertakan tag/topik yang sesuai seperti komputer, java, php, mysql, dll. Promosi atau posting tidak pada tempatnya akan kami hapus!
- Bagi Anda yang ingin mendaftar, baca link berikut:
http://diskusiweb.com/discussion/50491/how-to-registrasi-diskusiweb-com-baca-ini-terlebih-dahulu
- Cara menyisipkan kode program supaya tampil rapi dan terformat dengan baik di diskusiweb.com: http://www.diskusiweb.com/discussion/50415/cara-menyisipkan-kode-program-di-diskusiweb-com
- Cara posting gambar/image di post Anda: http://www.diskusiweb.com/discussion/47345/cara-menyisipkan-menyertakan-image-pada-posting/p1

Responsive Menu Dropdown lebih dari 1 level

Saya sedang membuat menu responsive dengan css dan jquery
saya sudah coba yang 1 level,dan berhasil tp saya kesulitan ketika membuat lebih dari 1 level dropdown

Mohon pencerahannya para guru,

berikut link SC nya,

<!DOCTYPE html>



Document



body
{
margin: 0;
padding: 0;
}
.logo
{
float: left;
line-height: 50px;
color: #fff;
font-weight: bold;
font-size: 24px;
font-family: sans-serif;
}
nav
{
width: 100%;
height: 50px;
background: lightgreen;
padding: 0 10px;

}
nav ul
{
float: right;
margin: 0;
padding: 0;
display: flex;

}
nav ul li
{
list-style: none;
position: relative;
}

nav ul li.sub-menu:before
{
content: '\f0d7';
font-family: fontAwesome;
position: absolute;
right: 5px;
color: #fff;
line-height: 50px;

}
nav ul li.active.sub-menu:before
{
content: '\f0d8';
font-family: fontAwesome;
position: absolute;
right: 5px;
color: #fff;
line-height: 50px;
}
nav ul li.active ul li.sub-menu-dua:before
{
content: '\f0d9';
font-family: fontAwesome;
position: absolute;
left: 5px;
color: #fff;
line-height: 50px;
}
nav ul li ul
{
position: absolute;
left: 0;
top: 50px;
display: none;
background: black;
}
nav ul li.active ul
{
display: block;

}
nav ul li ul li
{
width: 200px;
display: block;

}
nav ul li a
{
text-decoration: none;
line-height: 50px;
display: block;

padding: 0 25px;
color: #fff;
}
/*level 3*/
nav ul li.active ul li ul
{
display: none;
position: absolute;
left: -100%;
top: 0;
width: 200px;
background: lightblue;

}
nav ul li.active ul li.aktip ul
{
display: block;

}
nav ul li ul li.sub-menu-dua
{
position: relative;
}

.menu
{
float: right;
color: #fff;
font-weight: bold;
font-size: 24px;
line-height: 50px;
position: absolute;
right: 15px;
display: none;
cursor: pointer;

}
@media(max-width: 900px)
{
.logo
{
margin: 0;
padding: 0 20px;
}
nav
{
margin: 0;
padding: 0;
position: absolute;
top: 0;
width: 100%;
box-sizing: border-box;
background: brown;
}
nav ul
{
margin: 0;
padding: 0;
display: block;
background: #FF33FFFF;
position: relative;
top: 0;
width: 100%;
left: -100%;
text-align: center;
transition: .5s;
}
nav ul li
{
border-bottom: 1px solid rgba(0,0,0,.5);
width: 100%;

}
nav ul.active
{
left: 0;

}

nav ul li ul li
{
border-bottom: 1px solid red;
width: 100%;
}
/*nav ul li ul
{
margin: 0;
padding: 0;
top: 50px;
width: 100%;
background: green;
position: absolute;
display: none;
text-align: center;

}*/
nav ul li.active ul
{
margin: 0;
padding: 0;
position: relative;
background: brown;
top: 0;
width: 100%;
display: block;


}


nav ul.active li.active ul li.sub-menu-dua ul
{
margin: 0;
padding: 0;
display: block;
position: relative;
background: red;
color: yellow;

}
/*nav ul li ul li.aktip ul li
{
background: grey;
color: lightgreen;
}*/
.menu
{
display: block;

}


}




LOGO

Home
Produk

Home
Product
Team
Portofolio
Work
Design


Work
Design

Home
Product
Team
Portofolio
Design
Work

Home
Product
Team
Portofolio
Work
Design






$(document).ready(function(){ $('.menu').click(function(){ $('ul').toggleClass('active'); }) $('ul li').click(function(){ $(this).siblings().removeClass('active'); $(this).toggleClass('active'); $('ul li ul li.sub-menu-dua').toggleClass('aktip'); }) $('ul li ul li.sub-menu-dua').click(function(){ $(this).siblings().removeClass('aktip'); $(this).toggleClass('aktip'); $('ul li').toggleClass('active'); }) })
Tagged:

Comments

  • klo sudah berhasil di level 1, seharusnya di level 2 juga berhasil. karena skrip cara pembuatan level 1 sama dengan skrip pembuatan level2. hanya saja perhatikan panjang kalimat nama menu, karena akan berpengaruh pada tampilan.
Sign In or Register to comment.