Tutoriel - Barre de navigation flottante

 Barre Boutons 
 Barre Boutons 

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...

Code exemple ci-dessous... avec PDF lien


 

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.

Variante du code CSS et disposition tableau HTML... avec PDF lien



Informations Javascript...
Ce code contient 2 commandes en Javascript, pour page précédente et suivante, sans problème, je l'utilise en version payante dans la bordure gauche/droite...
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.

Code CSS et HTML voir les liens à modifier... avec PDF lien




Informations Les liens à modifier...
Faire bien attention à modifier les liens, #head ou #haut, #footer ou #bas, selon si vous êtes sous DizPerso ou Modèle graphique. Avec DizPerso il est possible que vous ayez besoin de mettre, l'adresse de la page devant #haut ou #bas, changer le lien de l'index de la page d'Accueil et de la page Contacter.

 


 





05/08/2008
37 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 142 autres membres