Navigation rapide en onglet et menu déroulant
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Navigation rapide en onglet et menu déroulant
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 !
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 - 17:59, édité 1 fois
Re: Navigation rapide en onglet et menu déroulant
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 . 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:
Si vous souhaitez rajouter un menu à coté du premier, il faut ajouter:
Pour que ces nouveaux onglets contiennent des sous-menus, il faut ajouter pour chacun d'eux:
Pour ajouter une redirection supplémentaire, ajoutez une ligne à la liste:
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 . 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 souhaitez rajouter un menu à coté du premier, il faut ajouter:
Attention a bien changer le chiffre si vous ajoutez plusieurs onglets supplémentaires.<dt onmouseover="javascript";montre('smenu2');" onclick="javascript";montre();">Navigation rapide</dt>
Pour que ces nouveaux onglets contiennent des sous-menus, il faut ajouter pour chacun d'eux:
Attention là encore à bien faire correspondre les chiffres.<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>
Pour ajouter une redirection supplémentaire, ajoutez une ligne à la liste:
Cordialement.<li><a href="url-de-renvoi">Sous-Menu X.X</a></li>
Invité- Invité
Re: Navigation rapide en onglet et menu déroulant
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.
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.
Re: Navigation rapide en onglet et menu déroulant
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:
Cordialement.
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>
Et ceci dans votre CSS:<li><a href="url-de-renvoi">lien 3</a></li>
- 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;}
Cordialement.
Invité- Invité
Re: Navigation rapide en onglet et menu déroulant
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 !
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 !
Re: Navigation rapide en onglet et menu déroulant
Re,
Dans la feuille CSS, pour changer la couleur de "Navigation rapide" il faut ajouter votre couleur dans #menu dt, exemple avec du blanc:
Cordialement.
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;}
Remplacez #000 par le code couleur de votre choix.#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
}
Cordialement.
Invité- Invité
Re: Navigation rapide en onglet et menu déroulant
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 :
Je suppose donc que c'est ici qu'il faut changer au passage de la souris?
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?
Re: Navigation rapide en onglet et menu déroulant
Bonjour,
Oui, c’est bien ici qu'il faut ajouter la couleur des liens au survol et l'ombre .
Cordialement.
Oui, c’est bien ici qu'il faut ajouter la couleur des liens au survol et l'ombre .
- Code:
#menu li a:hover, #menu dt a:hover {
color: #code couleur; /*pour le lien survolé*/
text-shadow: 2px 2px 2px #000;/*ombre*/}
Cordialement.
Invité- Invité
Re: Navigation rapide en onglet et menu déroulant
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..
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;
}
Re: Navigation rapide en onglet et menu déroulant
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.
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.
Invité- Invité
Re: Navigation rapide en onglet et menu déroulant
Merci, dans ce cas je peux clore le sujet et vous remercier pour votre aide !
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum