Category Filter

When enabled a menu is dynamically populated at the top of the module which uses the categories for the items displayed in the module as a filterable menu system. When a category title is clicked then only items that are a part of that category are shown.

 

  • A tree too far

    Donec mollis orci vel turpis tempus aliquam. Suspendisse tincidunt tincidunt ante eget lacinia. In iaculis pulvinar urna, in iaculis lacus blandit in. Vivamus euismod, nisi eget interdum mollis, augue leo vulputate diam, eu vulputate lectus elit et augue. Cras a leo in quam bibendum dapibus tempus euismod est.

  • Powerful methods

    Donec mollis orci vel turpis tempus aliquam. Suspendisse tincidunt tincidunt ante eget lacinia. In iaculis pulvinar urna, in iaculis lacus blandit in. Vivamus euismod, nisi eget interdum mollis, augue leo vulputate diam, eu vulputate lectus elit et augue. Cras a leo in quam bibendum dapibus tempus euismod est.

  • Waiting watching listening

    Donec mollis orci vel turpis tempus aliquam. Suspendisse tincidunt tincidunt ante eget lacinia. In iaculis pulvinar urna, in iaculis lacus blandit in. Vivamus euismod, nisi eget interdum mollis, augue leo vulputate diam, eu vulputate lectus elit et augue. Cras a leo in quam bibendum dapibus tempus euismod est.

  • Powerful methods

    Donec mollis orci vel turpis tempus aliquam. Suspendisse tincidunt tincidunt ante eget lacinia. In iaculis pulvinar urna, in iaculis lacus blandit in. Vivamus euismod, nisi eget interdum mollis, augue leo vulputate diam, eu vulputate lectus elit et augue. Cras a leo in quam bibendum dapibus tempus euismod est.

Display showall button

When enabled a button is shown in the filter menu which shows all items from all categories currently available for display in the module.

 

Active Category

The active category for the module determines the category which is first shown when the page loads. When a category is selected that is other than the select all categories option only items from that specific category will be shown and the menu title for that category will be highlighted.

 

Developer Note

The filter ul li a is given an active class when it is active.

ul#filters li a.active {}

Filter title width threshold - Small Filter

This is a numerical value that determine the browser width that changes the title of the filters from a menu based on category titles to a menu that is populated as navigation circles (Small Filter).

Resize the browser window to see the Small filter layout. The demo site uses 800px as the threshold for the Small Filter.

It is not necessary to specify a px value here. eg 800.

 

Developer Note

When the Small Filter is triggered the filter navigation receives the class .sml-filter.

ul#filters.sml-filter {}
Back to top