ساخت منوی آکاردئونی با css
ساخت منوی آکاردئونی با css همراه با مثال عملی. در این آموزش با یک منوی آکاردئونی زیبا آشنا می شوید. این کد تست شده می باشد و می توانید آن را در یک فایل با پسوند html ذخیره و تست نمایید.
در این بخش از آموزش css ازتاپ سایت 98 با منوی آکاردئونی آشنا می شوید.
کد html ساخت منوی آکاردئونی با css :
در این بخش کد html ساخت منوی آکاردئونی با css را قرار داده ایم.
با کلیک روی هر دکمه یا button بخش panel را خواهید دید.
منوی آکاردئونی برای زمانی که فضای کمی در اختیار داریم مناسب است.
یعنی در حالت پیش فرض محتوای panel مخفی بوده و با کلیک روی دکمه ان نمایش داده می شود.
بخش html دارای دو بخش مهم است یکی button و دیگری panel.
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">css</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">jquery</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
کد css ساخت منوی آکاردئونی با css :
در این قسمت کد css ساخت منوی آکاردئونی با css را مشاهده می کنید.
در حالت پیش فرض با دستور display بخش panel را مخفی می کنیم.
کلاس accordion برای دکمه ها بکار می رود. عرض دکمه ها 100 درصد می باشد. متن ها در سمت چپ و رنگ متن تیره میباشد. متن دکمه توپر یا bold گذاشته ایم.
با هاور رنگ پس زمینه تغییر می کند.
.accordion {
background-color: #eee;
border-bottom:1px solid #555;
color: #333;
font-weight: bold;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
font-size: 15px;
}
.active, .accordion:hover {background-color: #ccc;}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
</style>
کد جاوااسکریپت ساخت منوی آکاردئونی با css :
در بخش زیر کد جاوااسکریپت ساخت منوی آکاردئونی با css را می بینید.
با استفاده از جاوااسکریپت کلاسها را اکتیو یا غیرفعال می کنیم.
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.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
کد کامل ساخت منوی آکاردئونی با css :
در بخش زیر کد کامل ساخت منوی آکاردئونی با css را مشاهده می کنید. برای استفاده از این کد می توانید آن را در یک فایل html قرار دهید و سپس آن را تست نمایید.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
background-color: #eee;
border-bottom:1px solid #555;
color: #333;
font-weight: bold;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
font-size: 15px;
}
.active, .accordion:hover {background-color: #ccc;}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
</style>
</head>
<body>
<h2>Topsite98.com</h2>
<h2>Accordion</h2>
<button class="accordion">html</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">css</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">jquery</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</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.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
</body>
</html>
امیدواریم از این آموزش لذت برده باشید. سایت ما ، تاپ سایت 98 را دنبال کنید.
منبع: تاپ سایت 98
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
این سایت بفروش می رسد با سئو عالی و بازدید بالا. تماس بگیرید
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید