Filter Menu Use jQuery and CSS to create a circular popup to filter the items in your menu.

jquery animated counter progress bar, svg circular menu, animated circle menu with jquery css3, circular navigation plugin, circular menu flutter

How to make use of it:

1. Suppose you have a long HTML list that looks like this:

<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. Generate the HTML for the carousel popup.

<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. Necessary CSS Styles for Carousel Popup.

.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 required jQuery library just before the closing tag.

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

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

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

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

6. Enable menu links to filter menu items.

$('#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);
  });
});

Circular Filter Menu In jQuery Plugin/Github

See Demo And Download

Official Website(codeexpress333): Click Here

This superior jQuery/javascript plugin is developed by codeexpress333. For extra Advanced usage, please go to the official website.