tabbed menus (onglets)

Bonjour,
j'utilise dreamweaver pour faire un site web html/css.
Je pars du style Halo, donné dans dw. Mais j'aimerais un autre système de
menu que celui proposé :
un système de menu à onglets, dont le niveau 1 affiche différemment l'item
actuellement affiché (et sans lien si possible),

Très très mauvaise idée !
il faut absolument un lien menant vers la page qui aura en clair les
sous-menus associés.

Pourquoi ?
parceque on peut passer sans le JS activé, et sans lien on ne pourra
alors aller nulle part : -(

et dont le niveau 2 est
toujours visible, affichant aussi de manière différente l'item sélectionné.

j'a pas trop compris l'intéret du truc (si tous les sous-menus sont
toujours ouverts ...

Quelque chose comme ça (on est ici dans le sous menu 2.3) :
Menu 1 | MENU 2 | Menu 3 | Menu 4
ss menu 2.1 | ss menu 2.2 | SS MENU 2.3

Les menus et sous menus ont des liens (avec effet de roll-over), sauf MENU 2
et SS MENU 2.3 puisqu'on y est déjà.
Tous les menus et ss menus ont un style avec un background spécifique, sauf
ceux sélectionnés (background de type rollover).
Seuls les sous menus correspondant au menu choisi s'affichent.

Ha! alors je comprends
(et maintiens ce que dit + haut : menu 1 avec lien)

La cerise sur le gateau : au lieu de liens vers d'autres pages html, un
click sur un item affiche le div correspondant et masque les autres.

vive l'ADSL !
(et tant pis pour les pov's malheureux condamnés au rtc)

Un exemple parfait de ce que je voudrais serait ici :
http://www.adobe.com/products/dreamweaver/?promoid=BINR

non ... j'irai pas voir

quel est le blème ?

function cacher(){
var D = document.getElementsByTagName('div');
for(var i=0;i<D.length;i++)
if(D[i].id.substring(0,3))=='truc') D[i].style.display='none';
}
function montre(quoi) {
cacher();
quoi = document.getElementById(quoi);
quoi.style.display = 'block';
}


<ul id="menu">
<li><a href="menu1.htm" onclick="return false;">MENU 1</a>
<ul>
<li><a href="ss_menu_1_1.htm"
onclick="montre('truc_11');"ss-menu 1.1</a>
</li>
<li><a href="ss_menu_1_2.htm"
onclick="montre('truc_12');"ss-menu 1.2</a>
</li>
</ul>
</li>
<li><a href="menu2.htm">MENU 2</a></li>
</ul>

J'ai bien essayé de récup le code de la page pour voir, mais ça pose 2
problèmes :
1) je n'arrive pas à prendre tous les css (la page ne s'affiche pas comme il
faut)
2) Est-ce que j'ai le droit de récup ce code ?

auras-tu le droit de te servir de code qu'on t'indiquerait ?

--
Stephane Moriaux et son [moins] vieux Mac

"ASM" <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> a écrit dans le message
de news: 4488ca73$0$941$ba4acef3@news.orange.fr...

Bonjour,
j'utilise dreamweaver pour faire un site web html/css.
Je pars du style Halo, donné dans dw. Mais j'aimerais un autre système
de

menu que celui proposé :
un système de menu à onglets, dont le niveau 1 affiche différemment
l'item

actuellement affiché (et sans lien si possible),

Très très mauvaise idée !
il faut absolument un lien menant vers la page qui aura en clair les
sous-menus associés.

Pourquoi ?
parceque on peut passer sans le JS activé, et sans lien on ne pourra
alors aller nulle part : -(

J'ai pas très bien compris. Le menu actuellement sélectionné doit avec un
lien vers lui-même (vers la page actuellement affichée) ?
Je trouve ça grotesque a priori, mais bon, si c'est bien ce que tu dis, je
n'ai pas compris le pourquoi du comment. C'est ce que font d'autre sites en
effet (comme sur Apple.com qui finalement plait bien à mon boss et dont je
vais m'inspirer).

et dont le niveau 2 est
toujours visible, affichant aussi de manière différente l'item
sélectionné.

j'a pas trop compris l'intéret du truc (si tous les sous-menus sont
toujours ouverts ...

Quelque chose comme ça (on est ici dans le sous menu 2.3) :
Menu 1 | MENU 2 | Menu 3 | Menu 4
ss menu 2.1 | ss menu 2.2 | SS MENU 2.3

Les menus et sous menus ont des liens (avec effet de roll-over), sauf
MENU 2

et SS MENU 2.3 puisqu'on y est déjà.
Tous les menus et ss menus ont un style avec un background spécifique,
sauf

ceux sélectionnés (background de type rollover).
Seuls les sous menus correspondant au menu choisi s'affichent.

Ha! alors je comprends
(et maintiens ce que dit + haut : menu 1 avec lien)

Oui

La cerise sur le gateau : au lieu de liens vers d'autres pages html, un
click sur un item affiche le div correspondant et masque les autres.

vive l'ADSL !
(et tant pis pour les pov's malheureux condamnés au rtc)

C'est pas faux du tout, et effectivement, l'appli doit balancer beaucoup de
choses dans chaque sous menu. Donc je vais faire une page par sous menu. Ca
sera mieux, plus léger, et carrément moins chiant pour moi (je suis
développeur, pas webmaster ;)

Un exemple parfait de ce que je voudrais serait ici :
http://www.adobe.com/products/dreamweaver/?promoid=BINR

non ... j'irai pas voir

Oui, comme je dis plus haut, ce n'est pluis la peine, je laisse tomber cette
idée. Maintenant, faudrait voir apple.com ;)

quel est le blème ?

function cacher(){
var D = document.getElementsByTagName('div');
for(var i=0;i<D.length;i++)
if(D[i].id.substring(0,3))=='truc') D[i].style.display='none';
}
function montre(quoi) {
cacher();
quoi = document.getElementById(quoi);
quoi.style.display = 'block';
}


<ul id="menu">
<li><a href="menu1.htm" onclick="return false;">MENU 1</a>
<ul>
<li><a href="ss_menu_1_1.htm"
onclick="montre('truc_11');"ss-menu 1.1</a>
</li>
<li><a href="ss_menu_1_2.htm"
onclick="montre('truc_12');"ss-menu 1.2</a>
</li>
</ul>
</li>
<li><a href="menu2.htm">MENU 2</a></li>
</ul>

Merci pour ce bout de code : je le garde au chaud.

J'ai bien essayé de récup le code de la page pour voir, mais ça pose 2
problèmes :
1) je n'arrive pas à prendre tous les css (la page ne s'affiche pas
comme il

faut)
2) Est-ce que j'ai le droit de récup ce code ?

auras-tu le droit de te servir de code qu'on t'indiquerait ?

Ca serait même recommandé : plus ça va vite et mieux c'est. On va pas
réinventer la roue à chaque fois. Si quelqu'un me donne un joli code, c'est
sûr que je l'utiliserai. Mais le code venant de chez Adobe, y'a toute les
chances au monde pour qu'il soit protégé (cf leur série de brevets
scandaleux sur tout et n'importe quoi).

Merci pour tout.

Juste oublié de préciser que kerberos = drax au boulot :)

"ASM" <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> a écrit dans le message
de news: 4488ca73$0$941$ba4acef3@news.orange.fr...

actuellement affiché (et sans lien si possible),

Très très mauvaise idée !
il faut absolument un lien menant vers la page qui aura en clair les
sous-menus associés.

