Menu déroulant, Javascript & CSS, Fonctionne sur un max de nav.

Recherche :

Mot : Pseudo : Filtrer
Page : 1 2 3 Page Suivante Page Précédente Bas de page
Auteur	Sujet : Menu déroulant, Javascript & CSS, Fonctionne sur un max de nav.

antp

Super Administrateur
Champion des excuses bidons

Reprise du message précédent :
http://www.brainjar.com/dhtml/menubar/demo.html

moi j'aime mieux ce menu-là

---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire

Publicité

greut

antp a écrit :

http://www.brainjar.com/dhtml/menubar/demo.html

moi j'aime mieux ce menu-là

+plus compatible

-navigation clavier impossible
-aucune navigation possible sans javascript ( -10% d'utilisateur )
-mauvaise sémantique ( des liens dans des divs )
-code monstreux

dans le genre il y a bcp mieux

http://www.gazingus.org/html/menuDropdown.html

:hello:

Message édité par greut le 30-08-2003 à 22:20:27

Flyman30

Freekill a écrit :

Tu arrives à aller sur l'élément 2 du menu 1 dans le menu vertical ? :heink: (par exemple)

Oui

greut

pour essayer de fixer le pb du chargement du fond on peut faire ainsi ( mais sans le zoom )

http://www.simplebits.com/tips/photo_zoom.html

Ptet que ca va résoudre l'autre pb du même coup

greut

Voilà qui est fait, j'ai utiliser la technique sur le menu horizontal.

http://www.magnin-sante.ch/journal [...] zontal.htm

tester pour voir si ça change quelque chose.

:hello:

Message édité par greut le 30-08-2003 à 22:48:17

Flyman30

greut a écrit :

Voilà qui est fait, j'ai utiliser la technique sur le menu horizontal.

http://www.magnin-sante.ch/journal [...] zontal.htm

tester pour voir si ça change quelque chose.

:hello:

Toujours ausi lent pour les images :sweat:

greut

Tu est sûre que tu a bien fait refresh ?

Flyman30

greut a écrit :

Tu est sûre que tu a bien fait refresh ?

Vider le cache, CTRL F5 et tout et tout

Message édité par Flyman30 le 30-08-2003 à 23:12:24

Flyman30

Par contre avec Mozilla 1.4 opéra 7 ça fonctionne rapidement

greut

et là ca donne quoi pour toi ?

http://www.simplebits.com/tips/photo_zoom.html

ca recharge aussi quand tu vas sur l'image ?

Publicité

Flyman30

greut a écrit :

et là ca donne quoi pour toi ?

http://www.simplebits.com/tips/photo_zoom.html

ca recharge aussi quand tu vas sur l'image ?

pratiquement instantané IE6 sp1+

greut

Code :

#menu a{
display:block;
width:150px;
...
background:url("menu.gif" ) no-repeat;
background-position: 0 0;
}
#menu a:hover{
background-position: -150px 0; /* move the image */
}

ça devrait pourtant marcher, l'image c'est la même. C'est ça la technique. Tu mets une image en fond puis tu la déplace avec le a:hover ...

Oups j'avais fait une petite bêtise avec le CSS, c'est réparé

Message édité par greut le 30-08-2003 à 23:25:43

MagicBuzz

IE 6 chez moi (6.0.3718.0) SP1 "fonctionne".
Le souci, c'est que les onglets apparaissent comme des tortues rumatissantes, et du coup c'est à la fois moche et inutilisable.

samuelp

C bizard, sous NS 7.1 c nickel (a part que je ne mettrai pas des formes arrondies autour des menus)

C compatible IE 5 et+, NS 6 et +, Opera 6 et + et Konqueror 3, c'est ça ?

Flyman30

MagicBuzz a écrit :

IE 6 chez moi (6.0.3718.0) SP1 "fonctionne".
Le souci, c'est que les onglets apparaissent comme des tortues rumatissantes, et du coup c'est à la fois moche et inutilisable.

C'est exactement ça sous IE6 ....

samuelp

Et cela peut venir d'ou ? De l'image en Background ?

Dommage quand meme car, meme si on connait beaucoup mieux en esthetisme, la clarte et la simplicite du code, et la facilite de l'integrer dans un projet Web en fait un menu interessant.

Faudrait peut etre contacter Microsoft pour qu'ils travaillent sur ce pb

Flyman30

samuelp a écrit :

Et cela peut venir d'ou ? De l'image en Background ?

Je le pense, car le texte s'affiche instantanément

Ce qui est bizarre c'est que le test de l'image qui s'agrandi fonctionne normalement :??:
http://www.simplebits.com/tips/photo_zoom.html

Message édité par Flyman30 le 31-08-2003 à 10:11:47

