Navigation [Menu déroulant]

Page 1 sur 2 1, 2  Suivant

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Résolu Navigation [Menu déroulant]

Message par Bella♥ le Mar 9 Aoû 2011 - 19:04

Bonjour.

Je voulais savoir comment faire ceci dans la Barre de Navigation :

Que quand on n'a pas la souris dessus.
Spoiler:

Quand on n'a la souris sur : Profil
Spoiler:

Merci d'avance.

PS ; Ses assez urgents ^^

Bisous


Dernière édition par Bella♥ le Lun 29 Aoû 2011 - 11:07, édité 1 fois

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation [Menu déroulant]

Message par Bella♥ le Mer 10 Aoû 2011 - 21:55

UP

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation [Menu déroulant]

Message par Bella♥ le Jeu 11 Aoû 2011 - 20:40

UP ^^

PS : A partir de demain je serais absente plus d'une semaine. Merci de ne pas fermer mon sujet ^^

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation [Menu déroulant]

Message par Bella♥ le Sam 20 Aoû 2011 - 19:04

UP ^^

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation [Menu déroulant]

Message par Bella♥ le Dim 21 Aoû 2011 - 19:18

UP

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation [Menu déroulant]

Message par Bella♥ le Mar 23 Aoû 2011 - 9:23

UP

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation [Menu déroulant]

Message par Final-Blonde le Mar 23 Aoû 2011 - 9:36

Bonjour,

Dans les "Trucs & Astuces", tu trouves ici différents tutos pour menus déroulants, avec aperçu pour chacun d'entre eux.


Bonne journée.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation [Menu déroulant]

Message par Bella♥ le Mar 23 Aoû 2011 - 16:31

Je l'est vu mais comment le mettre dans la Barre de Navigation ?

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation [Menu déroulant]

Message par Bella♥ le Mer 24 Aoû 2011 - 17:21

UP ^^

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation [Menu déroulant]

Message par mrnaia le Mer 24 Aoû 2011 - 17:23

très interessant... je ne sais pas et j'aimerais bien savoir aussi Wink

mrnaia
***

Féminin
Messages : 120
Inscrit(e) le : 17/08/2011

http://viveekoloko.forumgratuit.org
mrnaia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation [Menu déroulant]

Message par Bella♥ le Ven 26 Aoû 2011 - 12:33

UP

Ps : Assez urgents S'il vous plait.

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation [Menu déroulant]

Message par Final-Blonde le Ven 26 Aoû 2011 - 18:13

Bonjour,

Aujourd'hui je n'aurai absolument pas le temps de voir plus loin, cependant tu peux déjà me dire lequel de ces tutos t'intéresse...

J'essaierai de prendre un moment demain matin.


Bonne fin de journée.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation [Menu déroulant]

Message par Thais3 le Ven 26 Aoû 2011 - 18:31

moi non plus je ne sais pas et j'avoue que sa m'interesse

Thais3
*

Messages : 47
Inscrit(e) le : 24/08/2011

http://ekoloko.forumgratuit.org/
Thais3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation [Menu déroulant]

Message par lulu-la-lumiere le Ven 26 Aoû 2011 - 19:47

j'avoue sa fait jolie Very Happy

lulu-la-lumiere
Nouveau membre

Messages : 16
Inscrit(e) le : 26/08/2011

http://lequotidienekoloko.forumgratuit.org/
lulu-la-lumiere a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation [Menu déroulant]

Message par Bella♥ le Ven 26 Aoû 2011 - 22:22

Le dernier tuto m’intéresse quand on passe la souris dessus. Et sa mets ;D

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation [Menu déroulant]

Message par Thais3 le Sam 27 Aoû 2011 - 13:11

je peux pas voir les tuto moi sa me met : Désolé, mais seuls les utilisateurs avec un accès spécial peuvent lire des sujets dans ce forum.

Thais3
*

Messages : 47
Inscrit(e) le : 24/08/2011

http://ekoloko.forumgratuit.org/
Thais3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation [Menu déroulant]

Message par Final-Blonde le Sam 27 Aoû 2011 - 21:50

Oups pour le retard !

Ah tiens, en effet je ne vois plus l'astuce de ces divers menus...
Là je suis embêtée, très embêtée.

J'ai bien un tel menu sur une de mes pages html, mais il est compliqué parce qu'avec des images pour les boutons, de plus ça date de plus d'un an.
Refaire un tuto simplifié me prendrait trop de temps alors que j'en manque cruellement en ce moment.

Sans rien promettre, je veux bien encore essayer de voir ça demain.
Cela dit, il y en sûrement d'autres qui pourraient vous aider.


Bonne soirée.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation [Menu déroulant]

Message par Bella♥ le Dim 28 Aoû 2011 - 9:27

Très bien ;D

Merci

Ps : Up ^^

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation [Menu déroulant]

Message par Final-Blonde le Dim 28 Aoû 2011 - 19:01

B'soir,

