créer barre verticale flottante sur la gaucheRésolu/Fermé

Question

Bonjour,
je souhaite créer une barre verticale flottante sur la gauche de ma page web avec des flèches de navigation haut, bas, page précédente, etc...comme sur ce site https://www.immortelleegypte.com/

quelqu'un aurait il un code javascript correspondant à ça?

merci d'avance
didier

KorriganVehuiah · Accepted Answer

La meilleure manière d'apprendre le xHTML/CSS, c'est d'aller sur le site du zero ;) En gros pour un menu du genre, tu as besoin de plusieurs éléments : Plusieurs icones de même taille qui vont servir de boutons, une div pour les assembler tous, des liens à mettre dessus. Tes images devraient faire 50x50px environs. Imaginons que tu aies 3 liens à faire : un pour retourner en haut de page, un pour aller en bas de page et un pour revenir à l'accueil (les bounton pg préc et pg suiv me semblent faire double emploi avec ceux du navigateur...). Tu auras besoin, en plus de tes boutons de créer des ancres nommées en haut de page et en bas de page. Il s'agit d'un id que tu vas placer sur la première balise en haut de page et sur la dernière en bas de page. Je vais ici les mettre sur des

vides, mais ce n'est pas à faire "en vrai".

Le CSS donnera un truc du genre : #menu { width: 50px; height: 150px; position: fixed center left; } .menu_item { display: block; } a { text-decoration: none; border: none; } Voilà, évidemment à modifier largement selon tes besoins. N'hésite pas à aller jeter un oeil sur le site du zéro pour mieux comprendre le code et apprendre à le faire toi même ;) Bonne journée, et n'hésite pas à poser tes questions si besoin !

KorriganVehuiah · Answer

Salut !

Pourquoi faire ça en JavaScript quand on peut le faire en pur CSS ?

Il suffit de créer ta barre d'icônes et de mettre en {position: fixed center left;} ;)

Fais tout de même attention à ne pas baser l'ensemble de ta navigation là-dessus. C'est pratique pour accélérer la navigation, mais ça risque de perdre un peu les internautes les moins aguerris...

didier6526 · Answer

salut
n'aurais tu pas un code un peu plus détaillé quelque part.
je ne suis pas le pro du css et de l'html
je commence à savoir modifier des scripts mais je n'en suis pas encore à les créer de toutes pièces

merci
didier

KorriganVehuiah · Answer

1) je n'ai pas de class menu_item et ça marche quand même, que dois je modifier?

Si ça marche, ne touche plus à rien ;)

2) j'ai essayé position fixed center left; ça me met les boutons en haut et ça ne fait plus une position bloquée sur l'écran, c'est pas grave, ça marche en spécifiant la position en pixels à gauche de l'écran

Idem, si ça marche, ne change rien...

3) j'ai lu que la position fixed ne marchait pas sous IE6, que se passe-t-il pour ceux qui ont IE6?

N'oublie pas que Google est ton ami ;) En y entrant "position fixed IE6" on peut trouver ceci : http://www.ab-d.fr/date/2008-02-11/

N'hésite pas si tu as d'autres questions !

didier6526 · Answer

salut encore à propos de class menu_item ça marche sans que je déclare cette classe dans le css mais ça ne marche pas si je ne l'appelle pas dans le code de l'image. peux tu m'expliquer? si cela fait appel à du css de guppy ça risque de ne plus marcher un jour si le css est modifié lors d'une mise à jour. j'aimerais bien que cela fasse appel à une classe que je définis moi même j'ai rajouté du code pour empêcher le plantage sous IE6. est tu équipé pour me dire si ça marche avec IE6? mon site d'essais: http://chazaldidier.free.fr/index.php?lng=fr mon code dans le mon code dans le !-- Début essai barre à gauche -->

faut il modifier quelque chose? merci et A+ didier

KorriganVehuiah · Answer

J'ai Multiple IEs sur mon PC au boulot. Je te dirai ça demain...

didier6526 · Answer

salut
je viens de tester mon code sur opera
problème: les 2 boutons sons superposés
il semble qu'il ne reconnaisse pas le vspace que j'ai mis dans le bouton du bas.
comment faire pour que les 2 boutons soient l'un au dessus de l'autre en n'ayant qu'une seule classe fixed pour les 2?

merci
didier

KorriganVehuiah · Answer

