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 | 3675 vues

Partager


Commentaires


hardware
site/blog
le 06-08-2008 à 12:28:22
Cette barre est vraiment utilise pour la navigation, ça évite de mettre des ancres partout dans ses articles et c'est plus plaisant pour l'utilisateur.

Je voit que ton blog est compatible avec Firefox, c'est une bonne chose car pas mal de monde l'a rejoint, mais la grande majorité des personnes sont sur IE 7.

Moi les normes W3C (The world wide web consortium) m'ont aidé pour êtres compatible avec presque tout les navigateur.

J'ai validé le CSS (jigsaw.w3.org/css-validator/), j'avais 23 erreurs !
Mais pas le HTML (validator.w3.org), les normes du XHTML 1.0 sont très strict peu de sites ont cette norme.

Il faut le CSS valide pour être affiché correctement sur presque tout les navigateurs

Bon @+ et encore une fois, c'est une très bonne idée d'avoir installé cette barre !

************************************************
Hardware
site/blog
le 06-08-2008 à 13:29:16
Quelques jours avant que tu fasse ton tuto, j'avais remarqué ta barre de navigation, j'était justement en train de chercher comment placé une barre sur mon blog pour mettre les différentes traductions de mon blog, j'ai regardé un peu le code de ta barre flottante et après je l'ai arrangé à ma sauce

Bon en tout cas ça m'a été très utile, et j'essayerais de faire d'autres choses...

@+
PapyClic
site/blog
06-08-2008 à 14:31:17
Salut Hardware
Merci pour tes commentaires et appréciations sur mon travail. Avant de faire mon tuto, je testais cet outil avec les principaux navigateurs, malheureusement sur ie6 je pense que cette barre va se retrouver en bas de page, ce qui diminue énormément son utilisation et lui fait perdre sa raison d'être... dommage!!!
J'irai voir ce que tu as créé pour les différentes traductions de ton blog. Actuellement je me focalise sur la création d'un menu secondaire et le placement de divers objets à l'opposé du menu créé par le système Blog4ever, pour toi ce sera la bordure gauche, mais son utilisation est possible qu'en version Silver ou Gold.
Donc à bientôt...
Bon AM
Hiroku
le 10-08-2008 à 11:03:13
Salut Papyclic, encore une nouveauté super pratique de ta part, cette barre est génial !!
Elle est pratique à la fois pour le webmaster et le visiteur c'est parfait !
Merci de tes longues recherches et a+ !
PapyClic
site/blog
10-08-2008 à 17:20:58
Salut Hiroku merci pour ton commentaire... tu vois je t'avais dit de patienter pour la petite flèche qui t'intéressait dans DizTest, c'est encore mieux et comme tu le précises, utile à tous.
Bon AM à plus...
Istina
site/blog
le 10-08-2008 à 19:36:55
Bonjour à tous, bonjour Papyclic,

J'ai une petite question, je pourrais tout autant tester mais je la pose quand même ;-) :
Quand on a mis un module de traduction, est-ce que le fait d'utiliser la barre de navigation flottante ne risque pas de faire revenir au français alors qu'on voulait naviguer dans une autre langue ?

Je demande ça car quand je suis allée sur le blog 'Hardware' j'ai choisi de visiter le blog en russe, et dans la partie forum, en cliquant sur 'page suivante', je me suis retrouvée sur la page suivante en français.

Sur Hardware ce n'est pas cette barre flottante bien sûr, mais il est possible que le résultat soit le même.

