créer un lien qui au survol fera apparaitre un menu depliant ?

Aide générale [Réglé] créer un lien qui au survol fera apparaitre un menu depliant ? Besoin d'aides pour faire cette modif sur le théme sonic

EDN Motivé(e)

Rang

Inscrit le : 30/11/2009 à 12h29

Le 20/02/2010 à 00h53

Bonsoir tout le monde, j'aurai aimer créer un lien qui au survol fera apparaitre un menu dépliant, je suis pas bon en formulation de demandes, donc je vous est fait une belle images avec l'exemple de ce que j'aimerai faire, cliquez ici pour l'exemple de ce que j'aimerai faire.

Merci de votre aide

Toutes l'équipe de easy-design.net sont des personnes très gentils et vraiment très forts

Site web

Gobiel

EDN Motivé(e)

Rang

Inscrit le : 25/10/2009 à 17h01

Messages: 402

Le 20/02/2010 à 11h09

Voilà un tuto: http://img171.imageshack.us/img171/4567/file27502.mp4

Site web

Swan

Administrateur

Rang

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 20/02/2010 à 11h13

Bonjour tony tu peux le faire aussi en dur si tu le veux ^^

Voici le menu de CsN qui se trouve en haut:

Code TPL :

 
<div class="dynamic_menu" style="top: -2px;">
<ul>
<li onmouseover="show_menu('9', 0);" onmouseout="hide_menu(0);">
<h5 class="links"><img src="{PATH_TO_ROOT}/templates/{THEME}/images/theme/mon-icone.png" class="valign_middle" alt="XXX" title="XXX" /> <a href="XXX" alt="XXX" title="XXX">Titre</a></h5>
                    <ul id="smenu9">
<li><a href="../XXX/XXX.php" alt="XXX" title="XXX" style="background-image:url({PATH_TO_ROOT}/templates/{THEME}/images/theme/mon-icone.png);">Lien</a></li>
<li><a href="../XXX/XXX.php" alt="XXX" title="XXX" style="background-image:url({PATH_TO_ROOT}/templates/{THEME}/images/theme/mon-icone.png);">Lien</a></li>
<li><a href="../XXX/XXX.php" alt="XXX" title="XXX" style="background-image:url({PATH_TO_ROOT}/templates/{THEME}/images/theme/mon-icone.png);">Lien</a></li>
<li><a href="../XXX/XXX.php" alt="XXX" title="XXX" style="background-image:url({PATH_TO_ROOT}/templates/{THEME}/images/theme/mon-icone.png);">lien</a></li>
                    </ul>
</li>
 
<li onmouseover="show_menu('l0', 0);" onmouseout="hide_menu(0);">
<h5 class="links"><img src="{PATH_TO_ROOT}/templates/{THEME}/images/theme/mon-icone.png" class="valign_middle"  alt="XXX" title="XXX" /> <a href="XXX" alt="XXX" title="XXX">Titre</a></h5>
                    <ul id="smenul0">
                        <li><a href="../XXX/XXX.php" alt="XXX" title="XXX" style="background-image:url({PATH_TO_ROOT}/templates/{THEME}/images/theme/mon-icone.png);">Lien</a></li>
                        <li><a href="../XXX/XXX.php" alt="XXX" title="XXX" style="background-image:url({PATH_TO_ROOT}/templates/{THEME}/images/theme/mon-icone.png);">Lien</a></li>
                        <li><a href="../XXX/XXX.php" alt="XXX" title="XXX" style="background-image:url({PATH_TO_ROOT}/templates/{THEME}/images/theme/mon-icone.png);">Lien</a></li>
                    </ul>
</li>
</ul>
</div>

Voilà le genre de menu que j'ai posé ^^

Ensuite il te faut le placer dans le header.tpl du thème. Et faire les réglages de placement en css ^^

Merci Gobiel je vais mettre le tuto vidéo dans les extras

swan_signature

Site web

tony

EDN Motivé(e)

Rang

Inscrit le : 30/11/2009 à 12h29

Messages: 345

Le 20/02/2010 à 11h14

Non mais sur le théme sonic il faut passer par le connect_mini.tpl, j'ai essayer par l'administration, on ne peut pas, le lien ce mais pas au bonne endroit.

Ba non, ce n'est pas dans le header.tpl, vu que le menu de basse et dans connect_mini.tpl, je comprend pas swan ?

