circular-menu

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

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

پشتیبانی مرورگر ها

  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

10+

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

ساختار اصلی

ساختار منو در 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 ها می توانید منوی بهتری بسازید. شما می توانید از طریق لینک زیر به فایل های این پروژه در گیتهاب دسترسی داشته باشید و در بهبود این منو مشارکت کنید و هم می توانید منوی خودتان را بسازید و لینکش را در قسمت نظرات قرار دهید تا دیگران هم کار شما را ببینند و نظر بدهند.

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

16 دیدگاه برای “پیاده سازی منوی دایره ای

  1. سلام

    ممنون، بسیار مفید بود.

    ببخشید اگر بخواهم به قالب وردپرس تبدیل کنم باید چکار کنم؟

    متاسفانه هر کاری کردم نشد.

    ممنون میشم اگر راهنمائی کنید.

    1. سلام. اگر منظورتون اضافه کردن این منو به یک قالب وردپرسی هستش. کافیه html رو به فایلی php ای که می خواین در اونجا نمایش داده بشه اضافه کنید و CSS ها رو هم به فایل CSS قالب. فقط حتما font-awesome رو برای آیکون ها باید به قالب اضافه کنید. اگر مشکلی برای اضافه کردن font-awesome دارید می تونید از عکس برای نمایش آیکون ها استفاده کنید.

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

    1. سلام دوست عزیز.

      با توجه به سوالتون حدس می زنم شما ادمین یک سایت و یا بلاگ باشین و کارتون طراحی سایت نباشه. این مطلب واسه همکاران اینجاست تا ایده بگیرن. بهتره از یک طراح سایت کمک بگیرین تا واستون انجام بده. فقط اگر کمکتون میکنه این اسم فایل های ضروریه:

      font-awesome.min.css
      prefixed-style.css
      index.html
      و پوشه فونت

      موفق باشید

  3. با سلام و تشکر از مطلبتون
    ببخشید 3 تا مشکل دارم
    یک اینکه میخوام فقط آیکون آبی باشه و اون قرمز ظاهر نشه
    دوم اینکه آیون هاش نمیاد برای من و وقتی باز میشه همین آبی هست
    مشکل بعدی اینکه این میره زیر بقیه منو ها ( مثلا وقتی اسکرول میکنم پایی میره زیر فوتر )
    ممنون

    1. سلام.

      مورد دوم واسه اینه که font-awesome رو ندارید. اینجا بخونید در موردش: http://fortawesome.github.i

      مورد سوم واسه اینه که من z-index براش تعیین نکردم گذاشتم به عهده کسی که می خواد استفاده کنه چون معلوم نیست پروژه طرف چه وضعیتی داره.

      در کل این دمو رو استفاده کنید: http://codepen.io/seyedi/pe

  4. چطوری میتونیم inLine جاوا اسکریپتها رو به فایل JS منتقل کنیم ؟
    نحوه ی فراخوانی اش به چه صورته ؟

    من در لینک زیر استفاده کردم از کد ها ولی منو را باز که میکنه ، گزینه های داخل منو و آیکون ها رو بالای سایت نشون میده و توی دایره نشون نمیده ،
    باید چیکار کنم ؟

    خیلی ممنون

      1. سپاس از توضیح تون ،

        کدهای جاوای زیر را برای هر دو منوی چرخشی راست و چپ؛
        در فایل footer گذاشتم و درست شد ؛
        خیلی میخوامتون
        بوک مارکید و هر روز سایتتون برای آموزش های قشنگ چک میشه :-) <3

        $(function() {
        var circularMenu = $(‘#circularMenu1,#circularMenu’);
        circularMenu.on(‘click’, function() {
        $(this).toggleClass(‘active’);
        });
        })(jQuery);

    1. دو تا فرض داریم:

      فرض اول: فقط می خواین کارتون راه بیافته که این سایت کارش کار راه انداختن نیست, آموزشه.

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

      بابت تاخیر عذرخواهم. من چند وقتی خاموش بودم :)

      1. راستش فرض اول و دوم مخلوطه
        من ضرورتی در انجام این کار ندارم ،
        ولی الان حرصم گرفته اینو راه بندازم
        چند روزه روش کار میکنم
        نتونستم حقیقتش :-(

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