Clay CSS v3.9.0

Dropdowns (Drill Down)

Each drilldown-item must have a unique id. To switch to the next drilldown-item, add the attribute data-drilldown="next" and a href="#theDrilldownItemId" attribute linking to the drilldown-item you would like to switch to.

The value next on data-drilldown should slide the items to the left and the value prev should slide to the right.

This requires external javascript to transition each drilldown-item on click. The javascript is not bundled with Clay CSS.

Drilldown Test Site Code

<script>
$(document).on('click', '[data-drilldown]', function(event) {
	var drilldownItemArr = [];

	var dataDrilldown = $(this).data('drilldown');

	var drilldownInner = $(this).closest('.drilldown-inner');

	var currentDrilldownItemId = '#' + $(this).closest('.drilldown-item').attr('id');
	var currentDrilldownItem = $(currentDrilldownItemId);

	var nextDrilldownItemId = $(this).attr('href');
	var nextDrilldownItem = $(nextDrilldownItemId);

	event.preventDefault();
	event.stopPropagation();

	drilldownInner.find('.drilldown-item').each(function(index, item) {
		drilldownItemArr.push('#' + $(this).attr('id'));
	});

	var currentItemPos = drilldownItemArr.indexOf(currentDrilldownItemId);
	var nextItemPos = drilldownItemArr.indexOf(nextDrilldownItemId);

	drilldownInner.css('height', drilldownInner.height());

	function drilldownItemTransitionend(element, focus) {
		element.on('transitionend.clay', function(event) {
			$(this)
				.removeClass('transitioning')
				.removeClass('drilldown-transition')
				.removeClass('drilldown-next')
				.css('transform', '')
				.off('transitionend.clay');

			if (focus) {
				$(this).find('.dropdown-item')[0].focus();
			}
		});
	}

	if (dataDrilldown === 'next') {
		// slides to the left
		if (currentItemPos < nextItemPos) { // in order
			currentDrilldownItem
				.addClass('transitioning')
				.removeClass('drilldown-current');

			nextDrilldownItem
				.addClass('transitioning')
				.addClass('drilldown-current');

			drilldownInner.css('height', nextDrilldownItem.find('.drilldown-item-inner').height());

			drilldownInner.on('transitionend.clay', function(event) {
				currentDrilldownItem
					.addClass('drilldown-transition')
					.css('transform', 'translateX(-100%)');

				nextDrilldownItem
					.addClass('drilldown-transition')
					.css('transform', 'translateX(-100%)');

				$(this).css('height', '').off('transitionend.clay');
			});

			drilldownItemTransitionend(currentDrilldownItem);
			drilldownItemTransitionend(nextDrilldownItem, true);
		}
		else if (currentItemPos > nextItemPos) { // out of order
			currentDrilldownItem
				.addClass('transitioning')
				.removeClass('drilldown-current')
				.css('transform', 'translateX(-100%)');

			nextDrilldownItem
				.addClass('transitioning')
				.addClass('drilldown-current')
				.css('transform', 'translateX(100%)');

			drilldownInner.css('height', nextDrilldownItem.find('.drilldown-item-inner').height());

			drilldownInner.on('transitionend.clay', function(event) {
				currentDrilldownItem
					.addClass('drilldown-transition')
					.css('transform', 'translateX(-200%)');

				nextDrilldownItem
					.addClass('drilldown-transition')
					.css('transform', '');

				$(this).css('height', '');
				$(this).off('transitionend.clay');
			});

			drilldownItemTransitionend(currentDrilldownItem);
			drilldownItemTransitionend(nextDrilldownItem, true);
		}
	}

	if (dataDrilldown === 'prev') {
		// slides to the right
		if (currentItemPos > nextItemPos) { // in order
			currentDrilldownItem
				.addClass('transitioning')
				.removeClass('drilldown-current')
				.css('transform', 'translateX(-100%)');

			nextDrilldownItem
				.addClass('transitioning')
				.addClass('drilldown-current')
				.css('transform', 'translateX(-100%)');

			drilldownInner.css('height', nextDrilldownItem.find('.drilldown-item-inner').height());

			drilldownInner.on('transitionend.clay', function(event) {
				currentDrilldownItem
					.addClass('drilldown-transition')
					.css('transform', '');

				nextDrilldownItem
					.addClass('drilldown-transition')
					.css('transform', '');

				$(this).css('height', '');
				$(this).off('transitionend.clay');
			});

			drilldownItemTransitionend(currentDrilldownItem);
			drilldownItemTransitionend(nextDrilldownItem, true);
		}
		else if (currentItemPos < nextItemPos) { // out of order
			currentDrilldownItem
				.addClass('transitioning')
				.removeClass('drilldown-current');

			nextDrilldownItem
				.addClass('transitioning')
				.addClass('drilldown-current')
				.css('transform', 'translateX(-200%)');

			drilldownInner.css('height', nextDrilldownItem.find('.drilldown-item-inner').height());

			drilldownInner.on('transitionend.clay', function(event) {
				currentDrilldownItem
					.addClass('drilldown-transition')
					.css('transform', 'translateX(100%)');

				nextDrilldownItem
					.addClass('drilldown-transition')
					.css('transform', 'translateX(-100%)');

				$(this).css('height', '');
				$(this).off('transitionend.clay');
			});

			drilldownItemTransitionend(currentDrilldownItem);
			drilldownItemTransitionend(nextDrilldownItem, true);
		}
	}
});
</script>