Sinon, je vous passe le connect_mini.tpl et vous me placer le code ou il faut le mettre cars la j'ai vraiment pas compris, enfin SVP les amis ?

Merci de votre aide ? Edité par tony Le 20/02/2010 à 11h58

Toutes l'équipe de easy-design.net sont des personnes très gentils et vraiment très forts

Site web

tony

EDN Motivé(e)

Rang

Inscrit le : 30/11/2009 à 12h29

Messages: 345

Le 20/02/2010 à 12h36

Merci swan de m'avoir aidé, mais c'est que je comprend pas

Voila le connect_mini.tpl, je le place ou ce code swan :

Code TPL :

 
# IF C_USER_NOTCONNECTED #
 
<script type="text/javascript">
<!--
function check_connect(){
if(document.getElementById('login').value == "") {
alert("{L_REQUIRE_PSEUDO}");
return false;
}
if(document.getElementById('password').value == "") {
alert("{L_REQUIRE_PASSWORD}");
return false;
}
return true;
}
 
-->
</script>
 
<div style="float: left; margin-left:270px;">
<form action="{U_CONNECT}" method="post" onsubmit="return check_connect();" style="text-align:right;display:inline;">
<b>Compte poke-online : </b><input size="15" type="text" id="login" name="login" value="{L_PSEUDO}" class="connect_form" onclick="if( this.value == '{L_PSEUDO}' ) this.value = '';" maxlength="25" />
<input size="15" type="password" id="password" name="password" class="connect_form" value="******" onclick="if( this.value == '******' ) this.value = '';" maxlength="30" />
<input checked="checked" type="checkbox" name="auto" />
<input type="submit" name="connect" value="{L_CONNECT}" class="submit" />
</form>
 
# IF C_USER_REGISTER #
<form action="{U_REGISTER}" method="post" style="display:inline;">
<input type="submit" name="register" value="{L_REGISTER}" class="submit" />
</form>
# ENDIF #
</div>
# ENDIF #
 
 
# IF C_USER_CONNECTED #
<p style="text-align:right;color:#FFFFFF;">
<img src="/upload/mini_fleche.gif" alt="" class="valign_middle" /> <a href="/online/online.php" class="header_link">Membres en ligne</a>&nbsp;
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/admin/members_mini.png" alt="" class="valign_middle" /> <a href="{PATH_TO_ROOT}/member/member{U_USER_ID}" class="header_link">{L_PRIVATE_PROFIL}</a>&nbsp;
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/{IMG_PM}" class="valign_middle" alt="" /> <a href="{U_USER_PM}" class="header_link">{L_NBR_PM}</a>&nbsp;
 
# IF C_ADMIN_AUTH #
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/admin/ranks_mini.png" alt="" class="valign_middle" /> <a href="{PATH_TO_ROOT}/admin/admin_index.php" class="header_link">{L_ADMIN_PANEL} # IF C_UNREAD_ALERT # ({NUMBER_UNREAD_ALERTS}) # ENDIF # </a>&nbsp; 
# ENDIF #
 
# IF C_UNREAD_CONTRIBUTION #
# IF C_KNOWN_NUMBER_OF_UNREAD_CONTRIBUTION #
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/contribution_panel_mini_new.gif" alt="" class="valign_middle" /> <a href="{PATH_TO_ROOT}/member/contribution_panel.php" class="header_link">{L_CONTRIBUTION_PANEL} ({NUM_UNREAD_CONTRIBUTIONS})</a>&nbsp;
# ELSE #
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/contribution_panel_mini_new.gif" alt="" class="valign_middle" /> <a href="{PATH_TO_ROOT}/member/contribution_panel.php" class="header_link">{L_CONTRIBUTION_PANEL}</a>&nbsp;
# ENDIF #
# ELSE #
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/contribution_panel_mini.png" alt="" class="valign_middle" /> <a href="{PATH_TO_ROOT}/member/contribution_panel.php" class="header_link">{L_CONTRIBUTION_PANEL}</a>&nbsp;
# ENDIF #
 
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/admin/home_mini.png" alt="" class="valign_middle" /> <a href="{U_DISCONNECT}" class="header_link">{L_DISCONNECT}</a>
&nbsp;
</p>
# END ENDIF #

Merci Edité par tony Le 20/02/2010 à 12h42

