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

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

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

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

در ابتدا باید کد 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');
	    });
    });

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

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

پخش اختصاصی

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