Ou cela vient-il simplement du module de traduction mis sur Hardware ? (très joli module d'ailleurs, discret, qui me fait reconsidérer le mien au niveau esthétique...)

Je vais mettre un commentaire au sujet du menu supplémentaire de droite aussi.

Douce soirée,

Istina
Istina
site/blog
le 10-08-2008 à 23:07:07
Coucou² Papyclic,
J'ai mis la barre de navigation verticale dans un article d'un blog en version gratuite.

Première chose, ça marche très bien et le JS ne fait rien planter, je le confirme.-Ce blog a le modèle 8 (dominante bleu très clair et une feuille jaune dans les menus) et je l'ai un peu arrangé à mon goût-

Deuxième chose, la barre de navigation apparaît à droite avec Mozilla et à gauche avec ie7, en ayant mis 'right' dans le css.

Ceci n'est pas très important si on a une marge suffisante sans texte de chaque côté du conteneur, ce qui n'est pas le cas de mon blog puisque j'avais choisi de beaucoup l'élargir.
Donc, je dois diminuer la largeur du conteneur ou faire une mini barre en la gardant la plus lisible possible, car pas possible de décaler le conteneur au risque de devoir choisir entre Mozilla et ie7.

Une petite troisième chose, il ne faut pas mettre de gifs avec fond transparent sinon l'attribut couleur donné aux liens de la page fait apparaître un surlignement inesthétique des images. La solution est de choisir un fond d'image de couleur identique à celle du surlignement des liens, et de ne pas changer cette couleur de surlignement dans le css pour les liens au survol.
Ha là, je ne sais pas si je suis claire ;o))

Voilà, tout fonctionne tip top, les détails que j'ai relevés ne sont que question de choix du graphisme et de son bricolage et d'esthétique, et c'est donc chacun qui voit.
Je vais corriger ça sur ce blog en version gratuite.

Et je passerai sur les autres blogs ensuite mais auparavant je dois refaire des images avec des fonds de couleurs ad hoc.

Douce soirée

Istina


PapyClic
site/blog
10-08-2008 à 23:12:22
Bonsoir Istina
C'est une colle, car je l'ignore totalement, n'ayant pas de module de traduction je ne peux pas tester.

Par contre j'ai testé sur Harware, le système avec le navigateur fonctionne dans les pages on reste sur la traduction. Donc comme ma barre utilise la même fonction, il ne devrait y avoir de problème. Je n'ai pas testé le forum ?

En effet elle est sympa sa barre de traduction, discrète et bien complète, je vais voir pour BRICABRAC, il y a un moment que j'y pense, même pour DizTest. Mais je placerai ce module dans ma colonne de droite, pas flottant.

Merci Pour tes coms Istina et très bonne soirée.

PapyClic
site/blog
10-08-2008 à 23:34:15
re coucou Istina on se croise...
C'est super d'avoir essayé, en verticale, en tous les cas je suis très content que le système fonctionne. Les petits soucis que nous rencontrerons seront minimes et ce sera à chacun de s'adapter au système en choisissant des images ou des couleurs, l'essentiel est l'utilité d'avoir en permanence cet outil de navigation, qui permet également de passer d'un blog à un autre rapidement.

D'autres applications avec ce système viendront naturellement, je pense à ceux qui écrivent des textes très longs, ou en épisode, en mettant dans cette barre des liens pour aller de page en page.

Je pense aussi à un test à faire avec un blog d'une largeur plus petite que l'écran, en vertical la barre doit se positionner en dehors du blog, ou mettre un margin-left négatif.

Il y a encore à faire je crois, c'est motivant.

A plus Istina
Amicalement
PapyClic
site/blog
10-08-2008 à 23:43:52
J'ai oublié pour la position right:5px, si problème... mettre left:960px par exemple, à voir!!!
Istina
site/blog
le 11-08-2008 à 00:18:11
Encore moi,
J'avais un souci avec le retour en haut de page, mais le modèle n°8 nomme le heut 'header' et non 'head', tout va bien maintenant.

Pour la position, je vais de ce pas faire ce que tu indiques, en attendant pour visualiser ce que j'écrivais tout à l'heure, voici l'adresse (on ne peut la mettre entièrement dans un commentaire) vers ce blog et l'article précisément où j'ai mis la barre de navigation verticale, je ferai les modifications d'aspect plus tard :

lesditsdepestina.blog4ever.com/blog/lirarticle-215781-892464.html

Belle nuit
Istina
PapyClic
site/blog
11-08-2008 à 01:49:50
re Istina

haut, head, header ...
Oui c'est le problème tous les modèles graphiques ne sont pas compatibles, c'est pour cette raison que j'ai fait dans Diztest, les articles sur les changements de peau "Skin bleu" et "Skin vert". Faire une série de modèles avec le DizPerso serait super génial et ajouter à ça un CSS "baseplus" lié aux blogs dans la bordure gauche/droite... fantastique Blog4ever!!!

