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> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <style> 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; } } </style> </head> <body> <nav> <div class="logo">LOGO</div> <ul> <li><a href="#">Home</a></li> <li class="sub-menu"><a href="#">Produk</a> <ul> <li><a href="#">Home</a></li> <li><a href="#">Product</a></li> <li><a href="#">Team</a></li> <li><a href="#">Portofolio</a></li> <li><a href="#">Work</a></li> <li><a href="#">Design</a></li> </ul> </li> <li><a href="#">Work</a></li> <li class="sub-menu"><a href="#">Design</a> <ul> <li><a href="#">Home</a></li> <li><a href="#">Product</a></li> <li><a href="#">Team</a></li> <li><a href="#">Portofolio</a></li> <li><a href="#">Design</a></li> <li class="sub-menu-dua"><a href="#">Work</a> <ul> <li><a href="#">Home</a></li> <li><a href="#">Product</a></li> <li><a href="#">Team</a></li> <li><a href="#">Portofolio</a></li> <li><a href="#">Work</a></li> <li><a href="#">Design</a></li> </ul> </li> </ul> </li> <!-- <li><a href="#">Team</a></li> <li><a href="#">Portofolio</a></li> --> </ul> <div class="menu"><i class="fa fa-bars" aria-hidden="true"></i></div> </nav> </body> </html> <script> $(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'); }) }) </script>
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.