greut

:sweat:

C bizzare chez moi avec IE5 c tout bon ... si faut encore se taper des différences dans les versions majeurs de IE c'est lourd.

Il doit bien avoir un moyen d'y remédier ... je vais faire une recherche sur google.

Pour la correction de bug je crois que Microsoft a dit ne vouloir ne plus rien faire d'ici à 2005 ( Longhorn ), histoire d'avoir des arguments pour faire passer les gens à son nouveau système.

greut

Voilà j'ai retrouvé le lien par hasard
http://pascal.chevrel.free.fr/carn [...] chives.php

samuelp

greut a écrit :

Je vais essayer d'intégrer ton Menu dans mon projet (le menu que j'utilise actuellement est 100% JavaScript, lourd, ne fonctionne que sous Mozilla/Netscape et IE et provoque des bugs d'affichage au niveau des Images de Background et de certains elements HTML comme les Select)
Quelle est la licence de ton Menu ? (Mon projet est LGPL)

Je ne ferais pas de liens directs dans l'appli sauf que :
- Ton site sera clairement indiqué dans le code source
- Tu feras parti de la liste des contributeurs
- Un lien de ton site sera indiqué dans le About

Si cela te va, alors je pourrais l'utiliser (en esperant que tu me feras pas un proces à la SCO pour misappropriation de propriétés intellectuelles )

Sinon, pour le bug, j'en refererai a des specialistes de IE (je n'ai pas IE 6 sur mes machines ).

a+

greut

J'ai besoin de votre aide.

Moi j'ai pas la version bugé de IE6, chez moi ça fonctionne bien. J'ai besoin que vous fassiez quelques graillages avec les styles CSS. Du genre vous pouvez mettre les images de fond dans les li et voir ce que ça donne.

http://www.flexhtml.net/csstests/hover/a/

greut

Bha disons que mon menu est en GPL.

greut

je crois avoir trouvé quelque-chose qui pourrait aider

http://www.zeldman.com/daily/0203c.shtml#csspreload

samuelp

Ah oui, l'image de fond n'apparait pas sous Opera 6/Linux
Mais bon c pas trop grave ça