Pourquoi ?
parceque on peut passer sans le JS activé, et sans lien on ne pourra
alors aller nulle part : -(

J'ai pas très bien compris.

Heu ... bon, c'est sûr ... si on est déjà sur la bonne page, il n'y en a
pas besoin :-/

Je trouve ça grotesque a priori,

de même

C'est ce que font d'autre sites en
effet (comme sur Apple.com qui finalement plait bien à mon boss et dont je
vais m'inspirer).

Oui ... bon ... il y a à prendre et à laisser.

vive l'ADSL !
(et tant pis pour les pov's malheureux condamnés au rtc)

C'est pas faux du tout, et effectivement, l'appli doit balancer beaucoup de
choses dans chaque sous menu. Donc je vais faire une page par sous menu. Ca
sera mieux, plus léger, et carrément moins chiant pour moi (je suis
développeur, pas webmaster ;)

je vois pas bien la nuance
(de tout avoir sur la même page et faire apparaître l'un ou l'autre
c'est-y pas du développement ?)

Oui, comme je dis plus haut, ce n'est pluis la peine, je laisse tomber cette
idée. Maintenant, faudrait voir apple.com ;)

comme dit : il y a à prendre et à laisser
Il y a 5 ans ce menu paraissait 'top'
aujourd'hui tout à fait ringard
(tout en table avec des backgrounds de celulles)
(même pas d'effets de roll-over)
hyper c....t à maintenir comparativement à la même chose en css
http://css.alsacreations.com/xmedia/exemples/deroulant/cssmenu3.htm
issu de :
<http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal>


voir Listamatic
http://css.maxdesign.com.au/listamatic2/horizontal04.htm
(et les menu-listes suivants)

visiter Alistapart
http://alistapart.com/topics/code/css/
et en particulier :
http://alistapart.com/articles/slidingdoors
http://alistapart.com/articles/slidingdoors2


--
Stephane Moriaux et son [moins] vieux Mac

"ASM" <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> a écrit dans le message
de news: 44896f50$0$844$ba4acef3@news.orange.fr...

"ASM" <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> a écrit dans le
message
de news: 4488ca73$0$941$ba4acef3@news.orange.fr...

actuellement affiché (et sans lien si possible),

Très très mauvaise idée !
il faut absolument un lien menant vers la page qui aura en clair les
sous-menus associés.

Pourquoi ?
parceque on peut passer sans le JS activé, et sans lien on ne pourra
alors aller nulle part : -(

J'ai pas très bien compris.

Heu ... bon, c'est sûr ... si on est déjà sur la bonne page, il n'y en a
pas besoin :-/

Je trouve ça grotesque a priori,

de même

C'est ce que font d'autre sites en
effet (comme sur Apple.com qui finalement plait bien à mon boss et dont
je
vais m'inspirer).

Oui ... bon ... il y a à prendre et à laisser.

A laisser notamment le fait que leur menu est fait par des tableaux ...

vive l'ADSL !
(et tant pis pour les pov's malheureux condamnés au rtc)

C'est pas faux du tout, et effectivement, l'appli doit balancer beaucoup
de
choses dans chaque sous menu. Donc je vais faire une page par sous menu.
Ca
sera mieux, plus léger, et carrément moins chiant pour moi (je suis
développeur, pas webmaster ;)

je vois pas bien la nuance
(de tout avoir sur la même page et faire apparaître l'un ou l'autre
c'est-y pas du développement ?)

Je suis développeur : je développe des logiciels, en Java, en C++. je fais
de l'UML (modélisation), etc.
Faire des pages php/asp/javascript, c'est du script, on ne développe rien. A
la limite, on code. Mais faut pas être bac+5 pour ça (I mean no offense).
Faire de l'html, alors là, faut même plus être informaticien ;) Faut être
doué, et avoir un certain sens des arts plasiques (qu'il me manque
cruellement).
Là je voulais dire que l'appli (une appli web en WebObject, donc en Java -
et pas javascript-) doit être pilotée par des pages web : son interface
homme-machine est donc la page web. Le contenu est essentiellement
dynamique, mais surtout, très lourd pour chaque sous menu. Donc en effet, si
je mets tout dans la même page et je ne décide d'afficher que ce qu'il faut,
ça va charger inutilement le serveur. C'est pourquoi je vais mettre chaque
sous menu dans une page à part. Et c'est pluis simple pour moi car il suffit
de faire un menu statique par page plutôt qu'utiliser des feintes
css/javascript pour les menus (c'est là que j'ajoute que c'est plus simple
pour moi car je ne suis pas webmaster, et donc je maitrise mal
css/javascript).

Heu, c'est plus clair ou c'est pire ? ;)

Oui, comme je dis plus haut, ce n'est pluis la peine, je laisse tomber
cette
idée. Maintenant, faudrait voir apple.com ;)

comme dit : il y a à prendre et à laisser
Il y a 5 ans ce menu paraissait 'top'
aujourd'hui tout à fait ringard
(tout en table avec des backgrounds de celulles)
(même pas d'effets de roll-over)

C'est sûr. Les tableaux sont bannis d'office. J'avais pas vu que c'était des
tableaux avant de poster (en fait, je parlais du style plus que de
l'implémentation). Pour les roll-over, c'est clair que ça manque.
Pour l'aspect ringard, bah, si ça ne tenais qu'à moi, je laisserai le style
le plus épuré qui soit. Maintenant, les contraites sont dictées par l'appli
elle-même (et l'espace d'affichage qu'elle demande) ainsi que par les
clients (qui eux dépassent le cadre de Happy Days au niveau ringard).

hyper c....t à maintenir comparativement à la même chose en css

M'en serait douté :)
D'ailleurs, j'ai pas l'impression qu'on puisse maintenir quoi que ce soit
avec des tableaux (même en les truffant de styles css). C'est à base de 'on
casse tout et on recommence' à chaque modif.

http://css.alsacreations.com/xmedia/exemples/deroulant/cssmenu3.htm
issu de :

C'est ce que donne Dreamweaver par défaut avec le style Halo. C'est sympa,
mais ça a l'inconvénient que les sous menus n'apparaissent que si on passe
sur un menu. Si on ne sait pas qu'ils existent, on risque fort de passer à
côté. De plus, ca nécessite de prévoir de la place pour eux en dessous du
menu. Autant les afficher directement donc.

<http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal>

Y'a pas de sous-menus. Y'a une navigation en haut et une à droite. Perso, je
trouve ça un peu con. On va en haut ou à droite ? Ou un peu des deux ?
De plus, il semble n'y avoir aucun rapport en le menu de droite et celui du
haut. On pourrait croire qu'en haut, ce sont les menus, et qu'à droite, ce
sont les sous-menus correspondant. Mais quand on clique ailleurs que sur
tutorial, il n'y a plus de menu à droite. Arg, ce n'étaient donc pas des
sous-menus (on s'attendrait à voir le menu de droite partout sinon).
Pire, on clique sur forum, on arrive sur une page dans laquelle le menu du
haut à complètement changé (tutoriel à changé de place, d'autres menus sont
arrivées, certains sont partis). Je suis peut-être ringard, mais cet exemple
je ne le comprends pas du tout. On perd la structure du site à mon sens.

voir Listamatic
http://css.maxdesign.com.au/listamatic2/horizontal04.htm
(et les menu-listes suivants)

Là c'est pas mal. Deux petits points :
- Le menu 'home' n'est pas partout : ça décale tous les autres menus. Du
coup, un double click bien lent sur un menu = on a le menu d'à côté au lieu
de celui choisi.
- Il manque un petit exemple pour montrer ce que ça fait de cliquer sur la
menu-liste suivante : ça enfonce le bouton mais ça va pas plus loin.
J'aurais aimé voir ce qu'ils en auraient fait de cette liste.

visiter Alistapart
http://alistapart.com/topics/code/css/

Tiens, c'est marrant, je suis tombé sur ce site ajourd'hui, et je suis
également tombé à la renverse. Magnifique. Design simple, beau, et enfin
quelques règles de type appliquées à HTML. On dirait du Latex :)

et en particulier :
http://alistapart.com/articles/slidingdoors
http://alistapart.com/articles/slidingdoors2

Ah ces pages sont superbes, vraiment plein de trucs utiles pour quelqu'un
comme moi. J'y trouve que du bonheur.

En tout cas merci pour tous ces conseils et ces liens. Avec plein
d'exemples, j'arriverais sans doute à faire quelque chose de bien, et
peut-être même quelque chose de beau ;)

"ASM" <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> a écrit dans le message
de news: 44896f50$0$844$ba4acef3@news.orange.fr...

http://css.alsacreations.com/xmedia/exemples/deroulant/cssmenu3.htm
issu de :

C'est ce que donne Dreamweaver

C'est ce qui (en css) ressemble le plus à apple comme nanière de
présenter menus et sous menus associés (moins les images)

par défaut avec le style Halo.

Je ne connais pas DW, le peu que j'en ai vu, me laisse à penser que ce
n'est pas un soft à mettre entre toutes les mains.
Trop de fonctionnalités hatchement bonnardes qui peuvent, avec bp de
code inconnu créé par le soft, n'aboutir finalement qu'à un ramassi de
bouillie infâme.

C'est sympa,
mais ça a l'inconvénient que les sous menus n'apparaissent que si on passe
sur un menu.

C'est un exemple :-)
Le propos du site n'est pas de te donner exactement ce que tu veux
(bien que ... dans un coin, m'étonnerai pas qu'on puisse passer
commande?) libre à toi de t'en inspirer et le parfaire.

Si on ne sait pas qu'ils existent,

Ce menu n'est pas tout à fait ce que tu recherches (à ce que je
comprends ?) en fait tu veux du statique.
Je clique sur menu 2 qui m'ouvre la page avec le menu général dont le 2
disabled et ses sous-menus ouverts.

L'exemple ci-dessus te présente tous les sous-menus à la demande et te
permet d'atteindre directement le sous-sous-menu 4.2.3 à partir de la
page 2.1.5 par exemple.

Tu peux t'en inspirer comme methode de mise en forme à partir d'un code
html simple et clair, et si voulu statique, tu zappes tous les styles
:hover.
(sauf ceux permettant le roll-over via css au lieu de JS)

on risque fort de passer à côté.

Quoique tu fasses on risque de passer à côté.

De plus, ca nécessite de prévoir de la place pour eux en dessous du
menu.

Non, les sous-menus peuvent recouvrir la suite si on veut.
(dès qu'on ne survole plus ils disparaissent et ne gènent plus)

<http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal>

Y'a pas de sous-menus.

Non, et on s'en moque, c'est la page expliquant le pourquoi du comment
du menu exemple de ci-dessus et qui propose d'autres exemples (encart
vers le haut-gauche)
Ce n'est pas une page de démo de menu(s).

Y'a une navigation en haut et une à droite.

Wouaye, comme sur les blogs (ainsi qu'en de nombreux sites).

Perso, je trouve ça un peu con.

Là, Fabrice, l'auteur du site va pas z'apprécier le compliment :-)
(a pondu qques articles sur OpenWeb, un bouquin sur les css, et s'occupe
d'autres bricoles)

mais cet exemple je ne le comprends pas du tout.

Pour sûr puisqu'il n'avait d'autre vocation que d'expliciter le
menu-exemple :-)

On perd la structure du site à mon sens.

C'est un peu vrai qu'il a voulu tout faire sur le même lieu ...

voir Listamatic
http://css.maxdesign.com.au/listamatic2/horizontal04.htm
(et les menu-listes suivants)

Là c'est pas mal. Deux petits points :

Moi je trouve ça génial :
tu pars d'une liste html et tu lui fais faire des tas de trucs suivant
que tu lui appliques telle ou telle série de css.
J'imagine que ce genre de fonctionnement doit interresser un développeur

- Le menu 'home' n'est pas partout : ça décale tous les autres menus. Du
coup, un double click bien lent sur un menu = on a le menu d'à côté au lieu
de celui choisi.
- Il manque un petit exemple pour montrer ce que ça fait de cliquer sur la
menu-liste suivante : ça enfonce le bouton mais ça va pas plus loin.
J'aurais aimé voir ce qu'ils en auraient fait de cette liste.

Tu sauvegardes le schmillblick, tu te l'appropries, essaies, complètes,
et tu le domptes :-)

visiter Alistapart
http://alistapart.com/topics/code/css/

Ah ces pages sont superbes, vraiment plein de trucs utiles pour quelqu'un
comme moi. J'y trouve que du bonheur.

Oui, y a de quoi s'occuper qques mns à essayer, comprendre et retenir
toutes les ficelles proposées :-)

En tout cas merci pour tous ces conseils et ces liens. Avec plein
d'exemples, j'arriverais sans doute à faire quelque chose de bien, et
peut-être même quelque chose de beau ;)

C'est tout le mal qu'on peut te souhaiter.


--
Stephane Moriaux et son [moins] vieux Mac