این منو به صورت پیش فرض دارای ۵ قسمت می باشد که به راحتی میتوانید آن را بیشتر و کمتر نمایید .

در ادامه به آموزش خواهیم پرداخت …

در ابتدا باید کد html زیر را به وب سایت خود اضافه نمایید :

<section class="accordion_vms">
   <div class="item">
        <img src="images/Location-Pin.png" alt="">
        <h3>منوی شماره ۱</h3>
   </div>
        <p>اسکریپت دات کام</p>
    <div class="item">
        <img src="images/Headphones.png" alt="">
        <h3>منوی شماره ۲</h3>
   </div>
    <p>اسکریپت دات کام</p>
    <div class="item">
        <img src="images/Lightbulb.png" alt="">
        <h3>منوی شماره ۳</h3>
   </div>
        <p>اسکریپت دات کام</p>
    <div class="item">
        <img src="images/Bookmarks.png" alt="">
        <h3>منوی شماره ۴</h3>
   </div>
        <p>اسکریپت دات کام</p>
    <div class="item">
        <img src="images/Lightning-Bolt.png" alt="">
        <h3>منوی شماره ۵</h3>
   </div>
       <p>اسکریپت دات کام</p>
</section>

سپس کد css زیر را به css وب سایت خود اضافه نمایید :

.accordion_vms * {
  margin: 0;
  padding: 0;
}
.accordion_vms {
  margin: 50px auto;
  width: 380px;
  background: #ccc;
  cursor: pointer;
  line-height:30px;
  direction:rtl;
  font-family:tahoma;
  font-size:13px;
}
.accordion_vms .item {
  height: 60px;
}
.accordion_vms .item h3 {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  padding-right: 20px;
  font-family: tahoma;
  font-size: 15px;
  font-weight:normal;
}
.accordion_vms .item img {
  padding-right: 15px;
  width: 30px;
  vertical-align: middle;
}
.accordion_vms .item h3:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.accordion_vms .item:first-of-type {
  background: #620808;
  color: #f4ce74;
}
.accordion_vms .item:nth-of-type(2) {
  background: #a53f3f;
  color: #ffe9c1;
}
.accordion_vms .item:nth-of-type(3) {
  background: #f4ce74;
  color: #620808;
}
.accordion_vms .item:nth-of-type(4) {
  background: #ffe9c1;
  color: #d5441c;
}
.accordion_vms .item:last-of-type {
  background: #d5441c;
  color: #ffe9c1;
}
.accordion_vms p {
  font-family: tahoma;
  font-size: 13px;
  font-weight: 400;
  padding: 15px;
  display: none;
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.2);
}
.accordion_vms p:first-of-type {
  background: #620808;
  color: #f4ce74;
}
.accordion_vms p:nth-of-type(2) {
  background: #a53f3f;
  color: #ffe9c1;
}
.accordion_vms p:nth-of-type(3) {
  background: #f4ce74;
  color: #620808;
}
.accordion_vms p:nth-of-type(4) {
  background: #ffe9c1;
  color: #d5441c;
}
.accordion_vms p:last-of-type {
  background: #d5441c;
  color: #ffe9c1;
}

حال نوبت به اضافه نمودن کد زیر به وب سایت خود رسیده است :

نکته : کد زیر به صورت Jquery میباشد . پس شما باید فایل کتابخانه jquery را قبلا به وب سایت خود اضافه نموده باشید ( دانلود از وب سایت رسمی www.jquery.com )

$(document).ready(function(){
    $('.item').on("click", function () {
        $(this).next().slideToggle(100);
        $('p').not($(this).next()).slideUp('fast');
	    });
    });

دموی منوی آکاردئون

دانلود فایل آماده منوی آکاردئون

پخش اختصاصی

آموزش : وحید مجیدی