script Menu déroulant au survol du pseudo

[pierre du 31]

Bonjours, j'ai trouver une astuce sur un autre forum et je souhaiterais savoir si cela est possible de la modifier pour forumactif?

Voici le lien: http://forums.phpbb-fr.com/documentation-phpbb3/sujet181443.html

[pierre du 31]

up

[pierre du 31]

up

[Katsu]

J'ai trouvé comment le modifier pour forumactif.
Juste un hic, il n'y a que "Profile", "Message privé" et "E-mail"

Repérer et supprimer:

Code:

<strong>{postrow.displayed.POSTER_NAME}</strong>

Juste après ceci:

Code:

<span class="name"><a name="{postrow.displayed.U_POST_ID}"></a></span><br />

Mettre:

Code:

<dd>
                  <!-- IF not S_IS_BOT and S_USER_LOGGED_IN --><div id="profil"><!-- ENDIF -->
                      <ul id="menuDeroulant">
                      <li>
                  <!-- IF not S_IS_BOT and S_USER_LOGGED_IN --><ul class="Menu"><!-- ENDIF -->
                  <!-- IF not S_IS_BOT and  not S_USER_LOGGED_IN --><ul class="Menu2"><!-- ENDIF -->
                  <!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.displayed.POSTER_NAME}</strong>
                  <!-- IF not S_IS_BOT and S_USER_LOGGED_IN --></ul><!-- ENDIF -->
                  <!-- IF not S_IS_BOT and  not S_USER_LOGGED_IN --></ul><!-- ENDIF -->
                  <!-- IF not S_IS_BOT -->
                  <!-- IF postrow.U_PM or postrow.U_EMAIL or postrow.U_WWW or postrow.U_MSN or postrow.U_ICQ or postrow.U_YIM or postrow.U_AIM or postrow.U_JABBER -->
                        <ul class="sousMenu">
                          <li class="profile-icon"><span>{postrow.displayed.PROFILE_IMG}</span></li>
                  <!-- IF postrow.U_PM --><li class="pm-icon"><span>{postrow.displayed.PM_IMG}</span></li><!-- ENDIF -->
                  <!-- IF postrow.U_EMAIL --><li class="email-icon">{postrow.displayed.EMAIL_IMG}</li><!-- ENDIF -->
                 
                        </ul>

                      </li>
                      </ul>
                <!-- IF not S_IS_BOT and S_USER_LOGGED_IN --></div><!-- ENDIF -->
                      </dd>
                  <br />
                  <!-- ENDIF -->
            <!-- ENDIF --><br />

Repérer et supprimer ceci:

Code:

<table border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td valign="middle">
                  {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
               </td>
            </tr>
         </table>

En CSS mettre ceci:

Code:

/* General proSilver Markup Styles
    ---------------------------------------- */
    /*Menu
    -------------------------------------------------- */
    #profil
    {
    position: absolute;
    z-index: 999;
    }
    #menuDeroulant
    {
    width: 160px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
    top: 0;
    left: 0;
    }
    #menuDeroulant li
    {
    float: left;
    width: 160px;
    margin: 0;
    padding: 0;
    border: 0;
    }
    #menuDeroulant .sousMenu
    {
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
    }
    #menuDeroulant .sousMenu li
    {
    float: none;
    margin: 0;
    padding: 0;
    border: 0;
    width: 159px;
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
    }

    #menuDeroulant .Menu
    {
    display: block;
    height: 1%;
    margin: 0;
    padding: 0;
    text-decoration: none;
    text-align: left;
    }

    #menuDeroulant .Menu2 {

    display: block;
    height: 1%;
    margin: 0;
    padding: 4px 8px;
    text-decoration: none;
    text-align: left;
    }

    #menuDeroulant .sousMenu li a:link,
    #menuDeroulant .sousMenu li a:visited
    {
    display: block;
    height: 1.5em;
    margin: 0;
    padding: 5px 0 0 0;
    border: 1px solid #000;
    text-decoration: none;
    color: #000;
    background-color: #fff;
    text-align: center;
    }
    #menuDeroulant .sousMenu li a:hover
    {
    color: #fff;
    background-color: #3399cc;
    }

    #menuDeroulant li:hover > .sousMenu { display: block; }

Et modifier ce que vous souhaitez dans le CSS !
Je n'ai pas modifié le CSS car c'est pas trop mon truc ^^'
Donc si vous trouvez quelque chose de meilleur !

Et sii vous trouvez comment afficher "www", "MSN" Etc ...
N'hésitez pas

Voilà j'espère que je vous ai aidés !

[pierre du 31]

Une question, quel tempate faut il modifier? Car là ?

[pierre du 31]

J'ai trouver le bon template, mais cela ne fonctionne pas, a l'enregistrement du template ça me met

Code:

 Erreur

La balise a été fermée avant d'avoir été ouverte ou la balise n'a pas été ouverte.

[pierre du 31]

up

[Katsu]

Chez moi cela fonctionne très bien.
Essayez de refaire la manipulation.
Pourriez vous afficher votre template (viewtopic_body) et votre CSS ?

[pierre du 31]

Pour ce qui est de la troisième partie (le code a mettre) faut-il modifier les mots style "menu" ????

[Katsu]

Non non ! Il ne faut pas toucher !
Si cela vous dérange mettez ceci:

Code:

