Filter Navigation

This navigation bar is used to filter out results with the filter-item class. It will fade in/out filtered items.

Both the filter and container for filtered items need to be contained in a parent containing element.

Each option requires the filter--option class, and the first 'all' option should have the active class. Additionally, each option link requires a data-filter.

Each item to be filtered requires the filter-item class, and it's data-filter.

<section class="container">
    <ul class="nav--filter">
        <li>
            <a data-filter="all" class="filter--option active">All</a>
        </li>
        <li>
            <a data-filter="room" class="filter--option">Rooms</a>
        </li>
    </ul>
    <section class="gallery">
        <div class="filter-item" data-filter="">
            <img src="photo-url_small" alt="photo-name">
        </div>
    </section>
</section>