Onglets défilants en CSS/HTML/JavaScript

Bonjour,

Je cherche à faire en CSS/HTML/JavaScript une barre d'onglets qui défilerait, exactement comme dans IE7 ou Firefox quand on ouvre une tonne d'onglets : vu que tous les onglets ne peuvent pas être affichés en même temps, on a des petites flèches à droite et à gauche de l'écran pour faire défiler les onglets qui ne sont pas affichés à l'écran.

Une jolie image valant mieux qu'un long discours, voir la pièce jointe :mrgreen:

Si vous savez comment faire ça, je suis preneur. Merci !

EDIT : j'ai fini par trouver un exemple, mais si vous avez quelque chose de plus simple, je suis preneur, car la liste des onglets doit être construite par PHP.

Citation:

---

Envoyé par _Mac_

La liste des onglets doit être construite par PHP.

---

Qu'y a-t'il de contraignant à le faire en Php ?
Le rendu de l'exemple que tu donne est pourtant satisfaisant... :aie:

Citation:

---

Envoyé par HiRoN

Qu'y a-t'il de contraignant à le faire en Php ?

---

La flemme :mrgreen: C'est juste que je ne n'ai pas besoin de tout ce que ça fait, je sens le truc un peu lourd à bricoler, avec un design pas forcément idéal par rapport à mon site :aie: C'est du pur préjugé !

Bonjour,
j'ai du mal à croire que si tu déplaces ton sujet vers la rubrique javascript, 2 ou 3 contributeurs ne se feront pas un plaisir de relever le défi :mouarf:
Sinon, dans l'esprit, je pense que le code devrait être du style :

• On teste le nombre d'onglets, donc la largeur de la div
• Si la largeur nécessaire est supérieure à celle de la div contenante, on insère les flèches et on met un overflow-x à hidden
• Au click sur les flèches, on fait un scrollto vers l'id de l'onglet suivant/précédent

En tout cas, ça me semble difficilement réalisable en CSS...

Ouais, je sais, le sujet est connexe JavaScript et CSS mais comme les onglets c'est souvent du ressort de CSS, j'ai mis le sujet dans ce forum.

J'ai commencé à regarder le truc que j'ai trouvé : ça devrait le faire en PHP car il y a moyen de dire de trouver le contenu (mais pas le titre a priori) dans des div, et vu que mon PHP actuel construit déjà ces div, ça ne devrait pas être trop compliqué pour adapté.

Citation:

---

Je cherche à faire en CSS/HTML/JavaScript une barre d'onglets qui défilerait, exactement comme dans IE7 ou Firefox quand on ouvre une tonne d'onglets

---

je vais voir si je peux rajouter cette fonctionnalité dans ce script :
http://www.developpez.net/forums/d58...-menu-onglets/

Il est vrai que dans l'exemple que j'ai posté, s'il y beaucoup d'onglets, ceux-ci "s'empilent" :D Je n'ai pas prévu de défilement.


Si je peux faire quelque chose je l'ajouterai dans les contributions ;)

Finalement, je me suis résolu à faire mon propre système car celui que j'ai trouvé est vraiment très lourd (500 ko de JavaScript à télécharger ou un truc du genre, je trouve ça limite) et difficilement personnalisable. Je vous mets mon truc en pièce jointe, ça peut passer en contribution, je pense. Je l'ai testé avec FF2 et IE 6.

J'ai modifié le code de mon menu à onglets :
http://www.developpez.net/forums/d58...s/#post3727896

à tester ;)

_Mac_ ton script n'est pas mal ;)
Seule remarque : tu as un div en position:relative et je crains que ça ne passe pas avec certaines versions de IE :? (avec IE 7 pas de souci).

Citation:

---

Envoyé par Auteur

Seule remarque : tu as un div en position:relative et je crains que ça ne passe pas avec certaines versions de IE :? (avec IE 7 pas de souci).

---

Si je ne le mets pas, mon script ne marche pas avec Firefox :aie: Pourquoi ça ne passerait pas avec certaines versions d'IE ?

Je sais que dans certains cas le position:relative donne parfois de mauvais résultats sous IE. Maintenant, pourquoi ça ne passe pas, je ne sais pas :oops: le doctype doit avoir son rôle...


[edit]
Tu peux proposer ton script dans le forum contribution de Javascript ;)
[/edit]