catégories en liste déroulante

jol5926

Hello,

Serait-il possible d'avoir dans la sidebar la liste des catégories en liste déroulante ?

Merci

Jol

Pierre

Une belle question d'examen. Le principe du SELECT en HTML traditionnel fait partie d'un formulaire. Une multitude de méthodes existent mais, en incorporant un appel javascript, on peut respecter le look ancestral de la liste HTML:

[== HTML ==]
<form>
	<select onChange="if(this.selectedIndex!=0) self.location=this.options[this.selectedIndex].value">
		<option value="" selected>Choisir une catégorie
		<?php $plxShow->catList('','<option value="#cat_url" id="#cat_id">#cat_name (#art_nb)</option>'); ?>
	</select>
</form>

bazooka07

Correction de la copie

[list=*]
[*]La valeur de <select..> s'obtient directement par "this.value"[/*]
[*]la fonction $plxShow->catList ne connait pas le tag #cat_selected. Il faut donc ruser pour ajouter selected à <option>[/*]
[/list]
Au final on arrive à ceci:

[== Indéfini ==]
<select id="catList" onchange="if(this.value.trim() != '') { window.location = this.value; }">
    <option value="">Votre choix...</option>
    <?php $plxShow->catList('', '<option class="#cat_status" value="#cat_url">#cat_name (#art_nb)</option>'."\n"); ?>
</select>
<script type="text/javascript">
    (function(query) {
        var option = document.querySelector(query);
        if(option != null) { option.setAttribute('selected', ''); }
    })('#catList .active');
</script>

P.S.: Au lieu de onchange, il est préférable d'utiliser addEventListener()

Pierre

Comme je disais, la question a été posée et répondue des centaines de fois depuis 30 ans, chaque version de réponse avait son degré de complexité. Tant mieux quand nos experts nous montrent le chemin.

Moi j'aime bien la simplicité visuelle quand elle fonctionne mais parfois les bonnes pratiques offrent une méthode plus stable à travers les versions de navigateurs. Les thèmes que je transpose sur PluXml n'utiliseront jamais ces méthodes, les designers de CSS nous font un visuel plus moderne et correct sous tous les angles. À la prochaine.

bazooka07

@jol5926,

Au cas où cela t'aurait échapper on peut aussi disposer les catégories dans la barre de menu comme sous-menus :
http://www.pluxopolis.net/article83/afficher-les-categories-sous-forme-de-menus-deroulants

Et garder la barre de menu en haut de l'écran quand le visiteur scrolle comme un fou furieux:
http://forum.pluxml.org/viewtopic.php?id=5959

Cela libérera encore plus de place sur la sidebar.

bazooka07

Petite astuce supplémentaire:
Pour éviter d'avoir à tester une valeur nulle, on peut mettre une option pour renvoyer à la page d'accueil

[== PHP ==]
<select id="catList" onchange="window.location = this.value;">
    <?php $plxShow->catList('Toutes', '<option class="#cat_status" value="#cat_url">#cat_name #art_nb</option>'."\n"); ?>
</select>
<script type="text/javascript">
    (function(query) {
        var option = document.querySelector(query);
        if(option != null) { option.setAttribute('selected', ''); }
    })('#catList .active');
</script>

jol5926

bazooka07 a écrit:

@jol5926,

Au cas où cela t'aurait échapper on peut aussi disposer les catégories dans la barre de menu comme sous-menus :
http://www.pluxopolis.net/article83/afficher-les-categories-sous-forme-de-menus-deroulants

Et garder la barre de menu en haut de l'écran quand le visiteur scrolle comme un fou furieux:
http://forum.pluxml.org/viewtopic.php?id=5959

Cela libérera encore plus de place sur la sidebar.

Merci beaucoup pour toutes ces infos.
Je vais regarder ça de près

jol5926

bazooka07 a écrit:

Petite astuce supplémentaire:
Pour éviter d'avoir à tester une valeur nulle, on peut mettre une option pour renvoyer à la page d'accueil

[== PHP ==]
<select id="catList" onchange="window.location = this.value;">
    <?php $plxShow->catList('Toutes', '<option class="#cat_status" value="#cat_url">#cat_name #art_nb</option>'."\n"); ?>
</select>
<script type="text/javascript">
    (function(query) {
        var option = document.querySelector(query);
        if(option != null) { option.setAttribute('selected', ''); }
    })('#catList .active');
</script>

Super,
tout est opérationnel

bazooka07

Parfait.

Si tu souhaites garder le menu à l'écran quand la page défile, tu peux modifier theme.css vers la ligne 66 comme ci-dessous :

[== CSS ==]
.nav {
    height: 1.9rem;
    margin-bottom: 10px;
    position: sticky;
    top: 0;
    z-index: 2;
}

Tu as un grave souci avec le plugin plxMiniTchat qui génére un message d'erreur toutes les 2 secondes environ !

jol5926

bazooka07 a écrit:

Parfait.

Si tu souhaites garder le menu à l'écran quand la page défile, tu peux modifier theme.css vers la ligne 66 comme ci-dessous :

[== CSS ==]
.nav {
    height: 1.9rem;
    margin-bottom: 10px;
    position: sticky;
    top: 0;
    z-index: 2;
}

Tu as un grave souci avec le plugin plxMiniTchat qui génére un message d'erreur toutes les 2 secondes environ !

Ok !
Normalement le message d'erreur généré avec le plxMiniTchat devrait être résolu. Avec Safari je n'ai plus de message d'erreur.
Tu utilises quel navigateur ?
As-tu toujours le message d'erreur ?

Merci

bazooka07

Les messages d'erreurs sont toujours présents.
Visibles dans Firefox en utilisant les outils de développement ( touche F12)