Sorte de menu déroulant ?
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Sorte de menu déroulant ?
- Bonjouuur!
- Spoiler:
Je suis à la recherche d'un code depuis un moment sans réussir à le trouver... Peut être est-ce parce que je lui donne le mauvais nom - ou bien je sais plus chercher, c'possible aussi XD - Pour moi, c'est une sorte de menu déroulant, et voila, ça donne ça:
Quelqu'un saurait m'aider please? ;o;
Merci d'avance à celui qui se donnera cette peine!
Dernière édition par kuro-revolt le Ven 4 Mar 2011 - 20:09, édité 1 fois
Re: Sorte de menu déroulant ?
Bonjour,
Le tutoriel du FdF: https://forum.forumactif.com/t186834-scripts-installation-menu-deroulant.
Faites 3 documents:
le script, le CSS et le menu.
Document 1: le script, il ne faut pas y toucher.
Document 2: la partie CSS gère le style des onglet et le contenu ( a personnaliser):
Document 3: le menu en lui même. Il y a beaucoup de choses à compléter dans cette partie.
Pour ôter un onglet, on enlève:
Pour ôter un sous-menu on enlève:
Pour que les onglets changent au clic et non au survol, on remplace "onmouseover" par "onclick".
Une fois toutes le modifications faites, réunissez vos 3 documents en un seul en les mettant dans l'ordre suivant: le script puis le CSS et enfin le menu. Copiez l'ensemble de ce document et rendez-vous sur votre forum pour le placer ou vous le souaitez.
Pour le placer sous la barre de navigation, dans la rubrique Général cliquez sur Overall_header.
Cherchez ceci:
Pour le placer dans la page d'accueil, panneau d'admin' > Affichage généralité, collez le code complet dans le message d'accueil.
Vous pouvez aussi le mettre dans une page HTML.
Cordialement.
Le tutoriel du FdF: https://forum.forumactif.com/t186834-scripts-installation-menu-deroulant.
Faites 3 documents:
le script, le CSS et le menu.
Document 1: le script, il ne faut pas y toucher.
- 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>
Document 2: la partie CSS gère le style des onglet et le contenu ( a personnaliser):
- Code:
<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 dl {
float: left;
width: 150px;
}
#menu dt {
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
color: #000000;
text-align: center;
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 0px;olid gray;
margin: 0px;
}
#menu dt:hover{
border-bottom: none!important;
}
#menu dd {
display: none;
border: 1px solid gray;
border-top: none!important;}
#menu li {
text-align: center;
background: #ccc;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
color: #000000;
text-align: center;
width: 150px;
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
margin: 0px;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ccc;
padding: 5px;
border: 1px solid gray;
}
-->
</style>
Document 3: le menu en lui même. Il y a beaucoup de choses à compléter dans cette partie.
- Code:
<div id="menu">
<dl>
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
<dd id="smenu1">
<ul>
<li><a href="">Sous-Menu 1.1</a></li>
<li><a href="">Sous-Menu 1.2</a></li>
<li><a href="">Sous-Menu 1.3</a></li>
<li><a href="">Sous-Menu 1.4</a></li>
<li><a href="">Sous-Menu 1.5</a></li>
<li><a href="">Sous-Menu 1.6</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
<dd id="smenu2">
<ul>
<li><a href="">Sous-Menu 2.1</a></li>
<li><a href="">Sous-Menu 2.2</a></li>
<li><a href="">Sous-Menu 2.3</a></li>
<li><a href="">Sous-Menu 2.4</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">[color=orange]Menu 3</dt>
<dd id="smenu3">
<ul>
<li><a href="">Sous-Menu 3.1</a></li>
<li><a href="">Sous-Menu 3.2</a></li>
<li><a href="">Sous-Menu 3.3</a></li>
<li><a href="">Sous-Menu 3.4</a></li>
<li><a href="">Sous-Menu 3.5</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
<dd id="smenu4">
<ul>
<li><a href="">Sous-Menu 4.1</a></li>
<li><a href="">Sous-Menu 4.2</a></li>
<li><a href="">Sous-Menu 4.3</a></li>
</ul>
</dd>
</dl>
</div>
Pour ôter un onglet, on enlève:
- Code:
<dl>
<dt onmouseover="javascript:montre('smenu1');">Nom de l'onglet</dt>
<dd id="smenu1">
<ul>
<li><a href="http://adresse-de-la-page-1">nom de la page 1</a></li>
<li><a href="http://adresse-de-la-page-2">nom de la page 2</a></li>
<li><a href="http://adresse-de-la-page-3">nom de la page 3</a></li>
<li><a href="http://adresse-de-la-page-4">nom de la page 4</a></li>
<li><a href="http://adresse-de-la-page-5">nom de la page 5</a></li>
</ul>
</dd>
</dl>
Pour ôter un sous-menu on enlève:
- Code:
<li><a href="">nom de la page</a></li>
Pour que les onglets changent au clic et non au survol, on remplace "onmouseover" par "onclick".
Une fois toutes le modifications faites, réunissez vos 3 documents en un seul en les mettant dans l'ordre suivant: le script puis le CSS et enfin le menu. Copiez l'ensemble de ce document et rendez-vous sur votre forum pour le placer ou vous le souaitez.
Pour le placer sous la barre de navigation, dans la rubrique Général cliquez sur Overall_header.
Cherchez ceci:
- Code:
td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
</tr>
</table>
Pour le placer dans la page d'accueil, panneau d'admin' > Affichage généralité, collez le code complet dans le message d'accueil.
Vous pouvez aussi le mettre dans une page HTML.
Cordialement.
Invité- Invité
Re: Sorte de menu déroulant ?
- Ça marche en version phpBB3 or not? J'ai vu qu'il fallait accéder aux templates... En tout cas je vous remercie quand même *o* Je vais tenter ça!
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum