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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [CSS] Menu horizontal 1 ligne style www.macromedia.com ???

le_duc

PlaTyPuS

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

Publicité

Profil supprimé

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)

skylight

Made in France.

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

FlorentG

Unité de Masse

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

le_duc

PlaTyPuS

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

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

le_duc

PlaTyPuS

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

sibelius

Vous êtes sûr ?

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

le_duc

PlaTyPuS

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!

masklinn

í dag viðrar vel til loftárása

(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

titione

addicted

il est fou le zen ocean !!

Publicité

antp

Super Administrateur
Champion des excuses bidons

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

masklinn

í dag viðrar vel til loftárása

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

sibelius

Vous êtes sûr ?

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

le_duc

PlaTyPuS

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!

sibelius

Vous êtes sûr ?

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

masklinn

í dag viðrar vel til loftárása

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

le_duc

PlaTyPuS

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

skylight

Made in France.

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:

le_duc

PlaTyPuS

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

sibelius

Vous êtes sûr ?

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

le_duc

PlaTyPuS

SIBELIUS a écrit :

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

masklinn

í dag viðrar vel til loftárása

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

antp

Super Administrateur
Champion des excuses bidons

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

le_duc

PlaTyPuS

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

le_duc

PlaTyPuS

masklinn

í dag viðrar vel til loftárása

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

le_duc

PlaTyPuS

hoho! Merci beaucoup, ca marche parfaitement!!!

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

Merci encore.

masklinn

í dag viðrar vel til loftárása

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

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

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

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

Page générée en 0.161 secondes