PluXml.org

Blog ou CMS à l'Xml

Vous n'êtes pas identifié(e).

#1 02/01/2018 12:11:08

SieurVLD
Membre
Inscription : 23/01/2016
Messages : 18

[plugin] menu sur 3 niveaux

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 :

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.

MegaMenu

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 :
Resultat

Dernière modification par SieurVLD (17/04/2018 15:47:58)

Hors ligne

#2 02/01/2018 16:07:26

je-evrard
Pluxml Staff
Lieu : pau
Inscription : 08/05/2012
Messages : 1 197
Site Web

Re : [plugin] menu sur 3 niveaux

Hello,

Très bon plugin. Bravo.

Quelques critiques

Le positif :

  • 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

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

  • 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 ?)

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

++

jéjé

Dernière modification par je-evrard (02/01/2018 16:34:14)


Petit à petit l'oiseau fait son nid.
- Sites : Création web - Création artistique
- pluxml : Plugins - Visual Wizard - facebook vw

Hors ligne

#3 02/01/2018 21:20:39

Dudy
Membre
Lieu : Neuchâtel - Suisse
Inscription : 20/01/2007
Messages : 348

Re : [plugin] menu sur 3 niveaux

Super plugin bravo

Hors ligne

#4 05/01/2018 18:17:31

SieurVLD
Membre
Inscription : 23/01/2016
Messages : 18

Re : [plugin] menu sur 3 niveaux

Bonjour,

merci pour vos retours.

voici une mise à jour avec :

  • 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

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

Hors ligne

#5 12/01/2018 18:13:03

je-evrard
Pluxml Staff
Lieu : pau
Inscription : 08/05/2012
Messages : 1 197
Site Web

Re : [plugin] menu sur 3 niveaux

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

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

Bon boulot vraiment !

++


jéjé


Petit à petit l'oiseau fait son nid.
- Sites : Création web - Création artistique
- pluxml : Plugins - Visual Wizard - facebook vw

Hors ligne

#6 17/04/2018 15:33:56

SieurVLD
Membre
Inscription : 23/01/2016
Messages : 18

Re : [plugin] menu sur 3 niveaux

Bonjour à tous,

Mise à jour V0.45

  • Refonte du code

  • Mega-menu

  • Compatible Bootstrap


Voir le 1er Post.

Hors ligne

Pied de page des forums

A propos Nous soutenir Contact Twitter Google+
Copyright © 2006-2018 PluXml.org, tous droits réservés