Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1344 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] Menu horizontal 1 ligne style www.macromedia.com ???

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS] Menu horizontal 1 ligne style www.macromedia.com ???

n°940078
le_duc
PlaTyPuS
Posté le 07-01-2005 à 12:05:02  profilanswer
 

:hello:  
 
Le menu horizontal qu'il y a sur le site www.macromedia.com est fait en flash? ou en css ?
 
Je pense en flash... mais y'a pas moyen de faire un truc du style en CSS ??
 
Merci.

mood
Publicité
Posté le 07-01-2005 à 12:05:02  profilanswer
 

n°940081
Profil sup​primé
Posté le 07-01-2005 à 12:06:45  answer
 

click droit -> about flash [:kiki]
 
donc oui, c'est du flash, en css ca va etre tres chaud, je croit pas que ca soit faisable (du moins pas compatible IE)

n°940082
skylight
Made in France.
Posté le 07-01-2005 à 12:07:13  profilanswer
 

C'est fait en Flash mais c'est possible en Javascript...

n°940086
FlorentG
Posté le 07-01-2005 à 12:08:42  profilanswer
 

Sous IE faut Javascripter... Sinon active la version HTML pur  histoire de voir :
http://www.macromedia.com/help/accessibility.html

n°940087
le_duc
PlaTyPuS
Posté le 07-01-2005 à 12:08:47  profilanswer
 

ouais, il y a celui-ci qui est fait en css-javascript :
 
http://www.alsacreations.com/artic [...] smenu3.htm  

n°940090
le_duc
PlaTyPuS
Posté le 07-01-2005 à 12:11:02  profilanswer
 

sinon en css-javascript, vous avez d'autres exemples??

n°940139
sibelius
Vous êtes sûr ?
Posté le 07-01-2005 à 12:37:38  profilanswer
 
n°940188
le_duc
PlaTyPuS
Posté le 07-01-2005 à 13:11:22  profilanswer
 

En fait ce qui me dérange dans ce menu : http://www.alsacreations.com/artic [...] smenu3.htm , c'est que si on va dans les sous-menu, on voit pas dans quel menu on est! -> y'a pas moyen de mettre un background-color au menu lorsque on est dans un sous-menu??? (je sais pas comment expliquer ca autrement... :D) -> mais faire comme sur www.macromedia.com si on veut!

n°940201
masklinn
í dag viðrar vel til loftárása
Posté le 07-01-2005 à 13:28:30  profilanswer
 

(le menu de Macromedia est très moche, et il est lent :o)
 
Menus CSS "popups" qui poutrent:
Zaurus multiniveau
Door to my Garden et Organic Desire, mono-niveaux
et pour finir le Zen Ocean que je viens de découvrir (si vous êtes sous IE tant pis pour vous, si vous êtes sous Opera, Mozilla, Firefox, ... essayez de ballader votre souris un peu partout ;) )


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
n°940203
titione
addicted
Posté le 07-01-2005 à 13:31:41  profilanswer
 

il est fou le zen ocean !!

mood
Publicité
Posté le 07-01-2005 à 13:31:41  profilanswer
 

n°940215
antp
Super Administrateur
Champion des excuses bidons
Posté le 07-01-2005 à 13:50:07  profilanswer
 

chacal_one333 a écrit :

click droit -> about flash [:kiki]
 
donc oui, c'est du flash, en css ca va etre tres chaud, je croit pas que ca soit faisable (du moins pas compatible IE)


 
:??: je vois pas de Flash
Chez moi ce menu il est en JS


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
n°940216
masklinn
í dag viðrar vel til loftárása
Posté le 07-01-2005 à 13:50:21  profilanswer
 

titione a écrit :

il est fou le zen ocean !!


Fou non, le principe est pas super compliqué dans l'absolu (des gifs animés déclenchés sur hovers, et un bg fixed pour le plongeur je pense, faudrait que je regarde ca de plus près)
 
Par contre c'est extrèmement bien réalisé, et il fallait y penser (j'adore tout particulièrement le crabe au niveau du footer :love: )

antp a écrit :

:??: je vois pas de Flash
Chez moi ce menu il est en JS


C'est du flash, et c'est bloqué par flashblock, et un rich clic affiche l'about de flash [:spamafote]  
 