#profil
    {
    position: absolute;
    z-index: 999;
    }
    #menuDeroulant
    {
    width: 160px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
    top: 0;
    left: 0;
    }
    #menuDeroulant li
    {
    float: left;
    width: 160px;
    margin: 0;
    padding: 0;
    border: 0;
    }
    #menuDeroulant .sousMenu
    {
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
    }
    #menuDeroulant .sousMenu li
    {
    float: none;
    margin: 0;
    padding: 0;
    border: 0;
    width: 159px;
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
    }
 
    #menuDeroulant .Menu
    {
    display: block;
    height: 1%;
    margin: 0;
    padding: 0;
    text-decoration: none;
    text-align: left;
    }
 
    #menuDeroulant .Menu2 {
 
    display: block;
    height: 1%;
    margin: 0;
    padding: 4px 8px;
    text-decoration: none;
    text-align: left;
    }
 
    #menuDeroulant .sousMenu li a:link,
    #menuDeroulant .sousMenu li a:visited
    {
    display: block;
    height: 1.5em;
    margin: 0;
    padding: 5px 0 0 0;
    border: 1px solid #000;
    text-decoration: none;
    color: #000;
    background-color: #fff;
    text-align: center;
    }
    #menuDeroulant .sousMenu li a:hover
    {
    color: #fff;
    background-color: #3399cc;
    }
 
    #menuDeroulant li:hover > .sousMenu { display: block; }

[pierre du 31]

ça fonctionne!

Pour ce qui est du site web, je pense a un truc du gens web et web-icon

[pierre du 31]

c'est bon, ça fonctionne! j'ai trouver pour ajouter les site, je vais essayer avec d'autres!

[pierre du 31]

Script final :

Code:

<ul id="menuDeroulant">
                      <li>
                  <!-- IF not S_IS_BOT and S_USER_LOGGED_IN --><ul class="Menu"><!-- ENDIF -->
                  <!-- IF not S_IS_BOT and  not S_USER_LOGGED_IN --><ul class="Menu2"><!-- ENDIF -->
                  <!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.displayed.POSTER_NAME}</strong>
                  <!-- IF not S_IS_BOT and S_USER_LOGGED_IN --></ul><!-- ENDIF -->
                  <!-- IF not S_IS_BOT and  not S_USER_LOGGED_IN --></ul><!-- ENDIF -->
                  <!-- IF not S_IS_BOT -->
                  <!-- IF postrow.U_PM or postrow.U_EMAIL or postrow.U_WWW or postrow.U_MSN or postrow.U_ICQ or postrow.U_YIM or postrow.U_AIM or postrow.U_JABBER -->
                        <ul class="sousMenu">
                          <li class="profile-icon"><span>{postrow.displayed.PROFILE_IMG}</span></li>
                  <!-- IF postrow.U_PM --><li class="pm-icon"><span>{postrow.displayed.PM_IMG}</span></li><!-- ENDIF -->
                  <!-- IF postrow.U_EMAIL --><li class="email-icon">{postrow.displayed.EMAIL_IMG}</li><!-- ENDIF -->
                    <!-- IF postrow.U_WWW --><li class="www-icon">{postrow.displayed.WWW_IMG}</li><!-- ENDIF -->
                    <!-- IF postrow.U_AIM --><li class="aim-icon">{postrow.displayed.AIM_IMG}</li><!-- ENDIF --> 
                      <!-- IF postrow.U_ICQ --><li class="icq-icon">{postrow.displayed.ICQ_IMG}</li><!-- ENDIF -->
                      <!-- IF postrow.U_MSNM --><li class="msnm-icon">{postrow.displayed.MSNM_IMG}</li><!-- ENDIF -->
                        <!-- IF postrow.U_YIM --><li class="yim-icon">{postrow.displayed.YIM_IMG}</li><!-- ENDIF -->
                        <!-- IF postrow.U_SKYPE --><li class="skype-icon">{postrow.displayed.SKYPE_IMG}</li><!-- ENDIF -->
                        </ul>
 
                      </li>
                      </ul>
                <!-- IF not S_IS_BOT and S_USER_LOGGED_IN --></div><!-- ENDIF -->
                      </dd>
                 

                  <!-- ENDIF -->
            <!-- ENDIF -->


Css :

Code:


/* General proSilver Markup Styles
    ---------------------------------------- */
    /*Menu
    -------------------------------------------------- */
    #profil
    {
    position: absolute;
    z-index: 999;
    }
    #menuDeroulant
    {
    width: 160px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
    top: 0;
    left: 0;
    }
    #menuDeroulant li
    {
    float: left;
    width: 160px;
    margin: 0;
    padding: 0;
    border: 0;
    }
    #menuDeroulant .sousMenu
    {
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
    }
    #menuDeroulant .sousMenu li
    {
    float: none;
    margin: 0;
    padding: 0;
    border: 0;
    width: 159px;
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
    }
 
    #menuDeroulant .Menu
    {
    display: block;
    height: 1%;
    margin: 0;
    padding: 0;
    text-decoration: none;
    text-align: left;
    }
 
    #menuDeroulant .Menu2 {
 
    display: block;
    height: 1%;
    margin: 0;
    padding: 4px 8px;
    text-decoration: none;
    text-align: left;
    }
 
    #menuDeroulant .sousMenu li a:link,
    #menuDeroulant .sousMenu li a:visited
    {
    display: block;
    height: 1.5em;
    margin: 0;
    padding: 5px 0 0 0;
    border: 0px solid #000;
    text-decoration: none;
    color: #000;
    background-color: ;
    text-align: center;
    }
    #menuDeroulant .sousMenu li a:hover
    {
    color: ;
    background-image: url();
    }
 
 
    #menuDeroulant li:hover > .sousMenu { display: block; }

[Katsu]

Ah bah oui ! J'y avais pas pensé ^^ ! Je pense que le sujet est donc résolu non ?

[pierre du 31]

oui ^^