28173 sujets

CSS et mise en forme, CSS3

Menu déroulant full horizontal ? [Résolu]

Pages :
(reprise du message précédent)

http://users.skynet.be/planetebleue/temp/smiley/smile_bounce.gif 6l20 (ça veux dire quoi ça? Ah! Secret d'état… Smiley smile ) : Oui, pour cela je compte utiliser un behavior htc, c'est pas top mais bon, les utilisateurs n'ont qu'a passer de ce navigateur archaïque à FF ou IE7 ^^

FranZz : Pour Safari, j'ai pas eu l'occasion d'essayer. Parait qu'il y a une version pour Vista maintenant? Vais essayer de trouver ça. Helouppe ? C'est quoi ça, un nouvel OS ? Smiley lol J'ai tapé ça dans Google et apparemment y'a que toi qui utilise ce mot bizarre. Pour le lien dragoeco.com, t'as raison et j'ai fais le nécessaire c-à-d juste ajouter un banal http:// devant (c'est tout con mais j'y avais pas pensé lol mais je débarque sur Alsareations aussi) Par contre mon lien pour le menu css fonctionne super bien chez moi (Sous IE7, FF et Opera). Merci pour tes encouragements Smiley cligne

Sinon, z'avez une idée d'où ça peut venir? J'ai changé la taille 750px à 100% et c'est pareil. Bon, je mange un ptit bout et j'me remets au boulot…
Modifié par dragoeco (25 Jan 2008 - 21:55)
Laurent Denis a écrit :
si vous voulez des technologies posant des problèmes d'accessibilité, tournez-vous plutôt actuellement vers des standards tel que SVG

Quelques précisions à apporter, Laurent?
Helouppe
=
hello
=
Hello!! is a salutation or greeting in the English language and is synonymous with other greetings such as Hi or Hey


Smiley biggrin Smiley biggrin Smiley biggrin Smiley sweatdrop
Modérateur
bonsoir,

une reset css sur les marges par defaut de div#nav li ul , positionne alors les li ul li a l'endroit attendue sans elargir d'autant ul
div#nav li ul {padding:0;/* FF*/margin:0;/*IE*/}


pour le probleme de IE6 , un javascript en fichier extene (.js ou .htc) , dans l'entete (<head><script ...</head>) ou dans le css (expression) est necessaire , chargé dans IE6 uniquement en se servant des commentaires conditionnels , bien sur, est necessaires

le mieux est un CC liant a un javascript externe (AMHA).

Ce js se chargerait de lister les li d'un conteneur particulier identifiable grace a son ID .

En listant (DOM) le contenu , serait ajouter 2 fonctions :
onmouseover et onmouseout.

A partir de la plusieurs choix sont possible , on peut reprendre le principe des menu d'alsa en donnant une ID+ un numero qui s'incremente et appliqué les fonctions des menus d'exemples d'alsa.

On peut faire plus simple :
si onmouseover , alors li prend une class supplémentaire (applicable partout sans incrémentation contrairement a une id).
si onmouseout , on enleve la class ajouter.

Reste alors a double dans le css les regle li:hover avec un par exemple: li.hover

le pseudo hover ieficace dans IE6 sur li devient une class applicable uniquement au passage de la souris.

Autre approche , mais résultat au rendez vous.

Reste a régler le probleme du js désactivé .
2 possibilité ,

1) un lien dans le li conteneur du sous menu qui mênent vers une page d'entete de rubrique ou les liens apparaissent en haut de contenu et plus sous le menu. De ce fait les sous rubriques sont accessible , même si un click et un passage par une seule page est necessaire.
(solution a préféré , qui n'oblige pas a cacher le lien aux autres , une page d'intro de catégorie peut avoir un intéret descriptif)

2) ou ,prévoir de laisser le menu ouvert dans IE6 , en appliquant le display: none au chargement de la page dans l'entête avec un (basiquement):


<!--[ if IE6]>
<style ="text/css">div#nav li ul {display:block;}</style>
<script type="text/javascript">document.write('<style ="text/css">div#nav li ul {display:none}</style>');//ou dans le script externe</script>
<script type="text/javascript" src="script_hover_li_ie_6.js" ></script>
<[ ENDIF ]-->