C'est du flash intégré via JS, mais c'est quand même du flash
d'ailleurs on peut pas tabber dessus
(le JS sert à détecter si t'as flash et quelle version)
(et ils ont fait une version <noscript> en html pour le référencement google [:mlc] )


Message édité par masklinn le 07-01-2005 à 13:54:23

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
n°940219
sibelius
Vous êtes sûr ?
Posté le 07-01-2005 à 13:52:28  profilanswer
 

Je n'avais pas remarqué que la lampe du plongueur s'intensifiait en descendant ! Extra !


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°940229
le_duc
PlaTyPuS
Posté le 07-01-2005 à 14:08:13  profilanswer
 

ouais, c bien délire ce zen ocean!!! :)
 
mais pour mon problème, comment je pourrais faire alors pour changer la couleur de fond de menu1, lorsque je suis avec mon curseur sur sous-menu1.1, sous-menu1.2,...
 

Code :
  1. <dl>
  2.  <dt id="menu1" onmouseover="montre('smenu1');"><a href="#">Menu 1</a></dt>
  3.   <dd id="smenu1">
  4.    <ul>
  5.     <li><a href="#">Sous-menu 1.1</a></li>
  6.     <li><a href="#">Sous-menu 1.2</a></li>
  7.     <li><a href="#">Sous-menu 1.3</a></li>
  8.    </ul>
  9.   </dd>
  10. </dl>


 
le onmouseover du <dt> sert à afficher les sous-menus!

n°940232
sibelius
Vous êtes sûr ?
Posté le 07-01-2005 à 14:11:21  profilanswer
 

Ben à vue d'oeil je dirais qu'il faut passer par du javascript.


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°940235
masklinn
í dag viðrar vel til loftárása
Posté le 07-01-2005 à 14:13:38  profilanswer
 

SIBELIUS a écrit :

Ben à vue d'oeil je dirais qu'il faut passer par du javascript.


en même temps c'est déjà ce qu'il fait :whistle:  
et ca doit se faire via CSS [:spamafote]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
n°940237
le_duc
PlaTyPuS
Posté le 07-01-2005 à 14:15:06  profilanswer
 

SIBELIUS a écrit :

Ben à vue d'oeil je dirais qu'il faut passer par du javascript.


 
ben oui, mais vu que je suis vraiment un pro en javascript, j'vais pas m'amuser à faire des choses aussi facile...donc si qqn peut le faire pour moi... :D  :lol: (j'rigole bien sûr :D).

n°940239
skylight
Made in France.
Posté le 07-01-2005 à 14:15:57  profilanswer
 

SIBELIUS a écrit :

Je n'avais pas remarqué que la lampe du plongueur s'intensifiait en descendant ! Extra !


Hallucinant ce modèle CSS :D
Faudrait que je regarde de plus près comment ils ont fait pour que le plongeur change   d'image en descendant dans la page... :crazy:

n°940240
le_duc
PlaTyPuS
Posté le 07-01-2005 à 14:16:03  profilanswer
 

Masklinn a écrit :

en même temps c'est déjà ce qu'il fait :whistle:  
et ca doit se faire via CSS [:spamafote]


 
 
oui ca se fait...mais IE ne le gère pas  :pfff:  -> et vu que les visiteurs de mon site auront à 99.9% IE, vaut mieux que je fasse qqch qui soit compatible IE aussi ;)

n°940246
sibelius
Vous êtes sûr ?
Posté le 07-01-2005 à 14:19:46  profilanswer
 

Masklinn a écrit :


et ca doit se faire via CSS [:spamafote]


Ben à vrai dire, je ne vois pas trop : il faudrait un sélecteur qui sélectionne un enfant mais qui s'applique à son parent  :pt1cable:  
 
PS : pour JS, je ferais un "onmouseover='change(parent)'"
avec la fonction JS parent() qui aurait un getElementById() pour chopper l'id du parent et lui faire un this.className="couleur"
 
Mais ça doit être bien compliqué... et je suis pas spécialiste du tout !


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°940249
le_duc
PlaTyPuS
Posté le 07-01-2005 à 14:22:44  profilanswer
 

SIBELIUS a écrit :

Ben à vrai dire, je ne vois pas trop : il faudrait un sélecteur qui sélectionne un enfant mais qui s'applique à son parent  :pt1cable:  
 
PS : pour JS, je ferais un "onmouseover='change(parent)'"
avec la fonction JS parent() qui aurait un getElementById() pour chopper l'id du parent et lui faire un this.className="couleur"
 
Mais ça doit être bien compliqué... et je suis pas spécialiste du tout !


 
ben oui...j'ai déjà essayé qq trucs, mais ca marche pas!  :sweat:

n°940262
masklinn
í dag viðrar vel til loftárása
Posté le 07-01-2005 à 14:36:02  profilanswer
 

skylight a écrit :

