Aide menu déroulant
SOS-FORUM.com
     

Derniers sujets

» ATLANTIC CITY - rpg city
par Solitude 15/3/2017, 10:41

» Bonne Année 2015
par Chantra Chantrapa 5/3/2017, 20:31

» Rio de Janeiro
par Solitude 14/9/2015, 15:34

» Bon Anniversaire Zeco
par Laurent 29/5/2015, 06:29

» Plateforme d'affiliation Afflight
par Landry85 5/5/2015, 10:04


Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

Voir le sujet précédent Voir le sujet suivant Aller en bas  Message [Page 1 sur 1]

1 Aide menu déroulant le 11/11/2011, 13:10

avatar
pierre31
(Membre)
Voir le profil de l'utilisateur
Bonjours, j'ai installer le menu déroulant se trouvant sur ce forum, mais j'aimerai mettre des image a la place de l'écriture!

2 Re: Aide menu déroulant le 11/11/2011, 13:17

avatar
Final-Blonde
Staff du forum
Voir le profil de l'utilisateur http://sansfil.forumactif.com/
Bonjour Pierre,

Tu veux sans toute parler de ce tuto (c'est plus clair de s'y retrouver en mettant le lien du tuto), n'est-ce pas ?

Quand tu dis que tu aimerais mettre des images à la place du texte, tu parles des titres des menus ou des sous-menus ?

3 Re: Aide menu déroulant le 11/11/2011, 16:45

avatar
pierre31
(Membre)
Voir le profil de l'utilisateur
Des titres des menu et des sous menu, les 2!

4 Re: Aide menu déroulant le 11/11/2011, 17:21

avatar
Final-Blonde
Staff du forum
Voir le profil de l'utilisateur http://sansfil.forumactif.com/
Pfiou !
Tu peux me donner deux url (un pour les titres et un pour les sous-menus) de tes images ?
Tu es conscient qu'il vaut mieux qu'elles soient au format png et qu'elles aient la même taille ?

6 Re: Aide menu déroulant le 11/11/2011, 21:53

avatar
Final-Blonde
Staff du forum
Voir le profil de l'utilisateur http://sansfil.forumactif.com/
Ok, je l'ai testé dans le message d'accueil. Toi tu peux le placer où tu veux bien sûr.

Donc le script en premier, dans >> Modules > Gestion des javascripts :
function montre(id)
{
var d = document.getElementById(id);
d.style.display='block';
}
function cache()
{
document.getElementById('smenu1').style.display='none';
}
En bleu la partie que tu ajoutes à autant de sous-menus que tu as et qui dans le HTML doivent concorder.

Dans le HTML où tu le veux :
Code:
<table  border="0" cellpadding="0" cellspacing="0" align="center">
<tr><td align="center">
<div id="menu">
<dl onmouseover="javascript:montre('smenu1');" onmouseout="javascript:cache()">
<dt><img src="http://i44.servimg.com/u/f44/14/64/74/74/sansre10.png" alt="blabla" /></dt>
<dd id="smenu1">
<ul>
<li><a href="http://url-votre-forum.com/index.htm"><img src="http://i44.servimg.com/u/f44/14/64/74/74/sansre11.png" alt="blabla" /></a></li>
</ul>
</dd>
</dl>
</div>
</td></tr></table>

Et enfin dans le CSS :
Spoiler:
#menu {
height: 133px;
width: auto;
margin: 0 auto;
}
#menu dl {
position: relative;
float: left;
width: 13%;
margin: 0 auto;
}
#menu dt {
display: block;
top: 0px;
left: 0px;
width: 95px;
height: 26px;
margin: 0 3px 2px 0px;
cursor: pointer;
z-index: 1;
}
#menu dt:hover {
/*proprietes du hover sur la partie titre*/
}
dd, ul, li {
padding: 0px;
margin: 0px;
}
#menu dd {
display: none;
}
#menu li {
display: block;
}
#menu li a img {
width: 95px;
height: 25px;
margin: 0 0 26px 0px;
z-index: 1;
}
#menu li a img:hover {
/*proprietes du hover sur la partie sous menus*/
}