Toutes l'équipe de easy-design.net sont des personnes très gentils et vraiment très forts

Site web

Swan

Administrateur

Rang

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 20/02/2010 à 12h43

Tony, Donne moi l'url de ton site s'il te plait ^^ Car expliquer plus simplement, je ne vois pas comment faire si tu n'y mets pas du tien aussi ...

swan_signature

Site web

tony

EDN Motivé(e)

Rang

Inscrit le : 30/11/2009 à 12h29

Messages: 345

Le 20/02/2010 à 12h49

ok, l'adresse de mon site est www.poke-online.fr, et surtout le lien du menu dépliant j'aimerai le placer exactement au même endroit que cette exemple, deja j'ai placer le lien membre en ligne mais je n'arrive pas a mettre le menu depliant quand on survol membre en ligne, et le lien membre en ligne je les placer dans connect_mini.tpl.

Merci swan Edité par tony Le 20/02/2010 à 13h04

Toutes l'équipe de easy-design.net sont des personnes très gentils et vraiment très forts

Site web

Swan

Administrateur

Rang

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 20/02/2010 à 13h20

Voilà le code complet refait de ton connect_mini.tpl. Essais cela:

Code TPL :

 
 
# IF C_USER_NOTCONNECTED #
 
<script type="text/javascript">
<!--
function check_connect(){
if(document.getElementById('login').value == "") {
alert("{L_REQUIRE_PSEUDO}");
return false;
}
if(document.getElementById('password').value == "") {
alert("{L_REQUIRE_PASSWORD}");
return false;
}
return true;
}
 
-->
</script>
 
<div style="float: left; margin-left:270px;">
<form action="{U_CONNECT}" method="post" onsubmit="return check_connect();" style="text-align:right;display:inline;">
<b>Compte poke-online : </b><input size="15" type="text" id="login" name="login" value="{L_PSEUDO}" class="connect_form" onclick="if( this.value == '{L_PSEUDO}' ) this.value = '';" maxlength="25" />
<input size="15" type="password" id="password" name="password" class="connect_form" value="******" onclick="if( this.value == '******' ) this.value = '';" maxlength="30" />
<input checked="checked" type="checkbox" name="auto" />
<input type="submit" name="connect" value="{L_CONNECT}" class="submit" />
</form>
 
# IF C_USER_REGISTER #
<form action="{U_REGISTER}" method="post" style="display:inline;">
<input type="submit" name="register" value="{L_REGISTER}" class="submit" />
</form>
# ENDIF #
</div>
# ENDIF #
 
 
# IF C_USER_CONNECTED #
<p style="text-align:right;color:#FFFFFF;">
<div class="dynamic_menu" style="top: -2px;">
<ul>
<li onmouseover="show_menu('9', 0);" onmouseout="hide_menu(0);">
<img src="{PATH_TO_ROOT}/upload/mini_fleche.gif" class="valign_middle" alt="XXX" title="XXX" /> <a href="/online/online.php" alt="Membres en ligne" title="Membres en ligne" class="header_link">Membres en ligne</a>&nbsp;
                    <ul id="smenu9">
<li><a href="../XXX/XXX.php" alt="XXX" title="XXX" style="background-image:url({PATH_TO_ROOT}/upload/mini_fleche.gif);">Lien</a></li>
<li><a href="../XXX/XXX.php" alt="XXX" title="XXX" style="background-image:url({PATH_TO_ROOT}/upload/mini_fleche.gif);">Lien</a></li>
<li><a href="../XXX/XXX.php" alt="XXX" title="XXX" style="background-image:url({PATH_TO_ROOT}/upload/mini_fleche.gif);">Lien</a></li>
<li><a href="../XXX/XXX.php" alt="XXX" title="XXX" style="background-image:url({PATH_TO_ROOT}/upload/mini_fleche.gif);">lien</a></li>
                    </ul>
</li>
</ul>
</div>
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/admin/members_mini.png" alt="" class="valign_middle" /> <a href="{PATH_TO_ROOT}/member/member{U_USER_ID}" class="header_link">{L_PRIVATE_PROFIL}</a>&nbsp;
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/{IMG_PM}" class="valign_middle" alt="" /> <a href="{U_USER_PM}" class="header_link">{L_NBR_PM}</a>&nbsp;
 