J'apporterai quelques modifications :
-> Un TimeOut de 500 ms pour faire disparaitre le menu. Car si on sort d'un chouya du menu ça disparait, ça peut devenir agaçant a force
-> Le Style (mais ça c'est propre a mon projet)

Voili Voili

greut

Le timeout c'est prévu mais ça risque d'être assez chaud à progammer :sweat: .

Opera 6 gère pas les a:hover

Peut-être pourrait-on appliquer les images de fond par javascript ?

Message édité par greut le 31-08-2003 à 11:46:15

samuelp

greut a écrit :

Le timeout c'est prévu mais ça risque d'être assez chaud à progammer :sweat: .

Pas grave j'ai deja ma petite idee.
Je te filerai la modif si j'arrive a faire un truc potable et pas trop lourd

greut

Oki ca joue... j'avais déjà fait un truc ancien. Ptet que ça peut t'aider

pour créer un timeout

Code :

window.setTimeout(\"hidemenu('"+id+"')\", 500);" );

pour l'annuler

Code :

if(eval("window.time"+id)){
window.clearTimeout(eval("window.time"+id));
}

Bon je sais c'est un code de merde qui t'avance à rien mais bon. Je serais très heureux si tu arrivais à faire un timeout

Le problème cest de savoir comment identifier les élément li dans la liste de liens...

Message édité par greut le 31-08-2003 à 12:53:18

samuelp

Mairde je crois avoir trouvé une lacune dans ce menu (j'ai pas visualisé a fond le code aussi)

Si l'element en question depasse le fond d'image GIF, que se passe t-il ?
Par exemple si l'element est : "SuperElephantRoseaTrompeVerte", est ce que le GIF sera redimensionné automatiquement ?

greut

Bien sûre que non, et c'est normal.

C'est à toi de savoir la largeur maximum tu veux avoir et de faire une image de fond en conséquence.

Si tu veux pas être embêter avec ça soit tu mets une images de fond en repétition. Soit tu n'en mets pas et tu style avec CSS. Mais les style avec CSS peuvent foutre le bordel, c'est difficile d'avoir le même rendu partout.

greut

En plus clair

Je pense que le fichier Javascript et OK et que y a pas de bug là

C'est le fichier CSS et la mauvaise prise en charge des différent navigateurs qui foutent le bordel.

J'ai optimisé le fichier CSS pour être au maximum compatible avec les navigateurs actuels. Mais c'est loin d'être encore tout bon. En plus à force d'utiliser des hack CSS et des trucs bizzare pour certains navigateur ça peut créer d'autre problèmes sur d'autres.

Donc si tu a un seul navigateur à cibler c'est beaucoup plus simple de pndre un fichier CSS qui passe. C'est possible de virer les images et de travailler uniquement en CSS et ainsi virer le bug chiant de IE6.

Message édité par greut le 31-08-2003 à 13:11:26

samuelp

greut a écrit :

En plus clair

Je pense que le fichier Javascript et OK et que y a pas de bug là

C'est le fichier CSS et la mauvaise prise en charge des différent navigateurs qui foutent le bordel.

J'ai optimisé le fichier CSS pour être au maximum compatible avec les navigateurs actuels. Mais c'est loin d'être encore tout bon. En plus à force d'utiliser des hack CSS et des trucs bizzare pour certains navigateur ça peut créer d'autre problèmes sur d'autres.

Donc si tu a un seul navigateur à cibler c'est beaucoup plus simple de pndre un fichier CSS qui passe. Et notemment t'aura pas forcement besoin des images de fond qui sont il me semble le meilleur moyen de personnaliser un menu.

Mais il reste possible de virer les images et de travailler uniquement en CSS et ainsi virer le bug chiant de IE6

Je suis en train de tester ton menu dans mon appli (finalement ton menu sera integrée à la version 0.01 de mon appli )
J'ai viré l'image menu.gif pour jouer sur un changement de couleur dans le hover du menu.
Pour moi ça me suffit.
Quant à la largeur d'un menu, j'opte pour 200px.
Ce qui est dommage en CSS c'est que l'on ne peut pas repercuter un changement de valeur dans un attribut sur les autres : si je change 150px par 200px je dois scruter toute la feuille CSS pour virer 150 par 200

greut

Si ça doit être possible avec

mon_attribut:inherit;

qui prend l'argument de l'élément supérieur. À manier avec précaution.

greut

pendant qu'on est tu peux mettre les tailles en em si tu mets pas d'image, c'est plus propre

http://www.magnin-sante.ch/journal [...] .php&id=82

:hello:

samuelp

Oki.

Bon y a quand mme quelques modifs a faire au code.
Par exemple, si je change 150px par 200px (tu peux essayer) il y aura un enchevetrement entre les menus quand ceux-ci se deroulent

Faudra que je regarde ça de plus pres car mise a part 150 et ses environs, le menu n'est plus tres joli a voir

Je suis pas un guru des CSS, y doit y avoir une solution, mais je mettrai du temps a la trouver

greut

Pour les CSS je te conseille fortement de creuser le sujet. Sache que la feuille de mon menu et un tas de graillerie et de hack immonde. Vaut mieux que ce soit là que dans le code HTML. Je te conseil de vider ma feuille CSS et de tout refaire rien que pour Mozilla.

C'est vraiment génial ces CSS, ça fait du bon code HTML bien lisible, et au final tu gagne du temps.

sur OpenWeb y a d'excellent articles sur le sujet

http://www.openweb.eu.org/css/

Message édité par greut le 31-08-2003 à 13:35:43

samuelp

Merci

A quoi il servent tes span si tu les affiches pas ?

Message édité par samuelp le 31-08-2003 à 13:52:37

greut

C'est pour les aveugles. Le synthétiseur vocal va faire une petite pause avec les virgules. C'est plus sympa.

moi je me bars A+

greut

Bon, je suis à nouveau ... et j'attend toujours les testeurs

UP :bounce:

Flyman30

greut a écrit :

Bon, je suis à nouveau ... et j'attend toujours les testeurs

UP :bounce:

ben y a toujours pas de changement :sweat:

greut

Ben chez toi ça marche donc bon...

Il me faut des types comme freekill chez qui ça merde et qui serait motivé pour m'aider ...

Vous connaissez personne ?

:bounce:

greut

J'ai modifié 2 3 choses ici, tester tester

http://www.magnin-sante.ch/journal [...] zontal.htm

Publicité

Page : 1 2 3

Page Suivante

Page Précédente

Haut de page

FORUM HardWare.fr

Programmation

HTML/CSS

Menu déroulant, Javascript & CSS, Fonctionne sur un max de nav.

Sujets relatifs
Pb menu dynamique JS	[javascript] soumission de formulaire & php
Infobulle javascript	[CSS] Mettre en forme du code
[php] Upload d'une image qui fonctionne, mais Image tronquée!	Positionnement avec CSS: Problème
Style Swticher creer 2 présentation differente CSS sur une page HTML	[JS] Menus Déroulants Javascript à plusieurs niveaux
[CSS] probleme de couleurs resolu	Erreur ds formulaire de recherche javascript
Plus de sujets relatifs à : Menu déroulant, Javascript & CSS, Fonctionne sur un max de nav.

Page générée en 0.072 secondes