Tu les rassemble dans une

sur laquelle tu appliques la position: fixed ;)

didier6526 · Answer

salut peux tu préciser? ils sont déja dans un div en position fixed

A+ didier

KorriganVehuiah · Answer

Atta, j'étais pas réveillé hier ou quoi ? C'est quoi cet attribut vspace ?!?

didier6526 · Answer

vspace = vertical space 
c'est ce qui m'a permis de mettre un espace vertical entre les 2 boutons.
si je ne le mets pas ils sont superposés
j'ai trouvé ça sur un tutoriel html et ça marche nickel avec firefox

comment il faut faire?
2 div dans un div????
A+
didier

KorriganVehuiah · Answer

Plutôt que ce vspace, mets un attribut css margin-top. Essaie de supprimer le position: fixed sur les boutons, ce n'est pas utile. Il est déjà sur ta

... et puis dis-moi ce que ça donne.

didier6526 · Answer

salut si je mets un margin-left comme ci dessous ça m'écarte les 2 flèches qui restent sur la même ligne

si je mets un margin-top comme ci dessous ça me descend les 2 flèches vers le bas et elles restent sur la même ligne !-- Début essai barre à gauche -->

je n'arrive pas à en descendre l'une en dessous de l'autre A+ didier

KorriganVehuiah · Answer

As-tu mis

#menu_item {
display: block;
}

Dans ton css ?

didier6526 · Answer

je l'ai rajouté ça faisait plusieurs messages où je me demandais où était définie cette classe. mais ça ne change rien, je pense que je ne dois pas mettre mon margin-top:200px au bon endroit. mon css: #fixed { position: fixed; top:50%; z-index : 200; } #menu_item { display: block; } mon code:

A+ didier

KorriganVehuiah · Answer

Ca me semble correct mais je peux louper un truc. Je testerai le code tout à l'heure. Je te dis quoi...

didier6526 · Answer

salut
ce n'est pas un problème d'interférence avec guppy

j'ai testé sur ma page index.html  (en de hors de guppy)
j'obtiens les mêmes icones côte à côte

A+
didier

didier6526 · Answer

salut. pour faire avancer le schmilblik je viens d'essayer ça: 2 div l'un au dessus de l'autre avec 2 class fixed haut et bas. ça marche sous firefox par contre sous IE les 2 flèches sont l'une au dessus de l'autre en haut au centre de l'écran >

merci A+ didier

KorriganVehuiah · Answer

Salut didier, rassures-toi je ne t'oublie pas mais j'ai moi-même des petits problèmes de PC donc forcément moins dispo...

didier6526 · Answer

merci de ne pas m'oublier

si tu veux que j'essaie un code sur ma page donne le moi,
à force d'essayer plein de trucs je ne sais plus trop ce qui marche à moitié et ce qui ne marche pas

encore merci
A+
didier

didier6526 · Answer

salut
j'ai trouvé ça sur un site et je l'ai mis en ligne sur mon site

http://chazaldidier.free.fr/essai_div_fixed.html

tape le code de la ligne car le lien direct n'a pas l'air de marcher
est ce que ça peut faire avancer les choses?
A+
didier

didier6526 · Answer

salut encore moi j'ai un code en CSS pur qui a l'air de marcher avec FF3 et IE7 sur http://mycomenius.free.fr/index.php?lng=fr // echo ""; ?>

mais je ne sais pas ce que ça donne avec IE6 faudra-t-il ajouter une condition IF IE6 etc..... pour éviter un bug sous IE6 merci et A+ didier

didier6526 · Answer

salut

je pense avoir la solution complète qui marche sous FF3   IE5.5  IE6  IE7  Opéra  et Safari.
un commentaire conditionnel pour les différentes versions et un petit bout de javascript pour les versions inférieures ou égales à IE7.

J'ai fait un Tutoriel pour ceux que ça intéresse sur mon site.
.
 http://mycomenius.free.fr/index.php?lng=fr

dans la rubrique Tutoriels guppy.

merci à tous de bien vouloir vérifier que mes flèches marchent bien avec ces différents navigateurs pour que je puisse éventuellement corriger mon tuto.

Et un merci particulier à Icare sur freeguppy et KorriganVehuiah sur Comment ça marche.
A+
didier

Créer barre verticale flottante sur la gauche

23 réponses

Discussions similaires

Newsletters