Hallucinant ce modèle CSS :D
Faudrait que je regarde de plus près comment ils ont fait pour que le plongeur change   d'image en descendant dans la page... :crazy:


Il change pas.
 
Un plongeur en PNG avec transparence partielle (sans lampe)
 
Un faisceau de lampe transparence partielle PNG aussi, placé derrière (axe Z) le plongeur
 
Et une longue bande PNG transparente qui va du bleu opaque au transparent pûr placée entre le plongeur et la lampe (sur l'axe Z)
 
Plongeur et lampe en fixed, bande qui scroll avec la page.
Au final, quand on scroll la bande descend vers le transparent et laisse petit à petit apparaître la lampe, cachée jusqu'alors [:matleflou]  
 
C'est ultra bien pensé


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
n°940277
antp
Super Administrateur
Champion des excuses bidons
Posté le 07-01-2005 à 14:47:42  profilanswer
 

quand on scrolle rapidement dans Mozilla on voit cette bande : il ne met pas à jour la transparence du plongeur assez vite :D


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
n°940282
le_duc
PlaTyPuS
Posté le 07-01-2005 à 14:53:10  profilanswer
 

bon, j'apporte déjà un bout de code  :pt1cable:  
 
Donc en fait j'aimerais que quand on est dans un sous-menu, le menu correspondant ait une couleur d'arrière plan différent des autres menu!
 
Javascript (code surement faux, vu que c moi qui l'ai fait :D):

Code :
  1. function change(bgMenu) {
  2. document.getElementById(bgMenu).style.bgColor='#FF0000';
  3. }


 
Code:

Code :
  1. <dl>
  2.  <dt id="menu1" onmouseover="montre('smenu1');"><a href="#">Menu 1</a></dt>
  3.   <dd>
  4.    <ul id="smenu1" onmouseover="change('menu1');">
  5.     <li><a href="#">Sous-menu 1.1</a></li>
  6.     <li><a href="#">Sous-menu 1.2</a></li>
  7.     <li><a href="#">Sous-menu 1.3</a></li>
  8.    </ul>
  9.   </dd>
  10. </dl>


 
Menu complet, mais sans l'amélioriation voulue, ici : http://www.alsacreations.com/artic [...] smenu3.htm  
 
Mtn faut qqn qui maitrise un peu javascript... :D

n°940378
le_duc
PlaTyPuS
Posté le 07-01-2005 à 15:54:58  profilanswer
 

up

n°940457
masklinn
í dag viðrar vel til loftárása
Posté le 07-01-2005 à 16:53:49  profilanswer
 

le_duc a écrit :

Mtn faut qqn qui maitrise un peu javascript... :D


Pas spécialement.
 
Fait en 10mn sans connaitre le JS (ou presque):

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  3.     <head>
  4.         <title>Menu horizontal d&eacute;roulant sur une ligne en CSS</title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.         <script type="text/javascript">
  7.             <!--
  8.                 window.onload=montre;
  9.                 function montre(id)
  10.                 {
  11.                     var d = document.getElementById(id);
  12.                     for (var i = 1; i<=10; i++)
  13.                     {
  14.                         if (document.getElementById('smenu'+i))
  15.                         {
  16.                             document.getElementById('smenu'+i).style.display='none';
  17.                             document.getElementById('smenu'+i).parentNode.getElementsByTagName('dt')[0].getElementsByTagName('a')[0].style.background='#FFF';
  18.                         }
  19.                     }
  20.                     if (d)
  21.                     {
  22.                        
  23.                         d.style.display='block';
  24.                         d.parentNode.getElementsByTagName('dt')[0].getElementsByTagName('a')[0].style.background='#F00';
  25.                     }
  26.                 }
  27.             //-->
  28.         </script>
  29.         <style type="text/css">
  30.             <!--
  31.             /* CSS issu des tutoriels www.alsacreations.com/articles */
  32.             body {
  33.                 margin: 10px;
  34.                 padding: 0;
  35.                 font: 1em Verdana, sans-serif;
  36.             }
  37.            
  38.             dt, dl, dd, ul, li {
  39.                 list-style-type: none;
  40.                 margin: 0 10px 0 0;
  41.                 padding: 0;
  42.             }
  43.            
  44.             #menu {
  45.                 position : absolute;
  46.                 left: 50px;
  47.                 top: 20px;
  48.             }
  49.            
  50.             #menu dl {
  51.                 float: left;
  52.             }
  53.             #menu li {
  54.                 display: inline;
  55.             }
  56.            
  57.             #menu a {
  58.                 text-decoration: none;
  59.                 color: #000;
  60.                 background: #fff;
  61.             }
  62.            
  63.             #smenu1, #smenu2, #smenu3, #smenu4 {
  64.                 position: absolute;
  65.                 left: 0;
  66.                 font-size: 0.7em;
  67.                 border-top: 1px solid gray;
  68.                 width: 400px;
  69.             }
  70.            
  71.            
  72.             .mentions {
  73.                 position: absolute;
  74.                 bottom : 300px;
  75.                 left : 10px;
  76.                 color: #000;
  77.                 background-color: #ddd;
  78.             }
  79.        
  80.             a {text-decoration: none;
  81.                 color: #222;
  82.             }
  83.            
  84.             -->
  85.         </style>
  86.     </head>
  87.     <body>
  88.         <div id="menu">
  89.             <dl>
  90.                 <dt onmouseover="montre('smenu1');"><a href="#">Menu 1</a></dt>
  91.                 <dd id="smenu1">
  92.                     <ul>
  93.                         <li><a href="#">Sous-menu 1.1</a></li>
  94.                         <li><a href="#">Sous-menu 1.2</a></li>
  95.                         <li><a href="#">Sous-menu 1.3</a></li>
  96.                     </ul>
  97.                 </dd>
  98.             </dl>
  99.             <dl>
  100.                 <dt onmouseover="montre('smenu2');"><a href="#">Menu 2</a></dt>
  101.                 <dd id="smenu2">
  102.                     <ul>
  103.                         <li><a href="#">Sous-menu 2.1</a></li>
  104.                         <li><a href="#">Sous-menu 2.2</a></li>
  105.                     </ul>
  106.                 </dd>
  107.             </dl>
  108.            
  109.             <dl>
  110.                 <dt onmouseover="montre('smenu3');"><a href="#">Menu 3</a></dt>
  111.                 <dd id="smenu3">
  112.                     <ul>
  113.                         <li><a href="#">Sous-menu 3.1</a></li>
  114.                         <li><a href="#">Sous-menu 3.2</a></li>
  115.                         <li><a href="#">Sous-menu 3.3</a></li>
  116.                         <li><a href="#">Sous-menu 3.4</a></li>
  117.                         <li><a href="#">Sous-menu 3.5</a></li>
  118.                     </ul>
  119.                 </dd>
  120.             </dl>
  121.             <dl>
  122.                 <dt onmouseover="montre('smenu4');"><a href="#">Menu 4</a></dt>
  123.                 <dd id="smenu4">
  124.                     <ul>
  125.                         <li><a href="#">Sous-menu 4.1</a></li>
  126.                         <li><a href="#">Sous-menu 4.2</a></li>
  127.                         <li><a href="#">Sous-menu 4.3</a></li>
  128.                     </ul>
  129.                 </dd>
  130.             </dl>
  131.         </div>
  132.         <div class="mentions">Raphaël GOETTER<br />
  133.             <a href="http://www.alsacreations.com">Alsacréations</a><br />
  134.        
  135.             <a href="http://www.alsacreations.com/articles/deroulant/">Explications / Explanations</a>
  136.         </div>
  137.     </body>
  138. </html>


 