# IF C_ADMIN_AUTH #
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/admin/ranks_mini.png" alt="" class="valign_middle" /> <a href="{PATH_TO_ROOT}/admin/admin_index.php" class="header_link">{L_ADMIN_PANEL} # IF C_UNREAD_ALERT # ({NUMBER_UNREAD_ALERTS}) # ENDIF # </a>&nbsp; 
# ENDIF #
 
# IF C_UNREAD_CONTRIBUTION #
# IF C_KNOWN_NUMBER_OF_UNREAD_CONTRIBUTION #
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/contribution_panel_mini_new.gif" alt="" class="valign_middle" /> <a href="{PATH_TO_ROOT}/member/contribution_panel.php" class="header_link">{L_CONTRIBUTION_PANEL} ({NUM_UNREAD_CONTRIBUTIONS})</a>&nbsp;
# ELSE #
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/contribution_panel_mini_new.gif" alt="" class="valign_middle" /> <a href="{PATH_TO_ROOT}/member/contribution_panel.php" class="header_link">{L_CONTRIBUTION_PANEL}</a>&nbsp;
# ENDIF #
# ELSE #
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/contribution_panel_mini.png" alt="" class="valign_middle" /> <a href="{PATH_TO_ROOT}/member/contribution_panel.php" class="header_link">{L_CONTRIBUTION_PANEL}</a>&nbsp;
# ENDIF #
 
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/admin/home_mini.png" alt="" class="valign_middle" /> <a href="{U_DISCONNECT}" class="header_link">{L_DISCONNECT}</a>
&nbsp;
</p>
# END ENDIF #

swan_signature

Site web

tony

EDN Motivé(e)

Rang

Inscrit le : 30/11/2009 à 12h29

Messages: 345

Le 20/02/2010 à 13h41

Oui merci sa marche, mais maintenant le menu est complètement sur la gauche (regarder), alors que avant il était au milieu, vous savez de ou sa viens ?

Merci swan Edité par tony Le 20/02/2010 à 13h46

Toutes l'équipe de easy-design.net sont des personnes très gentils et vraiment très forts

Site web

tony

EDN Motivé(e)

Rang

Inscrit le : 30/11/2009 à 12h29

Messages: 345

Le 20/02/2010 à 16h05

Code HTML :

espace = &nbsp;

Et ci je mais des espaces, ba sa pousserai tout vers le milieu, enfin je c'est pas je dit sa mais je c'est même pas ou les mettre les espace ?

Merci swan, je voit que vous resté bloqué sur mon problème, merci beaucoup

Edité par tony Le 20/02/2010 à 16h10

Toutes l'équipe de easy-design.net sont des personnes très gentils et vraiment très forts

Site web

Swan

Administrateur

Rang

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 20/02/2010 à 16h11

Créé moi un compte de connexion en tant que simple membre, s'il te plait... Tu le supprimeras une fois le sujet réglé^^

swan_signature

Site web

tony

EDN Motivé(e)

Rang

Inscrit le : 30/11/2009 à 12h29

Messages: 345

Le 20/02/2010 à 16h14

OK je te créer un compte avec le pseudo : swan et le mot de passe je te l'envoie par message privée.

Merci

Toutes l'équipe de easy-design.net sont des personnes très gentils et vraiment très forts

Site web

Sonic

EDN Erudit(e)

Rang

Inscrit le : 10/09/2009 à 08h56

Messages: 1063

Le 20/02/2010 à 16h18

Humm ou est le lien CsN sur ton thème?

Taxi shuttle aéroports paris
gardiennage sécurité paris et idf
devis eco gratuit
Promenade en mer ota porto
Sécurité gardiennage paris
Location bateau Porto Corse
Devis gratuit gardiennage sécurité

Site web

tony

EDN Motivé(e)

Rang

Inscrit le : 30/11/2009 à 12h29

Messages: 345

Le 20/02/2010 à 16h22

je ne les pas activée, tout simplement !!

Toutes l'équipe de easy-design.net sont des personnes très gentils et vraiment très forts

Site web

Swan

Administrateur

Rang

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 20/02/2010 à 16h24

Merci pour la reconnaissance des webdesigners que nous sommes... Après l'on s'étonne de rester dans l'ombre ! Active le s'il te plait... Je m'identifie .

swan_signature

Site web

Répondre

Vous n'êtes pas autorisé à écrire dans cette catégorie

Les 10 derniers messages du forum...