Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

17.11.2009

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 :

Lire la suite

18.09.2009

Proposez une navigation entre les éléments de colonne

Depuis quelques temps, la colonne de droite de ce blog affiche quelques icones permettant un accès rapide à la plupart des éléments, tels que "Dernières notes". Je vous propose de voir quelles sont les bases de cette forme de mini-menu.

Chaque élément de colonne possède un identifiant propre que l'on peut retrouver dans le code Html de la page. Si vous utilisez l'un au moins des éléments standards, vous devriez retrouver dans le code de vos pages, l'un des identifiants suivants :
box-recentposts | box-recentcomments | box-categories | box-archives | box-populartags | box-search | box-aboutme | box-youremail | box-yourphoto | box-photoalbum | box-syndication

Si vous avez créé un élément de colonne personnalisé, ce dernier porte un identifiant aussi du type :
id="box-mybox1700243"

Il suffira d'ajouter à l'adresse du blog, un signe dièse, puis l'identifiant pour établir un accès direct à un élément comme ici : http://geemee.hautetfort.com/#box-recentposts, et puisqu'il s'agit d'un lien interne à la page, on peut se contenter de #box-recentposts (quand on insère un lien hypertexte avec l'éditeur de note  H&F).

Le mini-menu, ne fait rien d'autre que de pointer vers les éléments de colonne que j'ai choisi. Vous pouvez le vérifier vous-même dans le code Html. Celui que je vous propose ci-dessous est directement utilisable chez vous. Il ne peut fonctionner que pour les éléments standards, vous aurez à le personnaliser pour pointer vers des éléments personnalisés. Et puis de toutes façons, il vous faudra bien utiliser des images qui vous conviennent plutôt que les miennes.

Vous noterez, si faites moi plaisir, que le lien "À propos" pointe directement vers la page plutôt que d'aller vers l'élément de colonne.

Lire la suite