Jepense qu'en t'aidant du tuto, tu sauras comment ajouter d'autres sous-menus.

Bien du plaisir et n'hésite pas si tu as des questions.

7 Re: Aide menu déroulant le 12/11/2011, 00:44

avatar
pierre31
(Membre)
Voir le profil de l'utilisateur
Dois-je supprimer le premier javascript?

8 Re: Aide menu déroulant le 12/11/2011, 00:47

avatar
Final-Blonde
Staff du forum
Voir le profil de l'utilisateur http://sansfil.forumactif.com/
Nope.
Supprime uniquement les sous-menus que tu n'utilises pas, ou tu en ajoutes autant que tu veux.

9 Re: Aide menu déroulant le 12/11/2011, 00:58

avatar
pierre31
(Membre)
Voir le profil de l'utilisateur
J'ai essayer, mais ça ne fonctionne pas! Désolé! Je veux juste ajouter une image a chaque menu et sous menu! apres là, j'ai essayer 4/5 fois, rien a faire.

10 Re: Aide menu déroulant le 12/11/2011, 01:12

avatar
Final-Blonde
Staff du forum
Voir le profil de l'utilisateur http://sansfil.forumactif.com/
Peux-tu donner le HTML entre les balises BBcode "code" et l'endroit où tu as mis le menu ?
Aussi le script et le CSS.
Je regarderai ça demain.

Comme chez moi ça fonctionnait parfaitement, il faut aussi essayer et chercher un peu par toi-même afin de pouvoir le modifier.
Fais des tests et tout et tout...
Ce n'est pas comme en cours de chimie, rien n'explosera ! Very Happy

11 Re: Aide menu déroulant le 12/11/2011, 01:37

avatar
pierre31
(Membre)
Voir le profil de l'utilisateur
Ce que j'vais mis au départ!


Spoiler:
ceci dans template ==> génral ==> overall_header
Code:
<td align="{MENU_POSITION}"{MENU_NOWRAP}><table  border="0" cellpadding="0" cellspacing="0" align="center">
<tbody><tr>
<td align="center"> <div id="menu">

<dl onmouseover="javascript:montre('smenu1');" onmouseout="javascript:cache()">
<dt>Accueil</dt>
<dd id="smenu1">
<ul>
<li><a href="http://discutions-en-france.forumgratuit.org/">Forum</a></li>
<li><a href="http://discutions-en-france.forumgratuit.org/" target="_blank">FAQ</a></li>
<li><a href="http://discutions-en-france.forumgratuit.org/">Search</a></li>
</ul>
</dd>
</dl>
 
<dl onmouseover="javascript:montre('smenu2');" onmouseout="javascript:cache()">       
<dt>Membres</dt>
<dd id="smenu2">
<ul>
<li><a href="http://discutions-en-france.forumgratuit.org/memberlist.forum" target="_blank">Membres</a></li>
<li><a href="http://discutions-en-france.forumgratuit.org/groupcp.forum" target="_blank">Groupes</a></li>
</ul>
</dd>
</dl>
 
<dl onmouseover="javascript:montre('smenu3');" onmouseout="javascript:cache()"> 
<dt>Profil</dt>
<dd id="smenu3">
<ul>
<li><a href="http://discutions-en-france.forumgratuit.org/profile.forum?mode=editprofile">Infos</a></li>
<li><a href="http://discutions-en-france.forumgratuit.org/profile.forum?mode=editprofile&page_profil=preferences" target="_blank">Preferences</a></li>
<li><a href="http://discutions-en-france.forumgratuit.org/profile.forum?mode=editprofile&page_profil=avatars" target="_blank">Avatar</a></li>
<li><a href="http://discutions-en-france.forumgratuit.org/search.forum?search_id=watchsearch">Sujets srveillés</a></li>
<li><a href="http://discutions-en-france.forumgratuit.org/search.forum?search_id=egosearch">Mes favoris</a></li>
</ul>
</dd>
 
