Transitions de navigation off-canvas

Aujourd’hui, que nous voudrions vous faire partager un autre ensemble d’effets de transition. Cette fois on explore les transitions pour barres latérales ou hors-canvas contenu comme celle que nous avons utilisés dans le Menu de pousser à plusieurs niveaux. L’idée est de montrer quelques sidebar caché avec une transition subtile sur l’élément lui-même ainsi que sur le contenu restant. Généralement la barre latérale coulisse, poussant l’autre contenu sur le côté. Mais il y a beaucoup plus de possibilités pour des effets subtils et fantaisies, et aujourd’hui nous voulons vous donner un peu d’inspiration.

La structure de notre démo est très spécifique, parce que nous voulons pouvoir montrer tous les effets dans une page seulement. Mais en général, nous avons besoin d’un élément de barre latérale qui sera à l’intérieur ou à l’extérieur d’un wrapper de la push, selon si nous voulons la barre latérale pour le wrapper de pousser sur le dessus ou en dessous.

<div id="st-container">

	<!-- content push wrapper -->
	<div>

		<nav id="menu-1">
			<!-- sidebar content -->
		</nav>

		<div><!-- this is the wrapper for the content -->
			<div><!-- extra div for emulating position:fixed of the menu -->
				<!-- the content -->
			</div><!-- /st-content-inner -->
		</div><!-- /st-content -->

	</div><!-- /st-pusher -->

</div><!-- /st-container -->

Ou

<div id="st-container">

	<nav id="menu-1">
		<!-- sidebar content -->
	</nav>

	<!-- content push wrapper -->
	<div>

		<div><!-- this is the wrapper for the content -->
			<div><!-- extra div for emulating position:fixed of the menu -->
				<!-- the content -->
			</div><!-- /st-content-inner -->
		</div><!-- /st-content -->

	</div><!-- /st-pusher -->

</div><!-- /st-container -->

Un effet d’exemple est le suivant. Nous ajoutons une valeur du point de vue au conteneur principal et ensuite on fait pivoter le wrapper et le menu en 3D :

.st-effect-7.st-container {
	perspective: 1500px;
	perspective-origin: 0% 50%;
}

.st-effect-7 .st-pusher {
	transform-style: preserve-3d;
}

.st-effect-7.st-menu-open .st-pusher {
	transform: translate3d(300px, 0, 0);
}

.st-effect-7.st-menu {
	transform: translate3d(-100%, 0, 0) rotateY(-90deg);
	transform-origin: 100% 50%;
	transform-style: preserve-3d;
}

.st-effect-7.st-menu-open .st-effect-7.st-menu {
	visibility: visible;
	transform: translate3d(-100%, 0, 0) rotateY(0deg);
}