[XHTML - CSS]Menu flottant

sam_1421 · Janvier 29, 2007, 11:50

Bonjour,

Je suis présentement dans la création d’un site web sur l’informatique en général, avec des astuces pour Windows et Linux, tutoriels, logithèque d’utilitaires gratuits etc… J’ai fait la bannière et un peu le design, mais il me reste à travailler le menu. J’ai eu une soudaine idée : je voudrais faire un menu démarrer, comme dans Windows vista ; le petit logo rond, et quand le visiteur clique dessus il s’ouvre le menu démarrer avec mon menu. Comment faire ? Je sais que je peux faire un Onmouseclick sur mon image, mais ensuite je sais plus trop. Le menu est trop gros, donc il s’afficherait par dessus une partie de la page, mais je n,ai aucune idée comment réaliser ça. Si vous aez besoin de l’adresse de mon site pour évaluer la situation, dites-le, je la donnerai, mais c’est habituellement considéré comme du spam donc …

Merci beaucoup !

Sam

_Raynor_1_1 · Janvier 30, 2007, 12:04

Une question : en as-tu le droit (de faire un plagia d’une oeuvre Microsoft) ?

sam_1421 · Janvier 30, 2007, 12:06

Je crois que oui, je prends juste le style, je ne prends pas le vrai menu démarrer, je devrai le refaire moi même, pour ajouter des effets si je le souhaite… Mais peut-être y a-t-il une loi que j’ignore ?

_Raynor_1_1 · Janvier 30, 2007, 12:15

Ah ok, je pensais que tu comptais utiliser les même images
Autant pour moi :jap:

deltree · Janvier 30, 2007, 10:46

non, c’est bon, faut arrêter la parano sur les droits d’auteurs certains design linux ont été les premiers à copier à l’époque windows 95. c’est juste un menu déroulant en bas au lieu d’être en haut…

pour la réalisation, en javascript sur le Onmouseclick et le onmouseover c’est pas mal, ensuite, il faut utiliser des div pour contenir tes menus (DHMTL) en attriibut CSS visibility:hidden par défaut, et en changeant dynamiquement ce style sur les actions javascript.
exemple basique:
http://fr.selfhtml.org/css/proprietes/posi…htm#visibility

c’est une bonne idée comme design, ça doit être assez amusant… mais déroutant

sam_1421 · Février 1, 2007, 2:15

Merci pour ta réponse. J’ai essayé avec l’exemple que tu m’as fourni, et ça semble bien être le script dont j’ai besoin, par contre le seul souci reste à le faire apparaître par dessus le reste de mon texte, car maintenant quand on arrive sur mon site il y a un gros trou à l’endroit où le menu caché se trouve …

sam_1421 · Février 1, 2007, 4:31

C’est bon j’ai fini par trouver à force de bidouiller. Par contre je suis confronté à un petit et un gros problème :

Le petit : comment faire pour que quand on reclique sur l’image le menu disparaisse ?
Le gros : comment je vais bien pouvoir faire pour faire des liens sur cette image si en plus je veux créer des effets ? Je vais vous donner l’adresse de la page, pous pourrez voir par vous-même. Ce n’est pas la peine de censurer, cette page n’existera plus dans une semaine, 'est seulement temporaire avant d’acheter un .com : http://pollux-live.fr.nf[/url]. Je suis hébergé sur le serveur d’un pote, et si vous voulez avoir accès au code source, prenez [url=http://insectesdumonde.com/pollux]cette page (car sur l’autre le code source c’est une page de mon fournisseur de domaine gratuit)

Je souhaiterais faire une effet de couleur quand la souris passe au dessus d’un lien du menu, mais comment faire ?

Merci beaucoup !

Sam

deltree · Février 1, 2007, 10:13

Bonjour,

pour remasquer il suffit de repasser en hidden, en gardant l’info ou pas


