Menu déroulant vertiacal / bouton image
Gabriel
-
le hollandais volant Messages postés 5294 Statut Membre -
le hollandais volant Messages postés 5294 Statut Membre -
Bonjour à tous,
Je travaille sous Typepad, et je cherche à mettre en place un menu déroulant vertical à base d'html (éventuellement quelques scripts si je n'ai pas besoin de trop les modifier). Mon souci, c'est que je souhaitais mixer :
- un menu déroulant vertical (2 boutons, qui font apparaître respectivement 2 liens)
- chacun de ces deux boutons est en fait une image (images A et B) dont l'aspect change au passage de la souris (images C et D)
- par contre, les liens qui apparaissent quand on déroule un onglet sont des liens simples, sans image ou fond particulier
Mon souci est que je n'arrive pas à mixer le menu déroulant et le changement d'aspect des boutons. Individuellement, j'ai le code pour chacun, mais j'ai fait de nombreux essais infructueux pour les combiner, en vain.
Y a-t-il une âme charitable pour me proposer une solution ??? Merci par avance à vous tous !
Je travaille sous Typepad, et je cherche à mettre en place un menu déroulant vertical à base d'html (éventuellement quelques scripts si je n'ai pas besoin de trop les modifier). Mon souci, c'est que je souhaitais mixer :
- un menu déroulant vertical (2 boutons, qui font apparaître respectivement 2 liens)
- chacun de ces deux boutons est en fait une image (images A et B) dont l'aspect change au passage de la souris (images C et D)
- par contre, les liens qui apparaissent quand on déroule un onglet sont des liens simples, sans image ou fond particulier
Mon souci est que je n'arrive pas à mixer le menu déroulant et le changement d'aspect des boutons. Individuellement, j'ai le code pour chacun, mais j'ai fait de nombreux essais infructueux pour les combiner, en vain.
Y a-t-il une âme charitable pour me proposer une solution ??? Merci par avance à vous tous !
A voir également:
- Menu déroulant vertiacal / bouton image
- Menu déroulant excel - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Image iso - Guide
- Diagnostic bouton photo - Accueil - Outils
3 réponses
Salut !
Ou en est tu dans le code pour le moment ? As-tu déjà le menu déroulant ? Tu pourrais poster ici le code HTML/CSS ou un lien vers la page ?
Ou en est tu dans le code pour le moment ? As-tu déjà le menu déroulant ? Tu pourrais poster ici le code HTML/CSS ou un lien vers la page ?
Oulà… Je ne connais pas du tout le JavaScripts… Donc le menu fonctionne, c'est déjà ça :-)
Si je comprend bien, lorsque l'utilisateur passe la souris sur l'un des menus (qui se déroule alors), le fond change.
En gros :
menu normal = image 1
menu survolé = image 2
Et tu te demandes si c'est pas plus simple de mettre une image directement sur les liens interieurs ? En fait non, changer le desing (fond) au passage de le souris est très simple en css.
Par contre, dans ton HTML : tu mets « "id="1" », « id="2" », « id="3" ». En html, on ne peut pas commencer les noms d'id par un nombre. je suggères simplement de mettre id="m1" ou n'importe quoi d'autre.
Je me sers de ces "id" dans le CSS. Par contre je dois savoir si j'ai bien compris ce que tu veux… L'effet de survolage est un peu comme là : https://www.alsacreations.com/xmedia/tuto/exemples/menunew/menu4.html ??
Si je comprend bien, lorsque l'utilisateur passe la souris sur l'un des menus (qui se déroule alors), le fond change.
En gros :
menu normal = image 1
menu survolé = image 2
Et tu te demandes si c'est pas plus simple de mettre une image directement sur les liens interieurs ? En fait non, changer le desing (fond) au passage de le souris est très simple en css.
Par contre, dans ton HTML : tu mets « "id="1" », « id="2" », « id="3" ». En html, on ne peut pas commencer les noms d'id par un nombre. je suggères simplement de mettre id="m1" ou n'importe quoi d'autre.
Je me sers de ces "id" dans le CSS. Par contre je dois savoir si j'ai bien compris ce que tu veux… L'effet de survolage est un peu comme là : https://www.alsacreations.com/xmedia/tuto/exemples/menunew/menu4.html ??
je pensais que tu voulais deux case l'une dessous de l'autre, chacune étant déroulant ? un peu comme ici.
si tu possèdes déjà ça et qu'il ne te faux que le CSS pour l'image, c'est bon, je peux te le créer :
il te suffit d'ajouter un "div" autour de chaque bloc avec une classe :
css :
si tu possèdes déjà ça et qu'il ne te faux que le CSS pour l'image, c'est bon, je peux te le créer :
il te suffit d'ajouter un "div" autour de chaque bloc avec une classe :
<div class="menu">
<a href=# onClick="menu(1);">menu1</a>
<DIV id=1></DIV>
</div>
<div class="menu">
<a href=# onClick="menu(2);">menu2</a>
<DIV id=2></DIV>
</div>
<div class="menu">
<a href=# onClick="menu(3);">menu3</a>
<DIV id=3></DIV>
</div>
css :
.menu {
background: url(mon-image.jpg);
}
.menu:hover {
background: url(mon-autre-image.jpg);
}
tu dois placer ce code CSS dans une balise <style></style> qui lui même se trouve dans le <head></head>.
Alors pour le moment j'ai ça :
<html>
<head>
<title>TEST</title>
</head>
<div style="text-align: center;">
<body bgcolor="#FFFFFF">
<SCRIPT LANGUAGE="JavaScript">
var txt=new Array () ;
txt[1]='<a href="page1.htm">test1</a><br><a href="page4.htm">test2</a>';
txt[2]='<a href="page2.htm">test3</a><br><a href="page5.htm">test4</a>';
txt[3]='<a href="page3.htm">test5</a><br><a href="page6.htm">test6</a>';
function menu(id)
{
ref=document.getElementById(id);
if (ref.innerHTML== "")
ref.innerHTML = txt[id];
else
ref.innerHTML= "";
}
</SCRIPT>
<a href=# onClick="menu(1);">menu1</a>
<DIV id=1></DIV>
<a href=# onClick="menu(2);">menu2</a>
<DIV id=2></DIV>
<a href=# onClick="menu(3);">menu3</a>
<DIV id=3></DIV>
</body></div></html>
Qui correspond à un menu vertical 3 boutons faisant apparaître chacun 2 liens. La difficulté pour moi, ce n'est pas le nombre de boutons, mais surtout de transformer le lien texte actuel en un lien image qui change au passage de la souris : le bouton bleu devient vert par exemple.
Au départ, je voulais en fait mettre en place des liens textes avec un fond (background) qui change au passage de la souris, mais je me demande si le bouton "image1/image2" (changement d'image au passage de la souris) n'est pas plus simple que le bouton "lien texte avec image de fond 1/lien texte avec image de fond 2".
Si tu peux m'aider... merci par avance !!!
:-)