</dl>
   
<dl onmouseover="javascript:montre('smenu4');" onmouseout="javascript:cache()"> 
<dt>Messagerie</dt>
<dd id="smenu4">
<ul>
<li><a href="http://discutions-en-france.forumgratuit.org/msg.forum?folder=inbox" target="_blank">Boite de réception</a></li>
<li><a href="http://discutions-en-france.forumgratuit.org/msg.forum?folder=sentbox" target="_blank">Messages envoyés</a></li>
<li><a href="http://discutions-en-france.forumgratuit.org/msg.forum?folder=outbox" target="_blank">boite d'envoi</a></li>
</ul>
</dd>
</dl>
   
<dl onmouseover="javascript:montre('smenu5');" onmouseout="javascript:cache()"> 
<dt>Logs</dt>
<dd id="smenu5">
<ul>
<li><a href=http://discutions-en-france.forumgratuit.org/login.forum?connexion">connection</a></li>
<li><a href="http://discutions-en-france.forumgratuit.org/login.forum?logout=true">déconnection</a></li>
<li><a href="http://discutions-en-france.forumgratuit.org/profile.forum?mode=register">Senregistrer</a></li>
</ul>
</dd>
</dl>
</div>
</td></tr></tbody></table>


css:
Code:
#menu { height: 190px;
}
#menu dl {
float: left;
width: 9em; height: 0em;
}
#menu dt {
cursor: pointer;
text-align: center;
color: #1212E8;
background: ##CECECE url('http://url_image.png') top left repeat-x;
border: ? ? #F00909;
padding: left;left//
margin-right: 5px;
z-index: 3;
}
#menu dt:hover {à vous de voir !;
}
dd, ul, li {
padding: 2px;
margin: 2x;
}
#menu dd {
z-index: 4;
background: #color url('http://url-image.png') top left repeat-x;
display: none;
border: 2px 2 #E81212;
padding: 2px 2px 2px 2px;
margin: -1px 2px 34px 2px;left//
}
#menu li {
padding: 2px 2px 2px 2px;
}
#menu li a {
color: #F00909;
text-align: center;
display: block;
height: 12%;
}
#menu li a:hover

javascript
Code:
function montre(id)
{
var d = document.getElementById(id);
d.style.display='block';
}
function cache()
{
document.getElementById('smenu1').style.display='none';
document.getElementById('smenu2').style.display='none';
document.getElementById('smenu3').style.display='none';
document.getElementById('smenu4').style.display='none';
document.getElementById('smenu5').style.display='none';
document.getElementById('smenu6').style.display='none';
}

Ensuite j'ai tout supprimer et remis a la normale!!!

12 Re: Aide menu déroulant le 12/11/2011, 21:00

avatar
Final-Blonde
Staff du forum
Voir le profil de l'utilisateur http://sansfil.forumactif.com/
En gros, le tuto que je t'ai fourni plus haut a été réalisé pour rien ?!

N'importe quel tuto prend du temps.
Je l'installe, le positionne, le style, cherche à ce qu'il fonctionne au pixel près.

Réessaie avec ce que je t'ai mis plus haut.
Ainsi je ne peux pas t'aider plus.

Si tu bloques quelque part, alors expose bien le problème et laisse les chose en l'état pour que nous puissions le corriger ensemble, ok ?

13 Re: Aide menu déroulant le 13/11/2011, 00:04

avatar
pierre31
(Membre)
Voir le profil de l'utilisateur
Merci, je vais me débrouiller!


Contenu sponsorisé

Voir le sujet précédent Voir le sujet suivant Revenir en haut  Message [Page 1 sur 1]

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum

 
  •  

Créer un forum | © PunBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit