Navigation rapide en onglet et menu déroulant

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

  • 0

Résolu Navigation rapide en onglet et menu déroulant

Message par kakale Lun 25 Avr 2011 - 14:25

Bonjour à vous !

Je reviens une nouvelles fois à la charge pour vous demander de l'aide. En effet, je recherche pour mon forum à faire une navigation rapide. Comment devrait-elle être ? Généralement cela serait un onglet qui en passant la souris dessus, dévoile un menu déroulant avec tout les liens.

Pour exemple voici un des forums où j'ai pu voir cette "invention". Mais celui-ci se trouve sur un concurrent : un concurrent.

=> http://imbroglio.x.ooit.fr/index.php [à supprimer si jamais cela fait de la pub...]

Ne m'y connaissant pas en HTML et PhP... Je me demandai si quelqu'un aurait le courage de m'expliquer comment faire ... Je vous remercie toujours par avance pour vos réponses !


Dernière édition par kakale le Ven 6 Mai 2011 - 15:59, édité 1 fois
kakale

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation rapide en onglet et menu déroulant

Message par kakale Mer 27 Avr 2011 - 9:12

Up :s
kakale

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation rapide en onglet et menu déroulant

Message par Invité Mer 27 Avr 2011 - 9:50

Bonjour,

Je n'ai pas trouvé comment réaliser l'exact réplique du code de ce menu. J'ai encore pas mal de choses à apprendre Razz . Cependant, j'ai tenté quelque chose en partant de cette astuce: https://forum.forumactif.com/t186834-scripts-installation-menu-deroulant .
Donc pour le moment, j'ai placé ceci dans une page Html, comme je ne sais pas où vous souhaitez le mettre. Le code donne ceci:
Code:
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>

<style type="text/css" media="screen">
<!--
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
width: 15em;
}
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
-->
</style>
<!-- FIN DU CSS -->

<dl id="menu">
<dt onmouseover="javascript";montre('smenu1');" onclick="javascript";montre();">Navigation rapide</dt>
<dd id="smenu1">
<ul>
<li><a href="url-de-renvoi">Sous-Menu 2.1</a></li>
<li><a href="url-de-renvoi">Sous-Menu 2.2</a></li>
<li><a href="url-de-renvoi">Sous-Menu 2.3</a></li>
</ul>
</dd>
</dl>
Si vous avez un forum test vous pouvez l'installer dans le message d'accueil pour tester. Vous aurez un onglet "navigation rapide" qui fait apparaitre un sous menu au survol. pour cacher le sous menu, cliquez sur "navigation rapide". C'est juste un brouillon pour le moment, je n'ai mis aucune adresse de redirection.
Si vous souhaitez rajouter un menu à coté du premier, il faut ajouter:
<dt onmouseover="javascript";montre('smenu2');" onclick="javascript";montre();">Navigation rapide</dt>
Attention a bien changer le chiffre si vous ajoutez plusieurs onglets supplémentaires.
Pour que ces nouveaux onglets contiennent des sous-menus, il faut ajouter pour chacun d'eux:
<dd id="smenu2">
<ul>
<li><a href="url-de-renvoi">Sous-Menu 2.1</a></li>
<li><a href="url-de-renvoi">Sous-Menu 2.2</a></li>
<li><a href="url-de-renvoi">Sous-Menu 2.3</a></li>
</ul>
</dd>
Attention là encore à bien faire correspondre les chiffres.
Pour ajouter une redirection supplémentaire, ajoutez une ligne à la liste:
<li><a href="url-de-renvoi">Sous-Menu X.X</a></li>
Cordialement.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation rapide en onglet et menu déroulant

Message par kakale Mer 27 Avr 2011 - 19:44

Bonsoir,

merci d'avoir pris la peine de tester cela! Je souhaiterai mettre ce code de tel façon à ce qu'il soit visible sur tout le forum dans un coin et qu'il descende en même temps que celle-ci.

J'imagine que cela représente un temps fou et je me montrerai patiente. Merci une nouvelle fois pour cela.
kakale

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation rapide en onglet et menu déroulant

Message par Invité Jeu 28 Avr 2011 - 12:40

Bonjour,

