[plugin] menu sur 3 niveaux

SieurVLDSieurVLD Member
avril 2018 modifié dans Plugins
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 :

8kj2.gif

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.

618r.gif

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 :
rz35.gif

Réponses

  • je-evrardje-evrard Member
    janvier 2018 modifié
    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é
  • Super plugin bravo
  • 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 ?
  • 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é
  • Bonjour à tous,

    Mise à jour V0.45

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


    Voir le 1er Post.
Connectez-vous ou Inscrivez-vous pour répondre.