J'ai vu ton essai c'est bien en vertical, le souci d'image sélectionnée, c'est pas très joli mais cette barre est surtout un outil.
Pour un design parfait, je pense qu'il faut peut-être créer les règles suivantes....

.boutonsbarre a
{
background: #xxxxxx;
}
.boutonsbarre a:hover
{
background: #zzzzzz;
}

Il faut cogiter... la nuit et... le matin la solution est là... humm!!!

Bonne nuit Istina




Istina
site/blog
le 18-08-2008 à 19:27:59
Bonjour Papyclic,
Merci pour les commentaires ajoutés au lien ;-)

Alors voilà, j'ai changé mon module de traduction, plus de menu déroulant, donc plus de js pour ça, j'ai utilisé une table comme pour la barre flottante et j'ai testé plusieurs fois ta barre de navigation flottante, aller vers la page suivante ou précédente ne pose pas de souci, on reste bien sur la traduction choisie.

Douce soirée
Bisous
Istina
PapyClic
site/blog
18-08-2008 à 20:09:59
Super Istina, merci de donner suite à tes essais, je crois que le système de cette barre, est un plus qui permet une bonne navigation et toujours à disposition pour le visiteur, surtout en plein écran mais également pour le blogmaster avec ajout de bontons pour aller d'un blog à un autre.

Bonne soirée à toi
kssoussss
PapyClic
Françoise
site/blog
le 29-08-2008 à 23:00:55
Bonsoir PapyClic,

Décidément, tes blogs sont de vraies mines d'or : tu arrives toujours à nous dégoter des nouveautés inattendues !

Merci encore de nous faire partager tes recherches.

Bises et bonne nuit.
Fanfan
sandrine
site/blog
le 05-09-2008 à 09:50:39
Bonjour papyclic

Je voudrais te remercier de ton aide précieuse pour ma barre flottante sur mon blog de la pétanque ainsi que sur l'autre qui a été un peu plus long à mettre car il a fallu que je mette le code dans toutes mes pages(version gratuite).
ENCORE UN GRAND MERCI .
Bisous .Sandrine
leptimondedesofiane
site/blog
le 07-09-2008 à 00:47:57
Bonsoir Papyclic,

La barre de navigation est une excellente idée.
Merci encore pour ce tuto.
A bienôt
Bisous Nathalie
Istina
site/blog
29-09-2008 à 16:16:48
Bonjour Papyclic
Je vois que ça avance pour ta barre de navigation, avec ce fond transparent légèrement plus foncé et en accord avec les menus, c'est très bien, et pas mal le petit ordi au milieu !

Doux après-midi ensoleillé

Istina
Istina
site/blog
30-09-2008 à 09:06:34
Coucou Papyclic,
Je viens de tester l'affichage en grand de l'écran en cliquant sur le petit ordinateur dans ta barre de navigation, ça fonctionne parfaitement, avec retour en écran classique avec alt+f4, pas de souci, c'est très agréable car permet une visibilité optimale. J'ai Mozilla en ce moment, j'essayerai plus tard avec ie7 et Safari, mais ça doit être pareil je pense.
Ceci m'intéresse donc.

Je ne sais pas ce que tu nous réserves encore dans ton blog, mais il est superbe, le 'design' comme certains disent, est réussi, en tous cas à mon goût (et pourtant je suis difficile, très difficile...)

Belle journée ensoleillée

Bises
Istina
william
site/blog
le 06-01-2009 à 10:58:50
Salut Papyclic, encore une nouveauté pour moi trés pratique de ta part, cette barre est super genial!!
je l'ai decouverte que ce matin
Merci pour tes longues recherches et bonne journée à toi!
Khawla
site/blog
le 03-05-2009 à 16:00:00
Bonjour PapyClic,
Ton blog est vraiment super!
je pourais utiliser le code Javascript sans aucun risque? Et ne me dit pas que si je veux mettre les images verticales à droite rattaché avec la page je dois être en version payante!
Merci de me répondre.
Khawla.
PapyClic
site/blog
03-05-2009 à 18:18:38
Bonjour Khawla

Pour la barre flottante pas de problème avec le Javascript, je le dit plus haut et sur DizTest (version gratuite), j'ai bien mis une barre flottante, le seul souci c'est qu'il faut mettre le code dans chaque article.
Dans d'autres cas le composeur plante avec le Javascript, tu peux toujours essayer sur un article test pour voir si ça plante et après tu le supprimes.

