برلیانس
برلیانس
خواندن ۵ دقیقه·۴ سال پیش

پروژه طراحی سایت -ساخت منو آکاردئون

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


پروژه طراحی سایت -ساخت منو آکاردئون

سلام دوستان عزیز، امروز می خوایم از سری آموزش طراحی سایت قسمت ساخت منو آکاردئون HTML, CSS را توضیح بدم امیدوارم که به کارتون بیاد.

آکاردئون ها(Accordion) زمانی استفاده می شوند که بخواهید حجم زیادی از محتوا را پنهان یا آشکار کنید.

?ساخت یک منو Accordion ساده

قدم اول : کد HTML را اضافه کنید.

<button class=&quotaccordion&quot>Section 1</button>
<div class=&quotpanel&quot>
<p>Lorem ipsum...</p>
</div>
<button class=&quotaccordion&quot>Section 2</button>
<div class=&quotpanel&quot>
<p>Lorem ipsum...</p>
</div>
<button class=&quotaccordion&quot>Section 3</button>
<div class=&quotpanel&quot>
<p>Lorem ipsum...</p>
</div>

قدم دوم : کد CSS را اضافه کنید. Accordion را نگارش کنید.

مثال :
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
background-color: #ccc;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}

قدم سوم : حال برای عمل کردن منو کد جاوا اسکریپت را اضافه کرده و آن را امتحان کنید.

مثال ساخت منو آکاردئون ساده :
<!DOCTYPE html>
<html>
<head>
<meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1&quot>
<style>
.accordion {
  background-color: #eee;
 color: #444;
 cursor: pointer;
  padding: 18px;
  width: 100%;
 border: none;
 text-align: left;
 outline: none;
  font-size: 15px;
  transition: 0.4s;
}
.active, .accordion:hover {
  background-color: #ccc; 
}
.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}
</style>
</head>
<body>
<h2>Accordion</h2>
<button class=&quotaccordion&quot>Section 1</button>
<div class=&quotpanel&quot>
  <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=&quotaccordion&quot>Section 2</button>
<div class=&quotpanel&quot>
  <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=&quotaccordion&quot>Section 3</button>
<div class=&quotpanel&quot>
  <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>

var acc = document.getElementsByClassName(&quotaccordion&quot);
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener(&quotclick&quot, function() {
   this.classList.toggle(&quotactive&quot);
   var panel = this.nextElementSibling;
 if (panel.style.display === &quotblock&quot) {
panel.style.display = &quotnone"
 } else {
   panel.style.display = &quotblock"
}
 });
}

</body>
</html>

?منو آکاردئون متحرک (Slide Down)

برای ایجاد یک Accordion متحرک در کلاس" panel" برای ویژگی"max-height" از maxheight:0, overflow:hidden,”transition” استفاده کنید. سپس از کد جاوا اسکریپت برای slide down نمودن محتوا با تنظیم max-height بر اساس ارتفاع در صفحه نمایش های مختلف، استفاده کنید.
سپس برای ساخت منو آکاردئون متحرک از دستور جاوا اسکرپیت زیر استفاده می کنیم و مقداری را بعنوان حداکثر ارتفاع برای باز شدن هر بخش از منو مشخص می کنیم. این ارتفاع باید متناسب با ارتفاع پنل بر روی اسکرین های مختلف تعیین شود.

مثال ساخت منو آکاردئون متحرک :
<!DOCTYPE html>
<html>
<head>
<meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1&quot>
<style>
.accordion {
background-color: #eee;
color: #444;
  cursor: pointer;
 padding: 18px;
  width: 100%;
  border: none;
 text-align: left;
outline: none;
  font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
  background-color: #ccc;
}
.panel {
  padding: 0 18px;
  background-color: white;
 max-height: 0;
 overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>
<h2>Animated Accordion</h2>
<p>Click on the buttons to open the collapsible content.</p>
<button class=&quotaccordion&quot>Section 1</button>
<div class=&quotpanel&quot>
  <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=&quotaccordion&quot>Section 2</button>
<div class=&quotpanel&quot>
  <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=&quotaccordion&quot>Section 3</button>
<div class=&quotpanel&quot>
  <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>

var acc = document.getElementsByClassName(&quotaccordion&quot);
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener(&quotclick&quot, function() {
  this.classList.toggle(&quotactive&quot);
  var panel = this.nextElementSibling;
 if (panel.style.maxHeight) {
 panel.style.maxHeight = null;
  } else {
    panel.style.maxHeight = panel.scrollHeight + &quotpx&quot   } 
});
}

</body>
</html>
منو آکاردئون متحرک (Slide Down)
منو آکاردئون متحرک (Slide Down)

اضافه کردن Icon به منو آکاردئون

به هر دکمه یک آیکون اضافه کنید تا مشخص شود محتوای تاشو ( کشویی) باز یا بسته است.

?مثال اضافه کردن آیکون به منو آکاردئونی :

<!DOCTYPE html>
<html>
<head>
<meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1&quot>
<style>
.accordion {
  background-color: #eee;
  color: #444;
 cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
 outline: none;
 font-size: 15px;
  transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: &quot\2212"
}
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
 overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>
<h2>Accordion with symbols</h2>
<p>In this example we have added a &quotplus&quot sign to each button. When the user clicks on the button, the &quotplus&quot sign is replaced with a &quotminus&quot sign.</p>
<button class=&quotaccordion&quot>Section 1</button>
<div class=&quotpanel&quot>
  <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=&quotaccordion&quot>Section 2</button>
<div class=&quotpanel&quot>
  <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=&quotaccordion&quot>Section 3</button>
<div class=&quotpanel&quot>
  <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>

var acc = document.getElementsByClassName(&quotaccordion&quot);
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener(&quotclick&quot, function() {
    this.classList.toggle(&quotactive&quot);
    var panel = this.nextElementSibling;
   if (panel.style.maxHeight) {
   panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + &quotpx"
    } 
  });
}

</body>
</html>


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


این هم از آموزش طراحی سایت امروز موفق و موید باشید. تا مطلب دیگر بدرود .?


پروژه طراحی سایتدوره آموزش طراحی سایتآموزش برنامه نویسیتحلیل داده
شاید از این پست‌ها خوشتان بیاید