Alors allons y pour un tour.
Ce tuto me parait compliqué, à l'époque (lointaine) c'est ainsi que je l'avais amélioré à ma sauce...
Il te faut savoir que j'aurai beaucoup de peine à faire le suivi de ce tuto (j'essaierai au mieux), alors souhaitons que ça roulé-boulé du premier coup !
Aussi, il te faudra personnaliser toi-même les paramètres de ton menu (surtout le CSS), le mien n'est là qu'à titre d'exemple, ok ?

Tu peux avoir un aperçu sur mon forum-test ici.

Tout d'abord :
Il faudra travailler dans le template "overall_header" (donc être en phpBB2 et fondateur) et dans la feuille de style CSS.
Ensuite, un bon conseil :
Sauvegarder le CSS actuel et ce template dans le bloc-note ou notepad au cas où...

On peut aussi travailler la déco, les effets et tout et tout, en mode "page html", qui permet la prévisualisation.
Dans ce cas de figure, il ne faut pas oublier d'ajouter les balises html pour le css :
Code:
<style type="text/css" media="all">
.css {...
}
</style>
et les balises html pour le script :
Code:
<script type="text/javascript"><!--
function
...
//-->
</script>
Ainsi que, bien sûr, les codes html du menu à la suite.
Voilà en ce qui concerne une page html.

Bon commençons par le CSS :
Dans la feuille de style CSS mets-y ceci :
CORRECTION DU CSS DANS LE MESSAGE PLUS BAS
C'est assez simple à suivre en fonction du html qui suit.

Ensuite dans le template overall-header, juste avant la fermeture de la balise </head> installe le javascript (en laissant quelques lignes d'espace avec ce qui précède) :
Code:
<script type="text/javascript"><!--
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';
}
//-->
</script>
Plus loin dans le même template, cherche cette variable (avec Ctrl+F) :
{GENERATED_NAV_BAR} et juste ça. Supprime et à la suite on y met le html de la nouvelle barre de menus :
Code:
<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><h3>Acceuil</h></dt>
<dd id="smenu1">
<ul>
<li><a href="http://fb-testing.forumactif.com/index.htm" target="_blank">Forum</a></li>
<li><a href="http://fb-testing.forumactif.com/welcome-h11.htm" target="_blank">Accueil</a></li>
<li><a href="http://fb-testing.forumactif.com/faq.htm" target="_blank">FAQ</a></li>
<li><a href="http://fb-testing.forumactif.com/search.forum" target="_blank">Search</a></li>
</ul>
</dd>
</dl>
   
<dl onmouseover="javascript:montre('smenu2');" onmouseout="javascript:cache()">         
<dt><h3>Membres</h></dt>
<dd id="smenu2">
<ul>
<li><a href="http://fb-testing.forumactif.com/memberlist.forum" target="_blank">Membres</a></li>
<li><a href="http://fb-testing.forumactif.com/groupcp.forum" target="_blank">Groupes</a></li>
</ul>
</dd>
</dl>
   
<dl onmouseover="javascript:montre('smenu3');" onmouseout="javascript:cache()">   
<dt><h3>Profil</h></dt>
<dd id="smenu3">
<ul>
<li><a href="http://fb-testing.forumactif.com/profile.forum?mode=editprofile" target="_blank">Infos</a></li>
<li><a href="http://fb-testing.forumactif.com/profile.forum?mode=editprofile&page_profil=preferences" target="_blank">Preferences</a></li>
<li><a href="http://fb-testing.forumactif.com/profile.forum?mode=editprofile&page_profil=avatars" target="_blank">Avatar</a></li>
<li><a href="http://fb-testing.forumactif.com/search.forum?search_id=watchsearch">Watch sujets</a></li>
<li><a href="http://fb-testing.forumactif.com/search.forum?search_id=newposts">New Posts</a></li>
<li><a href="http://fb-testing.forumactif.com/search.forum?search_id=egosearch">My Posts</a></li>
<li><a href="http://fb-testing.forumactif.com/search.forum?search_id=unanswered">0 Reponse</a></li>
<li><a href="http://fb-testing.forumactif.com/profile.forum?mode=viewprofile&u=1" target="_blank">My Profil</a></li>
</ul>
</dd>
 
</dl>
    
<dl onmouseover="javascript:montre('smenu4');" onmouseout="javascript:cache()">   
<dt><h3>Messagerie</h></dt>
<dd id="smenu4">
<ul>
<li><a href="http://fb-testing.forumactif.com/msg.forum?folder=inbox">In Box</a></li>
<li><a href="http://fb-testing.forumactif.com/msg.forum?folder=sentbox">Sended Box</a></li>
<li><a href="http://fb-testing.forumactif.com/msg.forum?folder=outbox">Waiting Box</a></li>
</ul>
</dd>
</dl>
    
<dl onmouseover="javascript:montre('smenu5');" onmouseout="javascript:cache()">   
<dt><h3>Logs</h></dt>
<dd id="smenu5">
<ul>
<li><a href="http://fb-testing.forumactif.com/login.forum?connexion">Log In</a></li>
<li><a href="http://fb-testing.forumactif.com/login.forum?logout=true">Log Out</a></li>
<li><a href="http://fb-testing.forumactif.com/profile.forum?mode=register">Register</a></li>
</ul>
</dd>
</dl>
</div>
</td></tr></tbody></table>
Il va de soi que tu dois y mettre tes liens, c'est juste la procédure qui importe.

