logo
logo
تبلیغ کلیکی تاپ سایت 98

ساخت منوی آکاردئونی با css

ساخت منوی آکاردئونی با css
هدایت عباسی آموزش CSS

ساخت منوی آکاردئونی با css همراه با مثال عملی. در این آموزش با یک منوی آکاردئونی زیبا آشنا می شوید. این کد تست شده می باشد و می توانید آن را در یک فایل با پسوند html ذخیره و تست نمایید.

در این بخش از آموزش css ازتاپ سایت 98 با منوی آکاردئونی آشنا می شوید.

کد html ساخت منوی آکاردئونی با css :

در این بخش کد html ساخت منوی آکاردئونی با css را قرار داده ایم.

با کلیک روی هر دکمه یا button بخش panel را خواهید دید.

منوی آکاردئونی برای زمانی که فضای کمی در اختیار داریم مناسب است.

یعنی در حالت پیش فرض محتوای panel مخفی بوده و با کلیک روی دکمه ان نمایش داده می شود.

بخش html دارای دو بخش مهم است یکی button و دیگری panel.

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

کد css ساخت منوی آکاردئونی با css :

در این قسمت کد css ساخت منوی آکاردئونی با css را مشاهده می کنید.

در حالت پیش فرض با دستور display بخش panel را مخفی می کنیم.

کلاس accordion برای دکمه ها بکار می رود. عرض دکمه ها 100 درصد می باشد. متن ها در سمت چپ و رنگ متن تیره میباشد. متن دکمه توپر یا bold گذاشته ایم.

با هاور رنگ پس زمینه تغییر می کند.

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

کد جاوااسکریپت ساخت منوی آکاردئونی با css :

در بخش زیر کد جاوااسکریپت ساخت منوی آکاردئونی با css را می بینید.

با استفاده از جاوااسکریپت کلاسها را اکتیو یا غیرفعال می کنیم.

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";
}
});
}

کد کامل ساخت منوی آکاردئونی با css :

در بخش زیر کد کامل ساخت منوی آکاردئونی با css را مشاهده می کنید. برای استفاده از این کد می توانید آن را در یک فایل html قرار دهید و سپس آن را تست نمایید.

<!DOCTYPE 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 بپیوندند می توانند از طریق واتساپ با ما در ارتباط باشند. ما بهترین افراد را به تیم خود اضافه خواهیم کرد.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید

دوره ارز دیجیتال تاپ سایت 98
دوره های آموزشی دوره های آموزشی

نظرات کاربران

از دیدگاه مرتبط با موضوع استفاده نمایید.

از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.

برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.