[plugin] menu sur 3 niveaux

SieurVLD · janvier 2018

Bonjour,

Voici un plugin pour la gestion du menu sur 3 niveaux en mode glisser-déposer.

Ce plugin créé une liste html dans /data/configuration/menu.php

Il suffit alors de remplacer la fonction du menu natif par l'inclusion de ce fichier.
il faut bien sûr styler le menu avec du CSS.

Pour les cibles des liens interne :
Pour un article mettre article + N° de l'article, ex: article0001
Pour une pseudo page statique mettre son nom, ex: Contact

menu.zip V0.45 (24ko)

Versions :
0.42 Publication
0.43 Ajout de la classe active, des ID personnalisables, du hook et du shortcode.
0.45 Refonte du code, mega-menu, compatible Bootstrap

Petite démo :

Méga Menu :

L'ajout du Méga-menu n'est possible que dans le 1er niveau.
Et les images que dans les Méga-menu.

Résultat :

Test avec les thèmes suivants :

Responsive : http://ressources.pluxml.org/?theme167/theme-point

Ajout du menu dans le Header :

[== PHP ==]
<header id="masthead" class="site-header" role="banner">
                <div class="site-branding">
                    <h1 id="logo" class="image-logo" itemprop="headline">
					<a href="./"><img src="<?php $plxShow->template(); ?>/images/logo.png" alt="Point"></a>
				</h1>			
                 <?php /*   <a href="#" id="pull" class="toggle-mobile-menu">Menu</a>
                    <div class="primary-navigation">
                        <nav id="navigation" class="mobile-menu-wrapper" role="navigation">
                            <ul id="menu-menu" class="menu clearfix">
                                <?php $plxShow->staticList($plxShow->getLang('HOME'),'<li class="menu-item  #static_status" id="#static_id"><a href="#static_url" title="#static_name">#static_name</a></li>'); ?>
                                    <?php $plxShow->pageBlog('<li class="menu-item  #static_status" id="#page_id"><a class="#page_status" href="#page_url" title="#page_name">#page_name</a></li>'); ?>
                                        <li class="menu-item menu-item-has-children">
                                            <a href="./">
												<?php $plxShow->lang('CATEGORIES'); ?>
											</a>
                                            <ul class="sub-menu">
                                                <?php $plxShow->catList('','
									<li class="menu-item menu-item-type-post_type menu-item-object-page">
										<a href="#cat_url">
											#cat_name
											<!--br /><span class="sub">Color, Layout more</span-->
										</a>
									</li>'); ?>
                                            </ul>
                                        </li>
                            </ul>
                        </nav>
                    </div> <?php/*   */?>
					
                </div>
				<div class="clearfix">
				</div>
				<!-- menu -->
					<div id="menuEx" class="menuEx">
						<nav role="navigation" id="navEx">
						<input class="trigger" id="mainNavButton" type="checkbox">
						<label for="mainNavButton" onclick="">Menu</label>
						<ul id="ulEx">
							<?php include(PLX_ROOT.'data/configuration/menu.php'); ?>
						</ul>
					</div>
				<!-- end menu -->
            </header>

Ajout du CSS :

[== CSS ==]
.clearfix::after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

#navEx  {
	position:  relative;
	background-color:  #F5F5F5;
}
#navEx input.trigger  {
	position:  absolute;
	top:  -9999px;
	left:  -9999px;
}

#navEx ul  {
	display:  none;
	width:  100%;
	list-style:  none;
	margin:  0px;
	padding:  0px;
	text-transform:  uppercase;
}
#navEx ul li a  {
	display:  block;
	padding:  1em;
	background:  #F5F5F5;
	color:  #2a2a2a;
	text-decoration:  none;
	border-right:  1px solid #E2E2E2;
}
#navEx ul li a:hover  {
	background:  #E2E2E2;
}
#navEx > ul > li > a {
	border-bottom: 3px solid #e2e2e2;
}
.active {
	background:  white !important;
	border-bottom: solid 3px #fff !important;
}
#navEx ul li:last-of-type a  {
	border-right:  0px;
}
#navEx ul li ul li a  {
	padding-left:  1.5em;
}
#navEx ul li ul li ul li a  {
	padding-left:  3.125em;
}
#navEx label  {
	position:  relative;
	display:  block;
	min-height:  2em;
	padding:  0.45em;
	font-size:  1.1em;
	margin:  0;
	cursor:  pointer;
	background:  #F5F5F5;
	line-height:  2em;
	color:  #fff;
}
#navEx label:after  {
	position:  absolute;
	right:  1em;
	top:  0.2em;
	content:  "\2261";
	font-size:  1.8em;
	color:  white;
}
#navEx input.trigger:checked ~ ul,  #navEx input.trigger:checked ~ ul li ul  {
	display:  block !important;
}