J'ai repris le code depuis le début. Je vous propose donc d'insérer dans le template overall_header juste avant </head>, le code suivant:
Code:
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<div class="cadre" onclick="javascript:montre();">
<dl id="menu">
<dt onmouseover="javascript:montre('smenu1');">Navigation Rapide</dt>
<dd id="smenu1"><ul>
<li><a href="url-de-renvoi">lien 1</a></li>
<li><a href="url-de-renvoi">lien 2</a></li>
<li><a href="url-de-renvoi">lien 3</a></li>
</ul>
</dd>
</dl></div>
Pour chaque lien que vous souhaitez mettre en plus ajoutez une ligne composée comme ci dessous à la suite des 3 existantes:
<li><a href="url-de-renvoi">lien 3</a></li>
Et ceci dans votre CSS:
Code:
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
width:15em;
}

#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
}
#menu dd {
border: 1px solid gray;
display: none;}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}

.cadre{
width:15em;
border: 1px solid red;
padding: 3px;
list-style-type: none;
position: fixed;}
C'est le CSS de base donné dans l'astuce dont je me suis servie, modifiez le selon vos goûts.

Cordialement.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation rapide en onglet et menu déroulant

Message par kakale Jeu 28 Avr 2011 - 14:08

Merci beaucoup !

Je personnaliserai moi même pas de soucis. Mais comment changer la couleur de la police ? Car il lui faut obligatoirement un fond blanc pour qu'elle apparaisse...

Merci de votre aide !
kakale

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation rapide en onglet et menu déroulant

Message par Invité Jeu 28 Avr 2011 - 14:28

Re,

Dans la feuille CSS, pour changer la couleur de "Navigation rapide" il faut ajouter votre couleur dans #menu dt, exemple avec du blanc:
Code:
#menu dt {
    cursor: pointer;
    margin: 2px 0;;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-weight: bold;
    border: 1px solid gray;
    background: #ccc;
    color:#fff;}
Pour les liens,la couleur est ici:
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
}
Remplacez #000 par le code couleur de votre choix.

Cordialement.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation rapide en onglet et menu déroulant

Message par kakale Jeu 28 Avr 2011 - 15:08

Merci beaucoup, j'avais trouvé juste au moment où vous avez répondu!
A la place de la couleur j'ai mis une image de fond.

Si vous pouviez m'expliquer comment changer la couleur des liens au passage de la souris et faire apparaitre une ombre derrière ce texte.
J'ai trouvé cette ligne :

Code:

#menu li a:hover, #menu dt a:hover
{
}

Je suppose donc que c'est ici qu'il faut changer au passage de la souris?
kakale

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation rapide en onglet et menu déroulant

Message par Invité Dim 1 Mai 2011 - 9:07

Bonjour,

Oui, c’est bien ici qu'il faut ajouter la couleur des liens au survol et l'ombre Very Happy .
Code:
#menu li a:hover, #menu dt a:hover {
color: #code couleur; /*pour le lien survolé*/
text-shadow: 2px 2px 2px #000;/*ombre*/}
Pour l'ombre, je vous laisse ajuster les px de manière à trouver l’épaisseur et le placement qui vous conviennent. Vous pouvez aussi changer la couleur, j'ai mis noir par défaut mais certains gris rendent bien aussi.

Cordialement.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation rapide en onglet et menu déroulant

Message par kakale Dim 1 Mai 2011 - 9:24

Bonjour Isolde !

Merci pour votre il semble marché mais apparemment sur mon forum à moitié.
Est-ce dû au " z-index" ?

Le seul lien affichant la couleur de survol sur le forum est le tout dernier..

Code:
dl, dt, dd, ul, li {
margin: 0;
padding: 2;
list-style-type: none;
z-index:999
}

#menu {
width:15em;
z-index:999
}

#menu dt {
cursor: pointer;
margin: 0px 0;
height: 20px;
line-height: 20px;
text-align: center;
border: 1px solid gray;
z-index:999
}

#menu dd {
border: 1px solid gray;
display: none;
z-index:999}

#menu li {
text-align: center;
font-family: Verdana;
color: #ffffff
font-size: 80%;
z-index:999
}

#menu li a, #menu dt a {
font-size: 75%;
text-decoration: none;
display: block;
border: 0 none;
z-index:999
}

#menu li a:hover, #menu dt a:hover {
color: #BB8888;
text-shadow: 1px 5px 5px #C29B9B;
}
kakale

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation rapide en onglet et menu déroulant

Message par Invité Ven 6 Mai 2011 - 15:44

Bonjour,

Je ne parviens pas à reproduire le problème, pour moi la couleur de survol fonctionne sur tous les liens. Le soucis ne doit pas venir de votre CSS.

Cordialement.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navigation rapide en onglet et menu déroulant

Message par kakale Ven 6 Mai 2011 - 15:59

Merci, dans ce cas je peux clore le sujet et vous remercier pour votre aide !
kakale

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

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