Circular Filter Menu In jQuery

Do you have a list with many items that need to be filtered? In this article, we'll look at how to use jQuery and CSS to create a circular popup menu to filter items in your list.

It's perfect for mobile devices because it takes up less space and makes it easy to filter through your list items quickly, without having to scroll down on screen. Let's get started!

How to use it:

1. Suppose you have a long HTML list that looks as follows:

<ul class="tasks">
  <li class="one red">
    <span class="task-title">Make New Icon</span>
    <span class="task-time">5pm</span>
    <span class="task-cat">Web App</span>
  </li>
  <li class="one red">
    <span class="task-title">Catch up with Brian</span>
    <span class="task-time">3pm</span>
    <span class="task-cat">Mobile Project</span>
  </li>
  <li class="two green">
    <span class="task-title">Design Explorations</span>
    <span class="task-time">2pm</span>
    <span class="task-cat">Company Web site</span>
  </li>
  <li class="three yellow">
    <span class="task-title">New Projects</span>
    <span class="task-time">2pm</span>
    <span class="task-cat">Starting</span>
  </li>
</ul>

2. Create the HTML for the circular popup menu. In this example, we will use the Ionicons library to provide the icons needed for this menu. Note that each list item must have a unique ID as follows:

<div class="filter-btn">
  <!-- Menu Items -->
  <a id="one" href="#"><i class="ion-ios-checkmark-outline"></i></a>
  <a id="two" href="#"><i class="ion-ios-alarm-outline"></i></a>
  <a id="three" href="#"><i class="ion-ios-heart-outline"></i></a>
  <a id="all" href="#"><i class="ion-ios-star-outline"></i></a>
  <!-- Trigger Button -->
  <span class="toggle-btn ion-android-funnel"></span>
</div>

3. The necessary CSS styles for the circular popup menu.

.filter-btn {
  position: absolute;
  z-index: 2;
  right: 0;
  width: 40px;
  height: 40px;
  transition: all 0.4s ease-in-out 0s;
}

.filter-btn span {
  width: 40px;
  height: 40px;
  background: #FA396B;
  display: block;
  position: absolute;
  right: 25px;
  top: -46px;
  text-align: center;
  color: #fff;
  line-height: 40px;
  border-radius: 50%;
  font-size: 22px;
  z-index: 999;
}

span.toggle-btn.ion-android-funnel:hover {
  cursor: pointer;
}

.filter-btn a {
  position: absolute;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  right: 25px;
  display: block;
  top: -46px;
  color: #fff;
  z-index: 99;
  font-size: 22px;
  transition: all .4s cubic-bezier(.68, 1, .265, 1)
}

.filter-btn:after {
  height: 170px;
  width: 170px;
  content: '';
  background-color: #FA396B;
  position: absolute;
  top: -110px;
  right: -40px;
  border-radius: 50%;
  transform: scale(0);
  transition: all 0.3s ease-in-out 0s;
}

.filter-btn.open span.toggle-btn.ion-android-funnel {
  background-color: #DE3963;
}

.filter-btn.open .ion-android-funnel:before {
  content: "\f2d7";
}

.open:after {
  transform: scale(1);
}

.filter-btn.open a:nth-child(1) {
  transform: translate(9px, -62px);
}

.filter-btn.open a:nth-child(2) {
  transform: translate(-50px, -34px);
}

.filter-btn.open a:nth-child(3) {
  transform: translate(-56px, 25px);
}

.filter-btn.open a:nth-child(4) {
  transform: translate(5px, 61px);
}

4. Load the needed jQuery library just before the closing body tag.

<script src="/path/to/cdn/jquery.min.js"></script>

5. Enable the toggle button to open/close the circular popup menu.

$(function () {
  $('.toggle-btn').click(function () {
    $('.filter-btn').toggleClass('open');
  });

  $('.filter-btn a').click(function () {
    $('.filter-btn').removeClass('open');
  });
});

6. Enable the menu links to filter through the list items. You may have noticed that we used jQuery's slideDown function here to provide a smooth transition effect.

$('#all').click(function () {
  $('ul.tasks li').slideDown(300);
});

$('#one').click(function () {
  $('.tasks li:not(.one)').slideUp(300, function () {
    $('.one').slideDown(300);
  });
});

$('#two').click(function () {
  $('.tasks li:not(.two)').slideUp(300, function () {
    $('.two').slideDown(300);
  });
});

$('#three').click(function () {
  $('.tasks li:not(.three)').slideUp(300, function () {
    $('.three').slideDown(300);
  });
});

---

This awesome jQuery plugin is developed by codeexpress333. For more Advanced Usages, please check the demo page or visit the official website.