@media (min-width: 48em)  {
	#navEx ul  {
		display:  flex;
		flex-direction:  row;
	}
	#navEx ul li  {
		position:  relative;
		text-align:  center;
		flex:  1;
	}
	#navEx ul li ul  {
		display:  none !important;
		position:  absolute;
		top:  54px;
		left:  0;
		width:  12.5em;
		z-index:  200;
	}
	#navEx ul li ul li  {
		text-align:  left;
	}
	#navEx ul li ul li ul  {
		z-index:  300;
		top:  0px;
		left:  12.4em;
	}
	#navEx ul li ul li ul li a  {
		padding-left:  30px !important;
	}
	#navEx ul li:hover > ul  {
		display:  block !important;
	}
	#navEx label  {
		display:  none;
	}
	
	/* Mega-menu */
	
	#navEx ul li.droppable ul a  {
		border-right:  0px;
	}
	
	#navEx ul li.droppable:hover > ul  {
		display:  flex !important;
	}
	
	#navEx ul li.droppable ul li ul{
		display:  block !important;
		position: relative;
		left: auto;
		width: 80%
	}
	
	.mega-menu  {
		background:  #F5F5F5; 
		display:  none;
		left:  0;
		position:  absolute;
		/*text-align:  left;*/
		width:  100% !important;
	}
	
	.mega-menu > li > a{
		font-weight: bold;
		border-bottom:  1px solid #E2E2E2;
		width: 80%
	}
	
	.mega-menu img {
		position: relative;
		top: 50%;
		transform: translateY(-50%);
		transform-style: preserve-3d;
		display: block;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}
	
	.droppable  {
		position:  static !important;
	}
	.droppable:hover .mega-menu  {
		display:  flex !important;
	}
}

Bootstrap : http://forum.pluxml.org/viewtopic.php?id=4208

Changement du Header :

[== PHP ==]
<?php //$plxShow->staticList($plxShow->getLang('HOME'),'<li class="#static_status"><a href="#static_url" title="#static_name">#static_name</a></li>'); ?>
<?php //$plxShow->pageBlog('<li class="#page_status" id="#page_id"><a href="#page_url" title="#page_name">#page_name</a></li>'); ?>
<?php include(PLX_ROOT.'data/configuration/menu.php'); ?>

Ajout du CSS :

[== CSS ==]
/* 3eme niveau menu */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    border-radius: 6px 0 6px 6px;
}

/* mega menu */

.droppable.dropdown {
	position: static;
}
.dropdown-menu.mega-menu {
	text-align: center;
	width: 100%;
	padding-bottom: 12px;
}
.mega-menu > li {
	display: inline-block;
	margin: 0 3%;
	vertical-align: text-top;
}

.mega-menu li {
	list-style: none;
}

.mega-menu ul {
	padding: 0;
}

.mega-menu img {
	position: relative;
	/*top: 50%;
	transform: translateY(-50%);
	transform-style: preserve-3d;*/
	display: block;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

Résultat coté site :

je-evrard · janvier 2018

Hello,

Très bon plugin. Bravo.

Quelques critiques

Le positif :

[list=*]
[*]simple a installer et léger[/*]
[*]puissant dans sa configuration 3 niveaux [/*]
[*]puissant dans sa gestion des pages (static, cat...)[/*]
[*]simple a administrer[/*]
[*]simple a afficher coté front[/*]
[/list]

Queques points à améliorer (c'est mon avis bien sur)

[list=*]
[*]Rajout de classe et/ou d'id personnalisés dans la sortie front de la liste[/*]
[*]Prise en compte du mode et des id des pages pour afficher une class "active" sur l'item du menu de la page en cours ( $plxShow->mode() ...)[/*]
[*]Création d'un shortcode d'affichage avec paramètres de sortie (voir spxshortcodes )[/*]
[*]Pour le menu.js personnellement j'aurais tout encapsulé dans un plugin jquery, la aussi ça reste mon avis le principal étant que ça fonctionne et c'est bien entendu le cas ici[/*]
[*]Gestion de plusieurs menus (comme wp ?)[/*]
[/list]

Voili voilou et encore bravo ! Surement un must have plx !

++

jéjé

Dudy · janvier 2018

Super plugin bravo

SieurVLD · janvier 2018

Bonjour,

merci pour vos retours.

voici une mise à jour avec :
[list=*]
[*]Ajout de la classe "active" pour le bouton ou son descendant sélectionné, avec cible modifiable pour les liens[/*]
[*]Id personnalisable [/*]
[*]Création d'un shortcode [/*]
[*]Ajout du hook [/*]
[*]Ajout du _blank [/*]
[/list]

Petite question est-il possible de lister les psedo pages statiques comme "Contact" par exemple ?

je-evrard · janvier 2018

La dernière mise à jour est excellente au fait !!! (tardive ma réponse).

Quelques options dans le shortcodes et cela serait parfait (rajout de class spécifique ou formatage partculier...)

Bon boulot vraiment !

++

jéjé

SieurVLD · avril 2018

Bonjour à tous,

Mise à jour V0.45

[list=*]
[*]Refonte du code[/*]
[*]Mega-menu[/*]
[*]Compatible Bootstrap[/*]
[/list]

Voir le 1er Post.

[plugin] menu sur 3 niveaux

Réponses