Tutoriel - Barre de navigation flottante
Cette barre flottante avec boutons, permet une navigation plus rapide, car toujours visible en bas de l'écran à gauche.
Testée sur IE7, Firefox et Safari.
Mai 2009 :
Mise en ligne du générateur de barre flottante à voir également.
Janvier 2011 : 
Une nouvelle méthode est mise en ligne, lien à voir, ainsi vous avez le choix.
Navigation par Menu Flottant
Installation d'une barre de boutons, utilisée actuellement pour la navigation, mais d'autres applications sont réalisables selon vos besoins.
Création de la barre
Disposition des boutons, à l'aide d'un tableau, possibilité de 2 dispositions :
Horizontale...
| Verticale...
|
Création de la barre HORIZONTALE
Pour faciliter les modifications, j'ai créé des règles de style. Ces règles gèrent la position de la barre, avec les valeurs des attributs "left" et "bottom", pour la position "fixed", la barre restera en bas à gauche de l'écran.
J'ai mis un attribut non utilisé dans DizPerso, pour que cette barre soit dans un calque supérieur toujours visible : z-index:110
Les 2 autres attributs permettent de modifier la couleur de fond de la barre "background" ainsi que les bordures.
.barreflottante... règle contenant les attributs de la barre
position:fixed... gèle de la barre au-dessus de la page qui défile
left:5px... à gauche de l'écran, modifier selon la position souhatée
bottom:5px... en bas de l'écran, modifier selon la position souhatée
z-index:110... calque supérieur pouvant être augmenté si nécessaire
background:#000000... couleur du fond de la barre en cas d'espacement entre les boutons
border: 1px solid #000000... épaisseur style couleur
La deuxième règle gère l'aspect des boutons, c'est à dire leur taille et les bordures. Mais il est évidemment possible de rajouter des attributs qui se répercuteront sur l'ensemble des boutons.
Naturellement vous avez toujours la possibilité de mettre un style différent à chacun des boutons dans la balise HTML... TD contenant le bouton.
.boutonsbarre... règle contenant les attributs des boutons
width:32px... largeur
height:32px... hauteur
border:2px outset #CCCCFF... épaisseur style couleur
La partie HTML est un tableau, d'une seule ligne et 6 colonnes, pour les 6 cellules représentant les boutons.
<table>... début de la table class="barreflottante" ... pour utiliser le style
<tr>... début de ligne
<td>... début première cellule (contenant le bouton image ou texte)
align="middle"... pour centrer le contenu dans la cellule
class="boutonsbarre"... pour utiliser le style .boutonsbarre du CSS
Premier bouton pour revenir à l'Accueil
<A... début lien
href="http://*** nom blog ***.blog4ever.com/blog/index-***numéro index blog***.html"
target="_self"... pour ouvrir dans la même fenêtre
title="Retour page Accueil">... texte visible au survol du lien
<img... début image
src="http:// *** adresse de l'image sur Internet*** "
border="0"... pour éviter les bordures de l'image, les bordures cellules suffisent
/>... fin image
</A>... fin du lien
</td>... fin première cellule
Idem pour chaque cellule (bouton), sauf lien et image...
Deuxième bouton
<A href="javascript:history.back()"
target="_self"... pour ouvrir dans la même fenêtre
title="Page précédente">... texte visible au survol du lien
<img... début image
src="http:// *** adresse de l'image sur Internet*** " />
</A>
Troisième bouton
<A href="#footer ou #bas"
target="_self"... pour ouvrir dans la même fenêtre
title="Bas de page">... texte visible au survol du lien
<img... début image
src="http:// *** adresse de l'image sur Internet*** " />
</A>
Quatrième bouton
<A href="#head ou #haut"
target="_self"... pour ouvrir dans la même fenêtre
title="Haut de page">... texte visible au survol du lien
<img... début image
src="http:// *** adresse de l'image sur Internet*** " />
</A>
Cinquième bouton
<A href="javascript:history.forward()"
target="_self"... pour ouvrir dans la même fenêtre
title="Page suivante">... texte visible au survol du lien
<img... début image
src="http:// *** adresse de l'image sur Internet*** " />
</A>
Sixième bouton pour contacter le webmaster
<A href="http://*** nom blog ***.blog4ever.com/blog/contacter-***numéro index blog***.html"
target="_self"... pour ouvrir dans la même fenêtre
title="Envoyer un mail au webmaster">... texte visible au survol du lien
<img... début image
src="http:// *** adresse de l'image sur Internet*** " />
</A>
</tr>... fin de ligne
</table>... fin table
Comme exemple concret ma barre de navigation, sera certainement modifiée par la suite, en fonction de mes recherches ou des nouveautés dans Blog4ever...
Création de la barre VERTICALE
Pour le CSS seul les valeurs attributs "right" et "bottom", pour la position "fixed", la barre restera en bas à droite de l'écran.
Tableau d'une seule colonne et 6 lignes, pour les 6 cellules représentant les boutons. Voir les détails dans création de barre horizontale.
Javascript...Pour les versions gratuites j'ai testé, le javascript à première vue ne crée pas de souci.
Installation en version payante
Mettre le code CSS et HTML dans la bordure gauche/droite, que vous soyez sous DizPerso ou un modèle graphique.
Les modifications à faire sont les liens, dans mon exemple sur BRIC A BRAC, pour aller en bas de page c'est #footer et en haut c'est #head, sous DizPerso mettre réciproquement #bas et #haut
Pour ceux qui sont sous un modèle graphique, bien regarder dans le fichier CSS, le nom des parties basse et haute de vos pages.
Vous pouvez également mettre les 2 règles dans votre fichier CSS du modèle, ainsi vous gagnerez un peu de place et surtout de la clarté dans la bordure. Le tableau HTML restera toujours dans la bordure.
Installation en version gratuite
Sans la possibilité de se servir des bordures, il faut mettre le code en début de chaque article, si un besoin réel existe, ou le mettre que dans certains articles.
Le système peu servir pour des articles longs ou sujet à épisodes, pour organiser la navigation en mettant les liens des articles dans l'ordre d'une visite logique.
Pour pesonnaliser votre barre, changez les images des boutons, la couleur et les bordures. Vous pouvez également mettre les liens qui vous conviennent mieux et ajouter ou supprimer des boutons. Vos modifications devront être effectuées selon leur nature dans le CSS ou le tableau HTML.
Les liens à modifier...
