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

Marsh Posté le 07-01-2005 à 12:05:02

: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.

Reply

Marsh Posté le 07-01-2005 à 12:05:02

Reply

Marsh Posté le 07-01-2005 à 12:06:45

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)

Reply

Marsh Posté le 07-01-2005 à 12:07:13

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

Reply

Marsh Posté le 07-01-2005 à 12:08:42

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

Reply

Marsh Posté le 07-01-2005 à 12:08:47

ouais, il y a celui-ci qui est fait en css-javascript :

http://www.alsacreations.com/artic [...] smenu3.htm

Reply

Marsh Posté le 07-01-2005 à 12:11:02

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

Reply

Marsh Posté le 07-01-2005 à 12:37:38

le_duc a écrit :

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

Oui :
http://www.elmoustikoblog.net/tuto [...] _deroulant
http://www.ibilab.net/webdev/artic [...] mple-4.htm

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com

Reply

Marsh Posté le 07-01-2005 à 13:11:22

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... ) -> mais faire comme sur www.macromedia.com si on veut!

Reply

Marsh Posté le 07-01-2005 à 13:28:30

(le menu de Macromedia est très moche, et il est lent )

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

Reply

Marsh Posté le 07-01-2005 à 13:31:41

il est fou le zen ocean !!

Reply

Marsh Posté le 07-01-2005 à 13:31:41

Reply

Marsh Posté le 07-01-2005 à 13:50:07

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

Reply

Marsh Posté le 07-01-2005 à 13:50:21

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

Reply

Marsh Posté le 07-01-2005 à 13:52:28

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

Reply

Marsh Posté le 07-01-2005 à 14:08:13

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 :

<dl>
<dt id="menu1" onmouseover="montre('smenu1');"><a href="#">Menu 1</a></dt>
<dd id="smenu1">
<ul>
<li><a href="#">Sous-menu 1.1</a></li>
<li><a href="#">Sous-menu 1.2</a></li>
<li><a href="#">Sous-menu 1.3</a></li>
</ul>
</dd>
</dl>

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

Reply

Marsh Posté le 07-01-2005 à 14:11:21

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

Reply

Marsh Posté le 07-01-2005 à 14:13:38

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

Reply

Marsh Posté le 07-01-2005 à 14:15:06

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... :lol: (j'rigole bien sûr ).

Reply

Marsh Posté le 07-01-2005 à 14:15:57

SIBELIUS a écrit :

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

Hallucinant ce modèle CSS
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:

Reply

Marsh Posté le 07-01-2005 à 14:16:03

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

Reply

Marsh Posté le 07-01-2005 à 14:19:46

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

Reply

Marsh Posté le 07-01-2005 à 14:22:44

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:

Reply

Marsh Posté le 07-01-2005 à 14:36:02

skylight a écrit :

Hallucinant ce modèle CSS
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

Reply

Marsh Posté le 07-01-2005 à 14:47:42

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

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

Reply

Marsh Posté le 07-01-2005 à 14:53:10

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 ):

Code :

function change(bgMenu) {
document.getElementById(bgMenu).style.bgColor='#FF0000';
}

Code:

Code :

<dl>
<dt id="menu1" onmouseover="montre('smenu1');"><a href="#">Menu 1</a></dt>
<dd>
<ul id="smenu1" onmouseover="change('menu1');">
<li><a href="#">Sous-menu 1.1</a></li>
<li><a href="#">Sous-menu 1.2</a></li>
<li><a href="#">Sous-menu 1.3</a></li>
</ul>
</dd>
</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...

Reply

Marsh Posté le 07-01-2005 à 15:54:58

up

Reply

Marsh Posté le 07-01-2005 à 16:53:49

le_duc a écrit :

Mtn faut qqn qui maitrise un peu javascript...

Pas spécialement.

Fait en 10mn sans connaitre le JS (ou presque):

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Menu horizontal déroulant sur une ligne en CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id)
{
var d = document.getElementById(id);
for (var i = 1; i<=10; i++)
{
if (document.getElementById('smenu'+i))
{
document.getElementById('smenu'+i).style.display='none';
document.getElementById('smenu'+i).parentNode.getElementsByTagName('dt')[0].getElementsByTagName('a')[0].style.background='#FFF';
}
}
if (d)
{
d.style.display='block';
d.parentNode.getElementsByTagName('dt')[0].getElementsByTagName('a')[0].style.background='#F00';
}
}
//-->
</script>
<style type="text/css">
<!--
/* CSS issu des tutoriels www.alsacreations.com/articles */
body {
margin: 10px;
padding: 0;
font: 1em Verdana, sans-serif;
}
dt, dl, dd, ul, li {
list-style-type: none;
margin: 0 10px 0 0;
padding: 0;
}
#menu {
position : absolute;
left: 50px;
top: 20px;
}
#menu dl {
float: left;
}
#menu li {
display: inline;
}
#menu a {
text-decoration: none;
color: #000;
background: #fff;
}
#smenu1, #smenu2, #smenu3, #smenu4 {
position: absolute;
left: 0;
font-size: 0.7em;
border-top: 1px solid gray;
width: 400px;
}
.mentions {
position: absolute;
bottom : 300px;
left : 10px;
color: #000;
background-color: #ddd;
}
a {text-decoration: none;
color: #222;
}
-->
</style>
</head>
<body>
<div id="menu">
<dl>
<dt onmouseover="montre('smenu1');"><a href="#">Menu 1</a></dt>
<dd id="smenu1">
<ul>
<li><a href="#">Sous-menu 1.1</a></li>
<li><a href="#">Sous-menu 1.2</a></li>
<li><a href="#">Sous-menu 1.3</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="montre('smenu2');"><a href="#">Menu 2</a></dt>
<dd id="smenu2">
<ul>
<li><a href="#">Sous-menu 2.1</a></li>
<li><a href="#">Sous-menu 2.2</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="montre('smenu3');"><a href="#">Menu 3</a></dt>
<dd id="smenu3">
<ul>
<li><a href="#">Sous-menu 3.1</a></li>
<li><a href="#">Sous-menu 3.2</a></li>
<li><a href="#">Sous-menu 3.3</a></li>
<li><a href="#">Sous-menu 3.4</a></li>
<li><a href="#">Sous-menu 3.5</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="montre('smenu4');"><a href="#">Menu 4</a></dt>
<dd id="smenu4">
<ul>
<li><a href="#">Sous-menu 4.1</a></li>
<li><a href="#">Sous-menu 4.2</a></li>
<li><a href="#">Sous-menu 4.3</a></li>
</ul>
</dd>
</dl>
</div>
<div class="mentions">Raphaël GOETTER<br />
<a href="http://www.alsacreations.com">Alsacréations</a><br />
<a href="http://www.alsacreations.com/articles/deroulant/">Explications / Explanations</a>
</div>
</body>
</html>

(je garantis rien par contre )

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

Reply

Marsh Posté le 07-01-2005 à 17:06:59

hoho! Merci beaucoup, ca marche parfaitement!!!

Mtn plus qu'a faire qqs amélioriations de style et c tout bon .

Merci encore.

Reply

Marsh Posté le 07-01-2005 à 17:15:02

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

Reply

Marsh Posté le

Reply

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

Sujets relatifs:

Leave a Replay