Albums Photos

« Participez, votez pour le "Very Nice Blog" | Page d'accueil | Personnaliser "Tags populaires" pour accéder à tous les tags dans la page "toutes les archives" »

17
nov

Installez un menu déroulant au bas de votre calendrier pour naviguer dans les archives
 

Depuis la généralisation des menus qui se déplient sur plusieurs niveaux, l'utilisation de menus déroulants à des fins de navigation s'est considérablement amenuie. Devant la difficulté d'installer vous-même des menus "dépliants", et devant les résultats très variables selon les navigateurs, je vous propose de retourner à ces bonnes vieilles "drop-down list". D'autant que l'on peut en profiter pour pallier la carence de navigation vers les mois précédents et suivants dans le calendrier des blogs Hautetfort. (Note initialement publiée le 4 octobre)

Comment créer un simple menu déroulant
Le principe est d'utiliser un code en javascript qui va afficher une liste. La sélection d'un libellé "passera" une adresse et déclenchera l'ouverture de la page visée. C'est basique, pas très joli, mais ça marche très bien. Habituellement, il est recommandé de placer le code principal du script dans l'en-tête <head>, puis les appels de paramètres dans le corps de la page. J'ai pu expérimenter le bon fonctionnement du code, malgré une intégration dans le corps seulement de la page.
Pour vous, c'est une bonne nouvelle, vous n'aurez qu'à créer un élément de colonne, sans avoir à modifier le <head> de tous les modèles de page pour insérer le script principal.

À titre d'exemple, vous trouverez un menu dans la colonne à ce niveau là, et en voici le code :


<!-- DEBUT DU SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT http://www.editeurjavascript.com -->
<script language="JavaScript">
function ChangeUrl(formulaire)
{
if (formulaire.ListeUrl.selectedIndex != 0)
{
location.href = formulaire.ListeUrl.options[formulaire.ListeUrl.selectedIndex].value;
}
else
{
alert('Veuillez choisir une destination.');
}
}
</script>
<!-- FIN DU SCRIPT -->
<!-- Début adptation du script à Hautetfort par Gee Mee -->
<FORM>
<SELECT NAME="ListeUrl" SIZE=1 onChange="ChangeUrl(this.form)">
<OPTION SELECTED VALUE="">- Sélectionnez votre destination -
<OPTION VALUE="/">Accueil
<OPTION VALUE="/archives/">Archives
<OPTION VALUE="/about.html">&Agrave; propos
</SELECT>
</FORM>
<!-- Fin adptation proposée par http://geemee.hautetfort.com -->
<!-- FIN DU SCRIPT --><noscript><a href="http://www.editeurjavascript.com/countus/">compteur live</a></noscript>

Pour l'utiliser sur votre blog Hautetfort.
 - Copiez le code ci-dessus.
- Dans l'administration, dans PRÉSENTATION, Contenu des colonnes, Ajouter un élément personnalisé, cliquez sur Ajouter le code HTML / Javascript
- Nommez l'élément "Menu-déroulant-simple" par exemple
- Collez le code copié ci-dessus dans la zone "Contenu de l'élément"
- N'affichez pas le nom, et centrez l'élément (paramètres par défaut).
- Enregistrez
- Ajoutez à une colonne
- Ajustez la position dans la hauteur de la colonne
- Enregistrez les modifications.

Ce menu fonctionnera chez vous parce que les adresses sont relatives, et sont communes à tous les blogs Hautetfort.

Comment personnaliser la liste de libellés, ainsi que les adresses ?
Examinons une ligne
<OPTION VALUE="/about.html">&Agrave; propos
on retouve une adresse entre les guillemets après VALUE, et un libellé après la balise
Nous pourrions tout aussi bien avoir
<OPTION VALUE="http://leblog.hautetfort.com">Le Blog Hautetfort

Ajoutez autant de lignes que vous le souhaitez, mais n'oubliez pas que la largeur du menu est commandée par le libellé le plus long.
Et puis c'est long, c'est fastidieux de tout faire sans se tromper.

On peut rendre le contenu de la liste dynamique
On pourrait faire afficher les titres des dernières notes, les derniers commentaires, les tags, les catégories... Mais avec cette contrainte de largeur, nous serions vite amenés à étrangler l'affichage, le suspendre haut et court.

Des libellés courts et réguliers, nous en avons avec les noms des archives, surtout si la période d'archivage est bien le mois. Et puis ce calendrier qui ne nous permet pas de choisir un mois précis ne mérite-t-il pas que nous lui fassions un sort ?

Un menu "archives" en bas du calendrier
 Voici un nouveau code à copier :