function show() {
 if(document.getElementById)
   if (document.getElementById("menu_image").style.visibility == "visible")
   (document.getElementById("menu_image").style.visibility = "hidden";
   if (document.getElementById("menu_image").style.visibility == "hidden")
   (document.getElementById("menu_image").style.visibility = "visible";

}

pour mettre des liens, affecte l’id “menu_image” et son style hidden plutôt sur la div contenante (ou sur une nouvelle div dans la div) et strcture la un peu, pas une seule image pour tout le menu , mais une ou plusieurs images de fond, et du texte et des icones par dessus, ensuite tu pourra affecter des liens sur les textes ou les images dessus, éventuellement en attribuant à nouveau des actions javascript pour afficher des sous menus.

sinon, il y a aussi moyen d’affecter des liens sur une seule partie d’une image, mais c’est galère à gélrer, c’est mieux de bien structurer la div.

edit: regarde les exemples de menus en javascripts sur des sites et aussi ici:
http://css.alsacreations.com/xmedia/exempl…orizontal3.htm#

sam_1421 · Février 2, 2007, 4:11

Finalement j’ai trouvé une manière de mettre des liens sur mon image, un peu comme tu m’as conseillé. J,ai mis mon menu en image de fond, j’ai affecté l’id menu_images au <div> et puis j’ai créé les menus et leurs animations dans photoshop et ej les ai placées par dessus l’image. J’ai ajusté le tout avec une petite table. Merci

Par contre pour ce qui est de masquer le menu, ta solution ne fonctionne pas, quand j’essaie avec le script que tu as fourni, le menu n’apparaît pas.

deltree · Février 2, 2007, 9:22

j’ai dû me gourrer dans le tests de variable, utilise ta propre variable, c’'est plus sûr:


var isDisplayed=false;
function show() {
  if (isDisplayed){
    isDisplayed = false;
    document.getElementById("menu_image").style.visibility = "hidden";
  }else{
        isDisplayed = true;
    document.getElementById("menu_image").style.visibility = "visible";
 }

}

sam_1421 · Février 2, 2007, 11:03

Cette fois-ci le menu s’affiche, mais ne se referme pas, c’est comme au départ. Peut-être est-ce seulement une petite erreur, mais je ne connais pas assez le javascript pour trouvger le problème :S

deltree · Février 5, 2007, 8:53

j’ai édité, c’était pas un problème de javascript, mais d’algorithmie, je teste la valeur d’une variable qui ne change pas de valeur, alors forcément

sam_1421 · Février 5, 2007, 11:28

Ça fonctionne ! Merci !

Tu peux maintenant le voir à l’adresse que j’ai fournée, mais j’ai une autre question, surement un petit détail celle-la : dans mon menu les images (en fait les liens) n’apparaissent pas à l’ouverture de celui-ci, il faut passer la souris dessus pour qu’elles apparaissent. Tu peux aller voir par toi-même pour constater le problème. J’imagine que c’est seulement un attribut à donner à un certain tag, mais je n’ai aps encore trouvé comment. Merci !

Sam

[edit] À force de bidouiller j’ai réussi à trouver ; c’est seulement que je ne spécifiais pas l’image à utiliser quand la souris n’a pas encore passée dessus ![/edit]

deltree · Février 6, 2007, 9:34

je t’en prie :jap:
le design est joli, pour ce qui est des droits d’auteurs, il n’y a que le logo windows qui pourrait poser problème si c’était un site commercial, mais ce n’est pas le cas.
Par contre, ça ne passe pas sur mon écran (oui, je suis en 1024 cause miopie): il faudrait aligner le bouton démarrer sur le bas de l’écran. (et éventuellement qu’il soit mieux identifié comme un menu, avec un fausse barre des taches alignée à gauche par exemple.

et ça passe mal sous FX, ce n’est pas bien grave, c’est juste que sur cette image:
http://insectesdumonde.com/pollux/images/menu_flottant.png
il faudrait enlever le texte que tu rappelle sur les images disposées par dessus, ça apparait en double.

les images sont travaillée, c’est plutôt bien :super:

Arai34 · Février 6, 2007, 5:42

vraiment sympa ton menu… fonctionne parfaitement sur opera moi aussi je suis en 1024 sa depasse de partout mais c’est terrible quand meme
sur IE6 par contre il digere toujours pas la transparence des png j’avais un patch pour retablir l’equilibre si il t’interesse je le posterais des que je remettrais la main dessus

sam_1421 · Février 11, 2007, 10:15

=> Arai34 : Content de savoir qu’il fonctionne sur Opera ! Par contre, ça je le savais, sous IE6 il dégénère, d’ailleurs je l’ai écrit sur la page de présentation de mon site, que IE6 n’était pas compatible avec mon site ! Par contre je crois que pour le 1024 c’est OK, j’ai changé quelques petits trucs, et ca devrait être mieux !

Pour ce qui est du patch dont tu parles, il m’éintéresserait effectivement, si tu pouvais me l’envoyer, ce serait sympa

=> deltree : J’ai utilisé un arrière plan venant avec Vista pour mon background, est-ce bien légal ?

Comme je l’ai dit plus haut, j’ai optimisé mon site pour le 1024, la seule chose qui est encore imparfaite est le menu, qui est trop gros … j’aurais dû prendre le screenshot de mon menu en 1024 et non en 1280 ! Je le referai peut-être un jour !

Par contre je ne comprends pas trop ce que tu veux dire en parlant des images qui apparaissent en double …

Pour ce qui est de la fausse barre de tâches, comment proposes-tu de la faire ? Je crois que je n’ai pas beaucoup d’espace pour la faire, à moins que tu penses à autre chose que moi !

Aurais-tu une idée pour alléger un peu mon menu ? Car les onMouseOver et onMouseOut sont des png transparents assez lourds, et je suis allé chez un ami qui a internet 56k, et c’est affreux (le temps de chargement) et même ici avec du 640 kbps ca prend environ 2 secondes avant que chaque élément du menu apparaisse …

Merci beaucoup de ton aide, j’apprécie vraiment !

Sam

deltree · Février 12, 2007, 1:59

Pour les images en double je ne les ai plus.
Simplement, il faud que le fond soit une image sans texte, la plus légère possible (pour ton problème) ensuite, il faut gérer tous les texte de menus en mode texte avec mise en forme CSS et éventuellement des icônes, plus un fond "orange" pour le texte séelctionné selon ton modèle, lui aussi sans texte pour réutiliser la même image sur tous les items de menus.

pour la barre des tâches: soit une ligne en bas: mais il faut la repositionner en Javascript si tu scrolle, soit à gauche sur un colonne (ça prend un peu de place, mais tu peux ajouter du contenu sur cette barre: des liens externes, etc.)
exemple:
http://img149.imageshack.us/img149/9972/tmpco8.th.jpg

edit: ton logo “Windows” fait déjà 9Ko :ouch: , il n’y a pas moyen de le compresser plus le png?
au pire, fait-le en jpg.

en 56K, la norme c’est qui ne faudrait pas plus de 20 Ko pour l’ensemble de la page

sam_1421 · Février 14, 2007, 5:28

Ça semble être une très bonne idée, seulement, q’y mettrias-je ? Si tous mes liens sont dans mon menu, je ne vois pas ce que je pourrais y mettre … Mais dans l’ensemble ça serait vraiment bien je crois !

Pour ce qui est du logo windows, la seule chose qui me retient de le mettre en jpg est la transparence, que j’aimerais conserver, surtout lors de l’effet “glow”. Je ne crois pas qu’un glow soit possible sans transparence, à moins que je ne fasse qu’“illuminer” l’image sans toucher au glow, donc je pourrais peut-être en faire un gif léger, mais dans photoshop j’avais essayé de recréer l,effet du vrai bouton démarrer de Vista sans résultat concluant, alors je me suis tourné vers cet effet qui est un peu plus lourd.

Pour ce qui est du menu, j’ai commencer à essayer de l’alléger, mais sans résultats. J’ai fait ceci :

<div style="position:absolute; width:408px; height:580px; z-index:1; left: 11px; top: 0px; visibility:hidden; background:url(images/menu_flottant.png) no-repeat;" id="menu_image">
     <br><br><br><br><br>
     
     <table height="100%" width="246" style="padding-left:4;">
     <tr>
     <div onMouseOver="this.class='background_menu'" onMouseOut="this.class='vide'"><br>
     <a href="vista.php" style="cursor:default; border:none">Windows Vista</a><br>
     <br>
     </tr>
     </table></div>
  
  <center><img src="images/vista/fleche.png" border="0" align="middle"></center><br><div style="position:relative; width:200px; height:115px; z-index:2;"><a href="java script:show()">
    <center><img src="images/vista_circle_logo_menu.png"
    onMouseOut="this.src='images/vista_circle_logo_menu.png'"
    onMouseOver="this.src='images/vista_circle_logo_menu_over.png'" border="0">
  </center></a></div>

Pour ce qui est du css :

.background_menu
{
	background-image: url( 'images/menu_images/effet_menu.png' );
	background-repeat: no-repeat;
}
.vide
{
}

C’est tout ce qui se rapporte à mon menu. Pour l’instant j’ai seulment un item, mais bon une fois que j,aurai trouvé comment faire je ferai la même chose pour tous les autres. Ce code donne comme résultat quelque chose de plutôt moche. Au lieu d’afficher l’image en fond derrière le texte au passage de la souris, le texte prend la couleur de l’image (et ce même avant que j’ai passé mon curseur au-dessus …). J’ai essayé avec des <td> mais c’est pas mieux. Est-ce que c’était à peu près ça ton idée, ou c’était autre chose ?

deltree · Février 14, 2007, 5:55

Bonjour,
essaye d’éviter le tableau, utilise au miximum les positions relative CSS, ton code sera plus léger, et déporté dans le CSS
affecte une classe à tous les élements plutôt que de définir le style en ligne.

Essaye d’enlèver le onMouseOver et onMouseOut, et essaye plutôt d’utiliser les styles associé au <A>:

le CSS permet donc d’affecter automatiquement ces différents style aux tag A suivant que tue est au-dessus, cliqué, déjà visité etc.

rejette un coup d’oeil sur l’exemple, ils se passe de tableaux, utilise le a:hover, mais n’utilise pa dimage par contre
http://css.alsacreations.com/xmedia/exempl…orizontal3.htm#

sam_1421 · Février 14, 2007, 10:26

D’accord !

J’ai maintenant ceci :



div a.liens:link 
{
	color:#000099;
	text-decoration: none;
	font-size: 14px;
	font-family: "Segoe UI", "Trebuchet MS", Verdana, Arial, "Times New Roman", serif;
}
div a.liens:visited 
{
	color:#999999;
	text-decoration: none;
	font-family: "Segoe UI", "Trebuchet MS", Verdana, Arial, "Times New Roman", serif;
	font-size: 14px;
}
div a.liens:hover 
{
	color:#5A97FF;
	text-decoration: none;
	font-family: "Segoe UI", "Trebuchet MS", Verdana, Arial, "Times New Roman", serif; 
	font-size: 14px;
	background-images: url( 'images/menu_images/effet_menu.png' );
	
	
}
div a.liens:active 
{
	color:#666666;
	text-decoration: none;
	font-family: "Segoe UI", "Trebuchet MS", Verdana, Arial, "Times New Roman", serif;
	font-size: 14px
}

Pour la page :


 <div><br>
     <a href="vista.php" style="cursor:default; border:none" class="liens">Windows Vista</a><br>
     </div>

Ça n’a pas changé grand chose en fait, c’est seulement le texte qui change de couleur, j’ai essayé quelques trucs mais sans résultats … crois-tu que c’est possible de rendre l,effet menu démarrer Vista de cette manière ??