Aujourd’hui, nous voulons vous faire partager une autre expérience de menu. À coup sûr, vous êtes familiers avec la navigation off-canvas sur des applications mobiles et les implémentations pour les sites sensible. Nous avons essayé d’étudier la possibilité de créer un menu de plusieurs niveaux imbriqué, quelque chose qui pourrait être très utile pour les menus avec beaucoup de contenu (comme les navigations de magasins en ligne). Le résultat est un menu de « push » qui peut contenir (théoriquement) infinies sous-menus imbriqués. Lorsque vous ouvrez un sous-niveau, la navigation entière pousse le contenu plus, permettant ainsi une tranche du menu parent soit visible. Éventuellement, cette tranche peut être visible ou non, auquel cas le sous-menu couvrira tout simplement son parent.
Travailler avec des structures imbriquées est assez difficile parce que si nous, par exemple, déplaçons le parent puis tous les enfants vont êtres déplacés. Donc nous utilisons quelques astuces qui permettra de maintenir la droite 3D pour les sous-menus et leurs enfants. L’idée principale est d’incrémenter la valeur pour les traduire afin que nous vous garantissons que les sous-niveaux n’apparaissent pas une fois que nous poussons tout d’un peu plus pour montrer les tranches des parents. Bien sûr, ce n’est pas nécessaire dans le cas où le sous-menu est couvrant le menu parent.
Veuillez notez que nous utilisons des transformations 3D qui ne fonctionnent que dans les navigateurs modernes. Vous trouverez un exemple de secours pour soutenir les non navigateurs à la fin du fichier component.css où nous montrons simplement le premier niveau de menu. Les mêmes que nous le faisons pour l’aucun cas JS.
Nous utilisons la structure imbriquée suivante pour le menu :
<!-- mp-menu -->
<nav id="mp-menu" class="mp-menu">
<div class="mp-level">
<h2 class="icon icon-world">All Categories</h2>
<ul>
<li class="icon icon-arrow-left">
<a class="icon icon-display" href="#">Devices</a>
<div class="mp-level">
<h2 class="icon icon-display">Devices</h2>
<ul>
<li class="icon icon-arrow-left">
<a class="icon icon-phone" href="#">Mobile Phones</a>
<div class="mp-level">
<h2>Mobile Phones</h2>
<ul>
<li><a href="#">Super Smart Phone</a></li>
<li><a href="#">Thin Magic Mobile</a></li>
<li><a href="#">Performance Crusher</a></li>
<li><a href="#">Futuristic Experience</a></li>
</ul>
</div>
</li>
<li class="icon icon-arrow-left">
<!-- ... -->
</li>
<li class="icon icon-arrow-left">
<!-- ... -->
</li>
</ul>
</div>
</li>
<li><!-- ... --></li>
<!-- ... -->
</ul>
</div>
</nav>
<!-- /mp-menu -->
où chaque niveau est encapsulée dans une division avec la classe mp-niveau.
Normalement, nous aurions utilisé un positionnement fixe pour un menu de ce genre, mais puisqu’il n’y a fait un étrange « problème » avec que (transforms le rendra se comporter comme un élément à positionnement absolu), il faudra utiliser le positionnement absolu qui nous laissera avec certains comportements indésirables du site (défilement du menu et de la dépendance à l’égard de la hauteur du document). Donc nous avons utilisé un petit truc pour éviter le menu étant flottant ou à couper off si le contenu du site est trop court en utilisant la structure de la page suivante :
<div class="container">
<!-- Push Wrapper -->
<div class="mp-pusher" id="mp-pusher">
<!-- mp-menu -->
<nav id="mp-menu" class="mp-menu">
<!-- ... -->
</nav>
<!-- /mp-menu -->
<div class="scroller"><!-- this is for emulating position fixed of the nav -->
<div class="scroller-inner">
<!-- site content goes here -->
</div>
</div><!-- /scroller-inner -->
</div><!-- /scroller -->
</div><!-- /pusher -->
</div><!-- /container -->
On définit les styles suivants aux éléments:
html,
body,
.container,
.scroller {
height: 100%;
}
.scroller {
overflow-y: scroll;
}
.scroller,
.scroller-inner {
position: relative;
}
.container {
position: relative;
overflow: hidden;
background: #34495e;
}
Cela permettra le contenu à faire défiler lorsque le menu est fermé et il fera également le menu étant à 100 % de la hauteur de la fenêtre. Fondamentalement, nous émulons ce que le positionnement fixe ferait ici.
C’est comment le plugin peut être appelé :
new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) );
Ou, si les sous-menus devraient couvrir les niveaux précédents :
new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ), {
type : 'cover'
} );
Cet article Créer un menu multi-niveau css est apparu en premier sur kawageek.