Tolong pilih kategori sesuai, jenis posting (pertanyaan atau bukan) dan sertakan tag/topik yang sesuai misal komputer, php, mysql, dll.
Promosi atau posting tidak pada tempatnya akan kami hapus.
Klik link berikut untuk informasi 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

Baca 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.