Tout savoir pour devenir un pro de PluXml, mais pas seulement...

Afficher les catégories sous forme de menus déroulants


Rédigé par jack le 5 commentairese

Nous allons voir en 2 étapes comment afficher la liste des catégories dans un menu déroulants, dans la barre des menus des page statiques

1ère étape: modification du fichier thème

Éditer le fichier header.php de votre thème (exemple /themes/defaut/header.php)

Localisez les lignes suivantes


<?php $plxShow->staticList($plxShow->getLang('HOME'),'<li class="#static_status" id="#static_id"><a href="#static_url" title="#static_name">#static_name</a></li>'); ?>
<?php $plxShow->pageBlog('<li id="#page_id"><a class="#page_status" href="#page_url" title="#page_name">#page_name</a></li>'); ?>
Remplacez les par le code suivant

<?php $plxShow->staticList($plxShow->getLang('HOME'),'<li class="#static_status" id="#static_id"><a href="#static_url" title="#static_name">#static_name</a></li>'); ?>
<li class="submenus">
	<a href="#"><?php $plxShow->lang('CATEGORIES') ?> ▼</a>
	<ul>
		<?php $plxShow->catList('','<li id="#cat_id"><a class="#cat_status" href="#cat_url" title="#cat_name">#cat_name</a> (#art_nb)</li>'); ?>
	</ul>
</li>
<?php $plxShow->pageBlog('<li id="#page_id"><a class="#page_status" href="#page_url" title="#page_name">#page_name</a></li>'); ?>

2ième étape: modification de la feuille de style

Éditer le fichier theme.css de votre thème (exemple /themes/defaut/css/theme.css)

Rajoutez à la fin du fichier les lignes suivantes


.submenus ul {
    position: relative;
    left: -9999px;
    float: left;
	margin: 0;
	padding: 0;
    list-style: none;
	z-index: 999;
}
.submenus:hover ul {
	left: 0;
	color: #fff;
	background-color:#000;
}
.submenus:hover ul li {
	font-size: 0.9rem;
	clear: both;
	float: left;
	padding: 2px 10px 2px 10px;
	width: 100%;
}
.submenus:hover ul li a {
    display: inline-block;
	margin: 0;
	padding: 3px 0 3px 0;
}
.submenus:hover ul li a:hover {
	text-decoration: none;
}

Et voilà, à vous d'adapter en fonction de vos besoins et de votre thème.

DClassé dans : PluXml ,Mots clés : Css, Menu, Catégories, PluXml, Tuto, Template

A propos de l'auteur, jack:

Webmestre de PluXopolis de 2018 à Avril 2023.

5 commentaires

bg62 a dit : #1

bonjour Stéphane :)
"SI" je me contente de faire un ' copier / coller ' de 'ton' code, j'obtiens bien, visuellement le menu Catégories ( déroulant) dans ma page, mais tout 'clic' sur l'une des catégories redirige donc ... chez toi ...
Ne pourrait-on avoir un exemple plus ' passe-partout ' , qui fonctionnerait quelque soit le site ?
@mitiés
bg

Stéphane a dit : #2

Salut bg. Reprends le code donné, j'ai corrigé le problème. Le copier/coller devrait être ok maintenant.

bg62 a dit : #3

J'ai essayé ceci qui a l'air de fonctionner:
<nav class="nav">
<div class="container">
<div class="responsive-menu">
<label for="menu"></label>
<input type="checkbox" id="menu">
<ul class="menu">
<?php $plxShow->staticList($plxShow->getLang('HOME'),'<li class="#static_class #static_status" id="#static_id"><a href="#static_url" title="#static_name">#static_name</a></li>'); ?>
<?php $plxShow->pageBlog('<li class="#page_class #page_status" id="#page_id"><a href="#page_url" title="#page_name">#page_name</a></li>'); ?>
<li class="submenus"> <a href=""><?php $plxShow->lang('CATEGORIES') ?> ▼</a>
<ul><?php $plxShow->catList('','<li id="#cat_id"><a class="#cat_status" href="#cat_url" title="#cat_name">#cat_name</a> (#art_nb)</li>'); ?></ul>
</div>
</div>
</nav>
+
les modifs que tu viens de mettre ici :
https://github.com/pluxml/PluXml/issues/220
qu'en penses-tu ?

Stéphane a dit : #4

ça me semble tout bon

Pierre A. a dit : #5

Il semblerait qu'en CSS le selecteur :target apporte une nouvelle solution.

rFil RSS des commentaires de cet article

Les commentaires sont fermés.

Top