پیاده سازی منوی دایره ای

در این اینجا قصد ساخت یک منوی دایره ای داریم که می توان از آن برای منو اشتراک گذاری یا منوهایی با محتوای دیگر چه در صفحات وب و چه در نرم افزارهای موبایل استفاده کرد.

توجه داشته باشید که در این مطلب ما کدهای اصلی و پایه ای که نیاز به توجه خاص دارند و به یادگیری کمک می کنند را نمایش می دهیم. برای دسترسی به کدهای جزیی از قبیل رنگ ها و سایزها و غیره به صفحه دانلود و یا پیش نمایش ها سر بزنید.

ساختار اصلی

ساختار منو در html به صورت زیر است که تشکیل شده از یک دکمه برای باز کردن و بستن منو و همین طور آیتم های منو و یک نگهدارنده برای این آیتم ها و همینطور عنصر نگهدارنده ای برای کل ساختار منو می باشد.

<div class="circular-menu">

  <a class="floating-btn">
    <i class="fa fa-plus"></i>
  </a>

  <menu class="items-wrapper">
    <a href="#" class="menu-item fa fa-facebook"></a>
    <a href="#" class="menu-item fa fa-twitter"></a>
    <a href="#" class="menu-item fa fa-google-plus"></a>
    <a href="#" class="menu-item fa fa-linkedin"></a>
  </menu>

</div>

برای نمایش آیکون ها از Font Awesome استفاده شده است.

کدهای ساختاری و اولیه css هم به صورت زیر می باشد.

.circular-menu {
  position: fixed;
  bottom: 1em;
  right: 1em;
}

.circular-menu .floating-btn {
  display: block;
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
}

.circular-menu:after {
  display: block;
  content: ' ';
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -2;
}

.circular-menu .menu-item {
  display: block;
  position: absolute;
  top: .2em;
  right: .2em;
  z-index: -1;
  width: 3em;
  height: 3em;
  border-radius: 50%;
}

برای ساخت دایره ای که در هنگام باز شدن منو به وجود می آید از انتخابگر after استفاده کردیم. اگر نحوه استفاده از این انتخابگر را نمی دانید برای آشنایی با این موضوع به این مطلب مراجعه کنید.

ساخت حالت فعال منو

برای باز کردن و بستن منو نیاز به یک کلاس داریم که ما این کلاس را با جاوااسکریپت از طریق کلیک بر روی عنصر floating-btn به circular-menu اضافه می کنیم.

نکته قابل توجه این که جاوااسکریپت به صورت inline نوشته شده است و اصلا توصیه نمی شود شما در پروژه از این روش استفاده کنید. چون بحث این سایت در مورد جاوااسکریپت نیست ما از این روش در جهت کار راه اندازی و ساده سازی کد استفاده کردیم.

<div id="circularMenu" class="circular-menu">

  <a class="floating-btn" onclick="document.getElementById('circularMenu').classList.toggle('active');">
    <i class="fa fa-plus"></i>
  </a>

</div> 

حال که کلاس active را داریم می توانیم استایل های این حالت را بنویسیم. برای دکمه فعال ساز استایل زیر را داریم که یک سایه ملایم را به وجود می آورد و همینطور باعث چرخش آیکون می شود

.circular-menu.active .floating-btn {
  box-shadow: inset 0 0 3px hsla(0, 0%, 0%, .3);
}

.circular-menu.active .floating-btn i {
  transform: rotate(-45deg);
}

برای به وجود آوردن دایره در حالت باز داریم:

.circular-menu:after {
  transition: all .3s ease;
}

.circular-menu.active:after {
  transform: scale3d(5.5, 5.5, 1);
  transition-timing-function: cubic-bezier(.68, 1.55, .265, 1);
}

و برای نشان دادن آیتم های منو به صورت زیر عمل می کنیم:

.circular-menu .menu-item {
  transition: transform .3s ease, background .2s ease;
}

.circular-menu.active .menu-item {
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.circular-menu.active .menu-item:nth-child(1) {
  transform: translate3d(1em,-7em,0);
}

.circular-menu.active .menu-item:nth-child(2) {
  transform: translate3d(-3.5em,-6.3em,0);
}

.circular-menu.active .menu-item:nth-child(3) {
  transform: translate3d(-6.5em,-3.2em,0);
}

.circular-menu.active .menu-item:nth-child(4) {
  transform: translate3d(-7em,1em,0);
}

در نهایت خروجی کار به این صورت می باشد:

 

See the Pen Circular Menu by Mojtaba Seyedi (@seyedi) on CodePen.

 

چرا em ؟

شاید برای آنهایی که با em آشنایی ندارند این سوال به وجود بیاید که چرا ما تمام اندازه ها را با استفاده از واحد em اعمال کردیم. توضیح کامل واحدهای اندازه دهی در css را به یک مطلب دیگر موکول می کنیم اما در اینجا به طور قابل ملموسی قابلیت شگفت انگیز em را به شما نشان می دهیم.

شاید اندازه این منو و آیتم هایش در نظر شما کوچک و یا بزرگ باشد و بخواهید اندازه آن را تغییر دهید در اینجا اگر واحدهای اندازه px بودند شما با یک کار طاقت فرسا مواجه بودید به این دلیل که مکان تمام آیتم ها باید دوباره مشخص و اندازه گیری می شد. اما الان که واحدها em هستند کافی است اندازه فونت عنصر اصلی را تغییر دهید تا تمام منو و جزییاتش به صورت یکنواخت کوچک یا بزرگ شود. پس در اینجا تنها با اعمال یک خط قادر به تغییر اندازه خواهید بود. این مهمترین امکانی است که استفاده از em در طراحی به شما می دهد.

فرض کنید می خواهیم منو را کمی کوچک تر کنیم باتوجه به این موضوع که font-size پیشفرض در صفحات وب 16px است کافی است مثلا اندازه فونت عنصر اصلی منو را 13px کنیم:

.circular-menu {
  font-size: 13px;
}

 

قطعا شما با تغییر رنگ ها و اندازه ها و همینطور تغییر transition ها می توانید منوی بهتری بسازید. شما می توانید از طریق لینک زیر به فایل های این پروژه در گیتهاب دسترسی داشته باشید و در بهبود این منو مشارکت کنید و هم می توانید منوی خودتان را بسازید و لینکش را در قسمت نظرات قرار دهید تا دیگران هم کار شما را ببینند و نظر بدهند.

شما هم می توانید مشارکت کنید.