Mobile App Filter Menu

By Rafi

How do I use This?

A mobile app filter navigation style.

HTML

<ul class="mobile-app-filter-menu" data-mobile-app-filter-menu>
  <li class="is-active"><a href="#">Day</a></li>
  <li><a href="#">Week</a></li>
  <li><a href="#">Month</a></li>
  <li><a href="#">Year</a></li>
</ul>

$mobile-app-filter-menu-height: rem-calc(45);

.mobile-app-filter-menu {
  display: flex;
  list-style-type: none;
  justify-content: space-around;
  margin: 0;
  height: $mobile-app-filter-menu-height;
  align-items: center;
  border-top: 1px solid $medium-gray;
  border-bottom: 1px solid $medium-gray;

  li {
    a {
      color: $medium-gray;
    }

    &.is-active {
      a {
        color: $dark-gray;
      }
    }
  }
}

.mobile-app-filter-menu {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  list-style-type: none;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  margin: 0;
  height: 2.8125rem;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  border-top: 1px solid #cacaca;
  border-bottom: 1px solid #cacaca;
}

.mobile-app-filter-menu li a {
  color: #cacaca;
}

.mobile-app-filter-menu li.is-active a {
  color: #8a8a8a;
}

$('[data-mobile-app-filter-menu] li').click(function () {
  $(this).siblings().removeClass('is-active');
  $(this).addClass('is-active');
});

Mobile App Filter Menu

By Rafi

Hover Underline Menu

Top Bar with Animation

Sticky Top Bar

Mobile App Filter Menu

By Rafi

Similar Building Blocks

Hover Underline Menu

Top Bar with Animation

Sticky Top Bar