Bonne continuation
Khawla
site/blog
le 03-05-2009 à 19:46:42
Merci PapyClic, je vais éssayer.
Merci beaucoup.
Turbosonyc
site/blog
le 13-06-2010 à 20:15:38
Tu pourrais faire un tuto pour faire une barre flottante, comme sur le site EA GAME ?
PapyClic
site/blog
13-06-2010 à 21:20:39
Bonsoir Turbosonyc
Je veux bien donnes moi l'adresse où je peux la voir.

@++
Turbosonyc
site/blog
le 13-06-2010 à 23:19:33
Voilà www.electronicarts.fr/
@+

Merci
PapyClic
site/blog
13-06-2010 à 23:36:47
Turbosonyc
Je ne vois de barre flottante sur cette page ???
Un bas de page fixe, c'est tout... pas une barre de navigation que l'on peut placer, en haut ou en bas, à gauche ou à droite, horizontalement ou verticalement.
Désolé !!!

Turbosonyc
site/blog
le 16-06-2010 à 16:42:57
Ba si, moi je la vois ! Voilà un screen : www.mediasonyc.com/Upload/images/snap20wdw.png
PapyClic
site/blog
16-06-2010 à 17:04:39
C'est une barre de bas de page...
Dans BLOG4EVER c'est le bas de page qui peu être utilisé pour ça. Chaque blogmaster peut le faire en version payante, voir mon tutoriel pour organiser le bas de page :
bricabrac.blog4ever.com/blog/lirarticle-490-906395.html
En plus de ce qui est prévu par le système, les liens de bas de page.
Turbosonyc
site/blog
le 19-06-2010 à 10:55:04
J'aimerais savoir quelle est la position à mettre alors.
Merci :)
PapyClic
site/blog
19-06-2010 à 11:08:40
Bonjour
Pour qu'une barre reste en position bas d'écran, position fixed, left 0px et bottom 0px.
Bon WE
Turbosonyc
site/blog
le 19-06-2010 à 12:48:23
Merci !
Turbosonyc
site/blog
le 21-06-2010 à 17:58:31
Bonjour papy, voilà ma berre (clique sur :site/blog). J'aimerais centrer les "li" Mais j'y arrive pas.
Merci d'avance :)
PapyClic
site/blog
21-06-2010 à 22:40:30
Bonsoir
En réalité les liens(li) font 100px * 6 = 600px
Dans la règle #barre ul il faut ajouter width=600px et margin:auto;
J'aimerai connaître l'adresse de ton blog pour voir le résultat.
@+
Turbosonyc
le 22-06-2010 à 16:41:14
Dés que j'ai finit je te passe l'adresse :)
Turbosonyc
site/blog
le 22-06-2010 à 17:45:47
Voilà, j'ai finit ma barre, avant de la mettre en ligne j'aimerais savoir ton avis, c'est une barre qui ressemble à celle de mac. (voir site/blog)
PapyClic
site/blog
24-06-2010 à 23:48:49
Bonsoir
Super ta barre, en fin de compte rien à voir avec la barre EA Games que tu m'as présenté au début. Tu as mis des images, pas des textes, elles sont modernes, un bon look.
Cette barre est comme le menu "Barre" dans Blog4ever mais positionnée en bas selon le code que je t'ai fourni. Ce n'est pas comme ma barre flottante qui peut être positionnée de différentes façons, voir dans la liste de mes générateurs
bricabrac.blog4ever.com/blog/lirarticle-490-1285473.html.
Je propose une technique à chacun de mettre les images et les liens de son choix. Si tu navigues sur les sites/blogs de Blog4ever tu verras des barres flottantes qui s'intégrent au design selon le goût des webmasters.
Si tu as besoin de renseignements à l'avenir je préfère que tu passes sur mon forum ou celui de B4E, les commentaires n'ont pas pour but le style d'échanges que nous avons eu.
Merci pour tes visites et je crois que tu m'as donné l'idée de prévoir une barre de liens en bas de page.
Bonne continuation
Poster un commentaire
Merci de recopier le nombre de gauche dans la case ci-dessous (Pourquoi?)

Liens

Voir les articles de la catégorie " Blog4ever "
Imprimer cet article