Voilààà.


Dernière édition par Final-Blond le Dim 28 Aoû 2011 - 21:09, édité 1 fois (Raison : Correction css dans post plus bas)

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation [Menu déroulant]

Message par Bella♥ le Dim 28 Aoû 2011 - 19:30

Merci ses parfait !

EDIT :

J'aimerais bien aussi mettre des bordures au lien du début

Merci d'avance ;D

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation [Menu déroulant]

Message par Final-Blonde le Dim 28 Aoû 2011 - 20:11

@Bella♥ a écrit:J'aimerais bien aussi mettre des bordures au lien du début
Il faut que tu arrives à reconnaître les intitulés communs entre le CSS et le HTML.
Par exemple pour ce que tu demandes, "dt" est l'intitulé attribué au bouton lui-même (ce n'est pas un lien, juste un titre que tu peux modifier dans le HTML).

En fait, j'avais oublié d'ajouter le "solid" dans le css pour cette bordure...
Donc dans le CSS : #menu dt
la ligne: border: 3px solid grey;

Encore une fois, tous ces paramètres ne sont là qu'à titre d'exemple.

Bonne soirée.

Edit : Ayant été pressée auparavant, j'ai épuré et quelque peu corrigé le CSS. Remplace l'ancien par celui-ci :
Spoiler:
#menu { height: 210px;
}
#menu dl {
float: left;
width: 9em; height: 0em;
}
#menu dt {position: absolut;
cursor: pointer;
text-align: center;
color: #990000;
font-weight: bold;
background-color: #ffffff;
border: 3px solid grey;
padding: 0px 0px 0px 0px;
margin: 1px;
z-index: 4;
}
dd, ul, li {backgroud-color: #ffffff;
padding: 0px;
margin: 0px;
list-style-type: none;
}
#menu dd {background-color: #ffffff;
display: none;
border: 3px solid gray;
padding: 1px 0px 3px 0px;
margin: -16px 0px 34px 0px;
}
#menu li {
text-align: center;
}
#menu li a {
color: #000000;
text-decoration: none;
display: block;
height: 12%;
}
#menu li a:hover, #menu li a:focus {
background-color: #eeeeee;
text-decoration: none !important;
}

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation [Menu déroulant]

Message par Bella♥ le Lun 29 Aoû 2011 - 9:25

Merci ;D Mais je trouve pas mon lien de déconnexion ^^

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation [Menu déroulant]

Message par Final-Blonde le Lun 29 Aoû 2011 - 10:02

Salut,

Le lien de déconnexion est dans le menu "Logs" = "Log Out"

Ah oui ! Si tu trouves les cases du titre des menus trop grandes, enlève les balises <h3>Titre</h> et adapte dans le CSS avec les propriétés du padding dans l'intitulé :
#menu dt {...

Courage.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation [Menu déroulant]

Message par Bella♥ le Lun 29 Aoû 2011 - 10:04

Oui je ses ou ses. Mais mon lien je ne le trouve pas --"

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation [Menu déroulant]

Message par Final-Blonde le Lun 29 Aoû 2011 - 10:30

Dans ce bloc :
Code:
<dd id="smenu5">
<ul>
<li><a href="http://fb-testing.forumactif.com/login.forum?connexion">Log In</a></li>
<li><a href="http://fb-testing.forumactif.com/login.forum?logout=true">Log Out</a></li>
<li><a href="http://fb-testing.forumactif.com/profile.forum?mode=register">Register</a></li>
</ul>
</dd>
Le deuxième <li> dont tu as juste à remplacer l'url par celui de ton forum :
<a href="http://fb-testing.forumactif.com/login.forum?logout=true">Log Out</a>

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation [Menu déroulant]

Message par Bella♥ le Lun 29 Aoû 2011 - 10:37

Merci. Mais sa marche pas ^^

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation [Menu déroulant]

Message par Final-Blonde le Lun 29 Aoû 2011 - 10:42

C'est que tu as dû faire une erreur...
Chez moi, ça m'amène bien à la déconnexion.

Remplace juste ce qui est en rouge barré par la partie de l'adresse de ton forum.

Peux-tu donner un lien, ça pourrait aider à mieux t'aider.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation [Menu déroulant]

Message par Bella♥ le Lun 29 Aoû 2011 - 10:48

Voici le lien que j'ai mit :

http://Bimbo-world.forumactif.com/loginlogout=true

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation [Menu déroulant]

Message par Final-Blonde le Lun 29 Aoû 2011 - 11:00

Tu as mis pour ce lien : http://Bimbo-world.forumactif.com/loginlogout=true

Alors que "S'incrire" par exemple est : http://bimbo-world.forumgratuit.fr/profile.forum?mode=register

C'est pourquoi j'avais dit de remplacer toute la partie de l'url barrée en rouge.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation [Menu déroulant]

Message par Bella♥ le Lun 29 Aoû 2011 - 11:07

Merci ! ;D

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Page 1 sur 2 1, 2  Suivant

Voir le sujet précédent Voir le sujet suivant Revenir en haut


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