[3.0] Menu déroulant au survol du pseudo Facile

Partager sur FacebookPartager sur TwitterPartager sur Google+

[3.0] Menu déroulant au survol du pseudo

[Prosilver]


Menu déroulant au survol du pseudo

Ce tuto permet d'afficher les infos de l'utilisateur dans le mini profil, au survol du pseudo.
C'est une optimisation du code proposé dans l'ancienne doc créée par Léa63. Si vous avez déjà modifié les profils dans votre style, il est conseillé de vous référer à ce message pour mettre le code à jour.

- Partie HTML

Ouvrir viewtopic_body.html

Trouver :
Code: Tout sélectionner
			<dl class="postprofile" id="profile{postrow.POST_ID}">


Remplacer par :
Code: Tout sélectionner
		<div class="postprofile" id="profile{postrow.POST_ID}">

			<ul class="menuderoulant">
				<li><!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.POST_AUTHOR_FULL}</strong><!-- ELSE -->{postrow.POST_AUTHOR_FULL}<!-- 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>
						<!-- IF postrow.U_PM --><li class="pm-icon"><a href="{postrow.U_PM}" title="{L_PRIVATE_MESSAGE}">{L_PRIVATE_MESSAGE}</a></li><!-- ENDIF -->
						<!-- IF postrow.U_EMAIL --><li class="email-icon"><a href="{postrow.U_EMAIL}" title="{L_SEND_EMAIL_USER} {postrow.POST_AUTHOR}">{L_SEND_EMAIL}</a></li><!-- ENDIF -->
						<!-- IF postrow.U_WWW --><li class="web-icon"><a href="{postrow.U_WWW}" title="{L_VISIT_WEBSITE}: {postrow.U_WWW}">{L_WEBSITE}</a></li><!-- ENDIF -->
						<!-- IF postrow.U_MSN --><li class="msnm-icon"><a href="{postrow.U_MSN}" onclick="popup(this.href, 550, 320); return false;" title="{L_MSNM}">{L_MSNM}</a></li><!-- ENDIF -->
						<!-- IF postrow.U_ICQ --><li class="icq-icon"><a href="{postrow.U_ICQ}" onclick="popup(this.href, 550, 320); return false;" title="{L_ICQ}">{L_ICQ}</a></li><!-- ENDIF -->
						<!-- IF postrow.U_YIM --><li class="yahoo-icon"><a href="{postrow.U_YIM}" onclick="popup(this.href, 780, 550); return false;" title="{L_YIM}">{L_YIM}</a></li><!-- ENDIF -->
						<!-- IF postrow.U_AIM --><li class="aim-icon"><a href="{postrow.U_AIM}" onclick="popup(this.href, 550, 320); return false;" title="{L_AIM}">{L_AIM}</a></li><!-- ENDIF -->
						<!-- IF postrow.U_JABBER --><li class="jabber-icon"><a href="{postrow.U_JABBER}" onclick="popup(this.href, 550, 320); return false;" title="{L_JABBER}">{L_JABBER}</a></li><!-- ENDIF -->
					</ul>
					<!-- ENDIF -->
				<!-- ENDIF -->			
				</li>
			</ul>
			<br />

		<dl>
			


Trouver et supprimer :
Code: Tout sélectionner
    <!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.POST_AUTHOR_FULL}</strong><!-- ELSE -->{postrow.POST_AUTHOR_FULL}<!-- ENDIF -->		 


Trouver :
Code: Tout sélectionner
		<!-- 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 -->
			<dd>
				<ul class="profile-icons">
					<!-- IF postrow.U_PM --><li class="pm-icon"><a href="{postrow.U_PM}" title="{L_PRIVATE_MESSAGE}"><span>{L_PRIVATE_MESSAGE}</span></a></li><!-- ENDIF -->
					<!-- IF postrow.U_EMAIL --><li class="email-icon"><a href="{postrow.U_EMAIL}" title="{L_SEND_EMAIL_USER} {postrow.POST_AUTHOR}"><span>{L_SEND_EMAIL_USER} {postrow.POST_AUTHOR}</span></a></li><!-- ENDIF -->
					<!-- IF postrow.U_WWW --><li class="web-icon"><a href="{postrow.U_WWW}" title="{L_VISIT_WEBSITE}: {postrow.U_WWW}"><span>{L_WEBSITE}</span></a></li><!-- ENDIF -->
					<!-- IF postrow.U_MSN --><li class="msnm-icon"><a href="{postrow.U_MSN}" onclick="popup(this.href, 550, 320); return false;" title="{L_MSNM}"><span>{L_MSNM}</span></a></li><!-- ENDIF -->
					<!-- IF postrow.U_ICQ --><li class="icq-icon"><a href="{postrow.U_ICQ}" onclick="popup(this.href, 550, 320); return false;" title="{L_ICQ}"><span>{L_ICQ}</span></a></li><!-- ENDIF -->
					<!-- IF postrow.U_YIM --><li class="yahoo-icon"><a href="{postrow.U_YIM}" onclick="popup(this.href, 780, 550); return false;" title="{L_YIM}"><span>{L_YIM}</span></a></li><!-- ENDIF -->
					<!-- IF postrow.U_AIM --><li class="aim-icon"><a href="{postrow.U_AIM}" onclick="popup(this.href, 550, 320); return false;" title="{L_AIM}"><span>{L_AIM}</span></a></li><!-- ENDIF -->
					<!-- IF postrow.U_JABBER --><li class="jabber-icon"><a href="{postrow.U_JABBER}" onclick="popup(this.href, 550, 320); return false;" title="{L_JABBER}"><span>{L_JABBER}</span></a></li><!-- ENDIF -->
				</ul>
			</dd>
		<!-- ENDIF -->
		<!-- ENDIF -->

		</dl>

Remplacer par :
Code: Tout sélectionner
		</dl>
	</div>



- Partie CSS

Ouvrir common.css et ajouter à la fin du fichier :

Code: Tout sélectionner
/*Menu
-------------------------------------------------- */
.postprofile ul {
	list-style: none;
}

.menuderoulant {
	position: absolute;
	margin-left: 8px;
}

.menuderoulant ul {
	display: none;
}

.menuderoulant ul li {
	width: 170px;
	border-top: 1px solid transparent;
}

.menuderoulant ul li:first-child {
	border: 0;
}

.menuderoulant ul li a:link, .menuderoulant ul li a:visited {
	background-color: #fff;
	height: 1.5em;
	padding: 2px 0;
	text-decoration: none;
	text-align: center;
	display: block;
	border: 1px solid #39C;
}

.menuderoulant ul li a:hover {
	color: #fff;
	background-color: #39C;
}

.menuderoulant li:hover ul {
	display: block;
}

Affichage par défaut.png
Affichage au survol.png


21/02/2014 - modifié par cabot pour modifier la description
11/02/2014 - modifié par Geo pour convertir le sujet en article.
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Rédigé le: 11 Fév 2014 à 03:49
Articles: 18
Noter cet article: 123456 Votants: Aucun
Mots-clés: Menu, déroulant, au, survol, du, pseudo

Retourner vers Styles