<!-- archives -->
<div align="center">
{literal}
<!-- DEBUT DU SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT http://www.editeurjavascript.com -->
<script language="JavaScript">
function ChangeUrl(formulaire)
{
if (formulaire.ListeUrl.selectedIndex != 0)
{
location.href = formulaire.ListeUrl.options[formulaire.ListeUrl.selectedIndex].value;
}
else
{
alert('Veuillez choisir une destination.');
}
}
</script>
<!-- FIN DU SCRIPT -->
{/literal}
<!-- Début adptation du script à Hautetfort par Gee Mee -->
<FORM>
<SELECT NAME="ListeUrl" onChange="ChangeUrl(this.form)">
<OPTION SELECTED VALUE=""> Archives
{archives assign="archive" archive_type="@archive_type@" date_format="@archive_type_format@" limit="10"}
<OPTION VALUE="{$archive.url}">{$archive.name}
{if $archive.last}<OPTION VALUE="/archives/#dates">Toutes...{/if}
{/archives}
</SELECT>
</FORM>
<!-- Fin adptation proposée par http://geemee.hautetfort.com -->
<!-- FIN DU SCRIPT --><noscript><a href="http://www.editeurjavascript.com/countus/">compteur live</a></noscript>
</div>
<!-- /archives -->

Cette fois-ci par contre, il faut passer en configuration avancée, et modifier un modèle de page, celui du "calendrier".
Je vous rappelle qu'il est préférable de faire une sauvegarde tout modèle avant de le modifier.
Vous collerez le code copié juste après la balise de fin de tableau </table>
Enregistrez, activez le calendrier standard dans le contenu des colonnes si ce n'est déjà fait, validez et enregistrez, retournez à votre blog, actualisez, c'est fait.
Vous pouvez modifier le nombre de mois affichés en intervenant sur la valeur de limit
Vous pouvez aussi modifier l'invite Archives et le dernier libellé Toutes...

Ce n'est peut-être pas très élégant, mais c'est utile non ?

[Mise à jour du 17/11]

Initialement la dernière ligne du menu déroulant pointait "seulement" vers la page "Toutes les archives". Je la fais dorénavant pointer vers la section des notes classées par période d'archivage (ici, par mois) grâce à l'ajoût de #dates

{if $archive.last}<OPTION VALUE="/archives/#dates">Toutes...{/if}

Pour comprendre comment faire, je vous recommande la lecture de Personnaliser "Tags populaires" pour accéder à tous les tags dans la page "toutes les archives". Si vous ne souhaitez pas modifier la page "Toutes les archives", le code ci-dessus est parfaitement utilisable en l'état. Appeler une "ancre" qui n'existe pas donne tout de même la page.

10:25 Ecrit par Gee Mee [?] | Lien permanent | Commentaires (10) | Courriel | Impression | Partage
Dans : Configuration avancée, Personnaliser son blog |  Tags : menu, menu déroulant, archives, calendrier, mois, précédent, suivant

Trackbacks

Voici l'URL pour faire un trackback sur cette note : http://geemee.hautetfort.com/trackback/2401498

Commentaires

Comme tout est clair ! J'ai tout compris ! Et en plus cela répond à une demande en commentaire de "en piste pour de nouvelles fonctionnalités", non ?
A ce rythme, H&F ne va pas être encouragé à faire ses propres développements !

Ecrit par : See Mee [?] | 05.10.2009 » Répondre

Fiat lux ? Eureka !
Soit dit entre nous, ce modeste blog s'est donné pour objectif d'améliorer la plateforme, t'en souvient-il ?-)

En lien sur mon pseudo, la dernière demande d'amélioration du calendrier.

Ecrit par : Gee Mee [?] | 05.10.2009

Et pis c'est bien parce qu'en prime on apprend le latin...

Ecrit par : See Mee [?] | 05.10.2009 » Répondre

Eureka, c'est du latin d'Athénien ;-) Faut pas lire trop vite...

Ecrit par : Gee Mee [?] | 05.10.2009

Honte à moi ! Dire que j'ai fait grec au collège et lettrées à la fac (#shame) …

Ecrit par : See Mee [?] | 05.10.2009 » Répondre

Tu as fait "lettrées" à la fac ? C'était en compta ou en saphisme ?

Ecrit par : Gee Mee [?] | 05.10.2009

Re-shame !
Faut dire que je fais partie de ces vilaines qui suivent leur compte Gmail au boulot et au boulot ne résistent pas au plaisir de commenter vitre fait (mais vraiment très vite fait) les blogs de leurs amis... qui eux-même suivent les commentaires de leur billets au lieu de bosser !
Pour te répondre, si je dois vraiment choisir, sache que j'exècre la compta.

Ecrit par : See Mee [?] | 05.10.2009 » Répondre

Je crois que nous n'avons pas besoin d'en savoir plus ;-)
Cela ne nous regarde pas.
Ces histoires de courrier perso au bureau...

Ecrit par : Gee Mee [?] | 05.10.2009

Est-ce qu'il existe un moyen de réduire la taille du menu déroulant?

Ecrit par : Sacha [?] | 30.10.2009 » Répondre

Bonjour Sacha. La taille du menu déroulant est d'abord commandée par la longueur du texte, et le plus simple est encore d'adopter des libellés courts. Je vous l'accorde, cela peut amener à des césures sauvages.
La mise en forme des formulaires est un sport de combat réservé aux initiés (dont je ne suis pas).
Nous explorerons cependant d'autres possibilités à l'avenir.

Ecrit par : Gee Mee (supporter du FC Trincamps) [?] | 31.10.2009 » Répondre

Ecrire un commentaire

 
Copyleft. Gee Mee s'est inspiré du thème Aspire développé par InfoCreek pour WordPress