جهت ورود به تالار گفتمان سایت کلیک کنید


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

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

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

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

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

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

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

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

پخش اختصاصی

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

جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

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

  1. شهاب رفیعی گفت:

    ]چطوری میشه بصورت پیشفرض منو بسته باشه .
    من از این کد استفاده کردم بطور پیشفرض همه منو ها باز هستند

  2. سجاد گفت:

    خیلی ممنون داداش

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *