سلام
من می خوام یه منو با اکاردئون درست کنم به دو مدل کد های اولیه اش رو دارم ولی می خوام یک زیر مجموعه داخل هر کدوم خواستم ایجاد کنم
نمونه اولی
<h1>Menu Despegable <a href="http://creaticode.com/blog">creaticode.com</a></h1>
<!-- Contenedor -->
<ul id="accordion" class="accordion">
<li>
<div class="link"><i class="fa fa-paint-brush"></i>Diseño web<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li><a href="#">Photoshop</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Maquetacion web</a></li>
</ul>
</li>
<li class="default open">
<div class="link"><i class="fa fa-code"></i>Desarrollo front-end<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li><a href="#">Javascript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Frameworks javascript</a></li>
</ul>
</li>
<li>
<div class="link"><i class="fa fa-mobile"></i>Diseño responsive<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li><a href="#">Tablets</a></li>
<li><a href="#">Dispositivos mobiles</a></li>
<li><a href="#">Medios de escritorio</a></li>
<li><a href="#">Otros dispositivos</a></li>
</ul>
</li>
<li><div class="link"><i class="fa fa-globe"></i>Posicionamiento web<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li><a href="#">Google</a></li>
<li><a href="#">Bing</a></li>
<li><a href="#">Yahoo</a></li>
<li><a href="#">Otros buscadores</a></li>
</ul>
</li>
</ul>
روی Photoshop کلیک میشه یه زیر منوی دیگه باز شه .
منوی دوم هم به صورت اکاردئون هستش
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>
<button class="accordion">قطعات الکترونک</button>
<div class="panel">
<button class="accordion"> برد</button>
<button class="accordion"> برد و مینی کامپیوتر</button>
<button class="accordion">آردینو</button>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>
</body>
</html>
می خوام آردینو زیر منو برد و مینی کامپیوتر شه
ممنون میشم راهنمایی کنید.
به hossein کمک کنید تا مشکل خودش را حل کند؛ اینطور میتوانیم با هم پیشرفت کنیم.
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