pas de click en plus , peut convenir pour des petits menus , (le tien semble gérable de cette façon avec une mise en forme alternative dédié a IE6 sans JS )

(.. d'autres soluce auquelles je ne pense pas ou ne connais pas).

Pour la mise en place d'un petit js comme decrit plus haut , voici un exemple (peut-etre plus leger qu'un behavior.htc multi fonctions ):

http://gcyrillus.free.fr/essai/menu_deroulant.html


GC

PS Smiley smile JOLIES IMAGES , yep !
Modifié par gcyrillus (25 Jan 2008 - 22:22)
http://users.skynet.be/planetebleue/temp/smiley/smile_bounce.gif
FranZz : I knew the definition of "Hello" but not about "Helouppe". So, it's like if i said "Boondjoor" in french Smiley lol

gcyrillus : Merci d'avoir une fois de plus prise le temps d'expliquer les choses à un néophytes comme moi. Je dis "les choses" car je t'avoue ne pas avoir tout complètement assimilé malgré les trois relectures de ton post http://users.skynet.be/planetebleue/temp/smiley/hein02.gif . C'est là que je me dis que si j'avais ne fut ce que le quart de ta science infuse, je serai alors un homme heureux. Alors, je vais prendre le temps d'examiner chacune de tes phrases à la loupe (je suis sûr que j'apprendrai des tas de choses), faire quelques recherches et je reviens... avec une ou deux questions peut-être http://users.skynet.be/planetebleue/temp/smiley/pardon01.gif
Modifié par dragoeco (26 Jan 2008 - 11:29)
<hs>
dragoeco,

dragoeco a écrit :

6l20 (ça veux dire quoi ça? Ah! Secret d'état… Smiley smile )

6l20 - 6 L 20 - Six L Vingt - Sy l vain - Sylvain
Oui, c'est capillotracté, manque d'inspiration le jour de mon inscription... Smiley lol
Allez, une petite pour la route :
C'est en sciant que Léonard devint scie Smiley rolleyes
</hs>

Bon courage pour la suite Smiley cligne
http://users.skynet.be/planetebleue/temp/smiley/smile_bounce.gif >> Gcyrillus : Tout d'abord et une fois de plus, merci pour ta réponse et son développement. Le débordement du ssmenu sous FF et Opera a disparu grâce à toi. Maintenant, pour ce qui est de la compatibilité avec IE6, d'après ce que j'ai compris, tu préconises (à ton humble avis) l'utilisation d'un commentaire conditionnel lié à un fichier externe .js ou .htc. Donc quelque chose qui devrait ressembler soit à :

Body { behavior:url("csshover2.htc"); } + un fichier csshover.htc ?

ou
<!--[if lte IE 6]> <lien vers le .js ou .htc (je sais pas encore trop quoi mettre là..)> <![endif ]--> Inséré dans le code HTML et l'ajout un fichier .js (genre csshover.js?) ou .htc (le même que csshover.htc)

Ou alors peut-être que ce que j'ai trouvé dans le code de ta page menu, une fois inséré aux dernières lignes du css suffit-il ?
<!--[if lte IE  6]>
<script type="text/javascript"   >
	menuvert = function() {
		if (document && document.getElementById) 
	{
		lemenu = document.getElementById("menuv");
		for (i=0; i<lemenu.childNodes.length; i++) 
		{
			node = lemenu.childNodes[i ];
			if (node.nodeName=="LI") 
				{
					node.onmouseover=function() 
					{
						this.className+=" over";
  					}

  					node.onmouseout=function() 
					{
  					this.className=this.className.replace(" over", "");
   					}
   				}
  		}
 	}
}
window.onload=menuvert;
</script>
<style type="text/css">
#menuv li  {padding:0 0.5em;}
li ul {
	margin:0 ;
	padding-right:0;	
	}
</style>
<![endif ]-->


Dans le cas de ce dernier code ou dans celui du fichier csshover.htc que l'on trouve sur le net, est-ce un code standard ou faut-il l'adapter spécifiquement à chaque cas de CSS?

a écrit :
Ce js se chargerait de lister les li d'un conteneur particulier identifiable grace a son ID .

En listant (DOM) le contenu , serait ajouter 2 fonctions :
onmouseover et onmouseout.

A partir de la plusieurs choix sont possible , on peut reprendre le principe des menu d'alsa en donnant une ID+ un numero qui s'incremente et appliqué les fonctions des menus d'exemples d'alsa.

On peut faire plus simple :
si onmouseover , alors li prend une class supplémentaire (applicable partout sans incrémentation contrairement a une id).
si onmouseout , on enleve la class ajouter

J'ai à peu près compris ce que tu explique là mais, vu mon niveau, j'ai énormément de difficulté à le mettre en pratique…

Existe-t-il un "truc-tout-fait" pour débutant http://users.skynet.be/planetebleue/temp/smiley/sourire01.png ?

Pour "le probleme du js désactivé" je verrai ça après, chaque chose en son temps Smiley cligne

>> 6l20 Ah ben j'aurai du m'en douter, c'est tellement évident maintenant ^^ Le coup du "Léonard devint scie" est excellent, j'l'ai entendu y'a pas longtemps en+. Sinon y'a :
C'est en faisant n'importe quoi que l'on devient n'importe qui (classique, c'est vrai...)
Modifié par dragoeco (27 Jan 2008 - 19:12)
Modérateur
bonjour,

je ne crois pas qu'il existe de truc tout fait , pour ma part , je suis encore débutant , et ma trousse a outils se trouve généralement la :
http://fr.selfhtml.org/javascript/index.htm et aussi :
http://fr.selfhtml.org/javascript/objets/elementshtml.htm et http://fr.selfhtml.org/javascript/objets/node.htm

les quelques exemple proposé aide bien a comprendre ce qui se passe et a avoir une premiere approche.


Je vais te parlé du code de la page que tu as extrait :
tout d'abord
window.onload=menuvert;


menuvert est le nom de la fonction javascript qui va dynamiquement modifié le menu et il ne dois etre etre chargé qu'après la page html , sinon , erreur , le menu a modifier risque de ne pas être encore chargé par le navigateur.
window.onload est identique a <body onload="">


if (document && document.getElementById)

on verifie que le navigateur sera en mesure d'atteindre le document et une id dans celui-ci , a priori , inutile si l'on cible que IE6.
lemenu = document.getElementById("menuv");


on stocke dans une variable :lemenu l'élément que l'on cible par son ID (unique dans une page par définition). ici : document.getElementById("menuv"); .




for (i=0; i<lemenu.childNodes.length; i++)

on démarre une boucle en incrémentant un compteur , en parcourant l'arborescence de premier niveau jusqu'à épuisement du stock .

On identifie a chaque fois l'élément (i nous indique sur lequel se placé (premier second , etc ...)


node = lemenu.childNodes[i ];

			if (node.nodeName=="LI")

En testant si il s'agit d'un item de liste . (note le nom de la balise écrite en majuscule et sans chevron)

si item de liste , alors on applique les 2 fonctions : souris dessus/souris partie .
					node.onmouseover=function() 

					{

						this.className+=" over";

  					}



  					node.onmouseout=function() 

					{

  					this.className=this.className.replace(" over", "");

   					}


on referme les accolades et c'est tout coté js .

coté html , il faut donner une id a la liste ul principale.
<ul class="lgn1" [b]id="menuv"[/b]>

le nom de l'id a peu d'importance , mais doit etre correspondre a celui appelé par le script ou vice versa.

coté css il faut aussi déclaré la class (même remarque que l'id pour le nom ):
div#nav li:hover ul , [b]div#nav li.over ul [/b] {

	display:block;

}


dragoeco a écrit :
Pour "le probleme du js désactivé" je verrai ça après, chaque chose en son temps cligne


Il est toujours bon d'y penser avant la fin d'un projet Smiley cligne

bon courage t bonne continuation.

GC
Modifié par gcyrillus (28 Jan 2008 - 02:34)
Super, avec ça, je pense pouvoir m'en sortir maintenant. Je n'ai encore jamais (vraiment) fais de javascript mais c'était également le cas voici seulement deux semaines pour le CSS Smiley smile Donc je m'y mets, dès que j'ai réglé mon autre petit souci et je te tiens informé des évolutions…
Pages :
Sujet clos
Aller à