(je garantis rien par contre :o)


Message édité par masklinn le 07-01-2005 à 16:56:52

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
n°940473
le_duc
PlaTyPuS
Posté le 07-01-2005 à 17:06:59  profilanswer
 

hoho! Merci beaucoup, ca marche parfaitement!!! :)
 
Mtn plus qu'a faire qqs amélioriations de style et c tout bon :).
 
Merci encore.

n°940479
masklinn
í dag viðrar vel til loftárása
Posté le 07-01-2005 à 17:15:02  profilanswer
 

le_duc a écrit :

hoho! Merci beaucoup, ca marche parfaitement!!! :)
 
Mtn plus qu'a faire qqs amélioriations de style et c tout bon :).
 
Merci encore.


Pas de quoi, il suffisait d'ajouter deux lignes [:spamafote]  
le problème c'était de les trouver, les lignes à ajouter, j'ai eu du mal [:matleflou]  
(mais maintenant je connais un peu de JS/DOM [:jajax] )


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] Menu horizontal 1 ligne style www.macromedia.com ???

 

Sujets relatifs
Problème de menu dynamiqueApi Win32 : je n'arrive pas à griser une option de menu
menu par onglets en imagesCSS vs layout tableau
menu reroutage avec recherche - dreamweavertableau triable en ligne
tableau triable en ligneRetour à la ligne smartmail
forcer cssScript qui marche en local mais pas en ligne
Plus de sujets relatifs à : [CSS] Menu horizontal 1 ligne style www.macromedia.com ???


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR