Bonjour,

J'ai un script pour une barre de menu en css et html, mais impossible de savoir où le placer dans un template, et j'ai fouillé, trituré, bref, ça ne le fait nulle part.

Spoiler:

Le voici tel qu'il est dans une page HTML.

Mais dans le template overall_header_new même dans une table, le fond de page disparait ainsi que la couleur de fond......


Merci.

Hello,

Ayé j'ai corrigé et j'ai dû changer de navigateur^^


Merci à toi.

EDIT : Ah oui, ça devrait donner ça

Hum, OK, je vois. Regarde dans le code CSS qui va avec :

body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}

Le menu utilise un attribut "body", hors, le forum utilise ce même attribut pour le fond de page...
Essaye de remplacer tous les "body" de ton code (CSS+Menu) par autre chose, genre "bodymenu"

ze_chaofan a écrit:Essaye de remplacer tous les "body" de ton code (CSS+Menu) par autre chose, genre "bodymenu"

Euh, il n'y en a qu'un de "body" c'est ça ?
Ou il faut aussi modifier tous les menu ?



EDIT : Oh ça le fait ZE, juste en modifiant le "body" du CSS !
Arf, maké shame on me...


Merci beaucoup ze_magicien !

Oui ça fonctionne comme tu le dis et il n'y a qu'un "body".

J'ai résolu pour moi.

Mais si ça intéresse quelqu'un, ce n'est pas mon tuto (mais du FDF), et il suffit de modifier l'adresse du forum après le http:// dans les liens de renvoi, les catégories seront déjà là.
Bien sûr les images ou les couleurs de fond, les couleurs, ET la modif du body en bodymenu au début du css.

Il se met en toute fin du template overall_header_new pour l'avoir en barre de menu.

Voilà.

Pas mal ce script

Hello Laurent,

Laurent a écrit:Pas mal ce script

Mouais il est pas mal, mais il n'est pas abouti...
- D'abord l'erreur dans le css que ZE a corrigée.
- Maintenant je cherche (avec ProgVal) comment fermer la dernière fenêtre une fois le curseur passé ou en cliquant en dehors de la barre.
Deux tares de taille.

Dès que ça sera réglé, on pourra dire que c'est un script viable, au moins ça...

final-blond a écrit:Dès que ça sera réglé, on pourra dire que c'est un script viable, au moins ça...

C'est réglé grâce à ze_chaofan et surtout au script abouti et efficace de ProgVal.
La barre de menus est vraiment chouette et pourrait être mise dans les astuces avec à l'origine de Alexarbitre du FdF.
Je n'en suis même pas vraiment sûre parce que le script est de ProgVal et sans la fermeture des fenêtres une fois le passge du curseur, je ne vois pas comment cette barre pouvait être utile ? Comme pour le "body" au lieu du "menubody" du css qui lui supprimait le fond de la page^^
Bon je laisse aux admins la décision de l'endoit où placer ce tuto, mais comme il en intéresse plus d'un (Laurent et moi), je mets ici le tout corrigé et en tuto :

Tout d'abord le javascript et le css sont à placer en phpBB2 dans le template overall_header_new juste avant

Code:

</head>

en laissant quelques interlignes avec le dessus pour le retrouver facilement en cas de mofications (du css surtout).

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';
}
//-->
</script>

de ProgVal
Si vous voulez ajouter un menu ou une case, il vous suffit de continuer la numérotation après

document.getElementById('smenu5').style.display='none';

Le CSS est à placer juste à la suite du javascript, donc toujours avant la balise "/head".

Code:

<style type="text/css" media="screen">
<!--
bodymenu {
margin: 0;
padding: 0;
background: white;
font-family: verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu dl {
float: left;
width: 8em;
}
#menu dt {
cursor: pointer;
text-align: center;
color: #ffffff;
font-weight: bold;
background-color: transparent;
background-image: url('');
border: none;
margin: 1px;
}
#menu { height: 210px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background-image: url('URL_DE_VOTRE_IMAGE_DE FOND_DES_SMENUS');
border: none;
}
#menu li a, #menu dt a {
color: #000000;
text-decoration: none;
display: block;
height: 7%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eeeeee;
}
#site {
position: absolute;
z-index: 1;
top : 72px;
left : 10px;
color: #000000;
background-color: #dddddd;
padding: 5px;
border: 1px solid gray;
}
-->
</style>

Ici tout est personnalisable selon vos goûts et vos désirs.
Vous pouvez mettre des backgroud-color en lieu et place des images, surtout en lieu et place des boutons pour que ça fassent des cases colorées.
Si vous voulez y mettre des boutons quelqu'ils soient, il vous faut faire ceci ici dans le css :

#menu dt {
cursor: pointer;
text-align: center;
color: #ffffff;
font-weight: bold;
background-color: transparent;
background-image: url('');
border: none;
margin: 1px;

Et l'image du bouton c'est plus bas.


Suite dans le prochain pots.

La dernière partie est à placer où vous voulez votre barre de menus, mais pour qu'elle apparaisse juste au dessus du bloc de publicités, vous la placerez tout à la fin du même template après

Code:

<!-- END html_validation -->

en laissant aussi quelques interlignes.

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><img src="URL_DE_VOTRE_BOUTON" border="0" alt="Accueil" /></dt>
<dd id="smenu1">
<ul>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">Index</a></li>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">Portail</a></li>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">FAQ</a></li>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">Search</a></li>
</ul>
</dd>
</dl>
   
<dl onmouseover="javascript:montre('smenu2');" onmouseout="javascript:cache()">         
<dt><img src="URL_DE_VOTRE_BOUTON" border="0" alt="Membres" /></dt>
<dd id="smenu2">
<ul>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">Membres</a></li>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">Groupes</a></li>
</ul>
</dd>
</dl>    
   
<dl onmouseover="javascript:montre('smenu3');" onmouseout="javascript:cache()">   
<dt><img src="URL_DE_VOTRE_BOUTON" border="0" alt="Profils" /></dt>
<dd id="smenu3">
<ul>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">Infos</a></li>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">Preferences</a></li>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">Avatar</a></li>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">Watch sujets</a></li>
<li><<a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">New Posts</a></li>
<li><a href="http://www.sos-forum.com/search.forum?search_id=egosearch" target="_blank">My Posts</a></li>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">0 Reponse</a></li>
</ul>
</dd>
 </dl> 
   
<dl onmouseover="javascript:montre('smenu4');" onmouseout="javascript:cache()">   
<dt><img src="URL_DE_VOTRE_BOUTON" border="0" alt="Messagerie" /></dt>
<dd id="smenu4">
<ul>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">In Box</a></li>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">Sended Box</a></li>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">Waiting Box</a></li>
</ul>
</dd>
</dl>
    
<dl onmouseover="javascript:montre('smenu5');" onmouseout="javascript:cache()">   
<dt><img src="URL_DE_VOTRE_BOUTON" border="0" alt="Switchers" /></dt>
<dd id="smenu5">
<ul>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">Log In</a></li>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">Log Out</a></li>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">Register</a></li>
</ul>
</dd>
</dl>
   
</div>
</td></tr></tbody>
</table>

Pour des boutons à la place du texte, ça se passe ici :

Code:

<dt><img src="URL_DE_VOTRE_BOUTON" border="0" alt="Accueil" /></dt>

si vous préférez du texte, il vous faudra mette une couleur ou une image dans background indiqué au dessus (ou pas) ainsi :

Code:

<dt>TEXTE</dt>

Et voilà le résultat avec des boutons en titre des menus > ICI <
Le fond des sous-menus est une image dans le css ici, bien sûr vous faites comme vous voulez

#menu li {
text-align: center;
background-image: url('URL_DE_VOTRE_IMAGE');
border: none;
}

EDIT : Comme dit plus haut, si vous voulez garder les mêmes sous-menus ou quelques uns, il vous suffit de remplacer le "VOTRE_FORUM.LIEN" par l'adresse de votre forum ici :

Code:

<a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">

Attention à la numérotation (avec le javascript aussi) si vous ajoutez ou supprimez des menus.

Enfin, si on supprime, c'est pas trop grave. Si on ajoute, là, il faut faire attention, effectivement.

Et sinon, je conseille de supprimer target="_blank", car ça ouvre dans un nouvel onglet (ce qui est assez embêtant)

merci beaucoup pour ce script

Bonjour,
p'tite question à final-blond vous avez mis un lien qui peu nous rediriger vers celui-ci -->juste là avec un effet qui m'interresse fortement celui du petit son que l'on entend lorsque l'on passe le curseur sur l'un des boutons mais le problème et que je ne sais pas faire .
Alors si quelqu'un pouvais m'aider et surtout m'expliquer.

Et passant super le script pour la barre de navigation

Merci d'avance.

k@k...

Hello k@k,

Le son qui t'intéresse est incorporé dans la bannière flash.
Comme on l'avait réalisée pour notre forum à l'époque, je ne saurais te dire comment le faire, sorry.

Bon alors je lance un appel à qui s'ai faire cet effet ???

Merci quand même de votre réponse final-blond


k@k...

Bon alors je lance un appel à qui s'ai faire cet effet ???

Il faut que tu demande a quelqu'un qui sait utiliser Flash CS4 ou DreamWeaver CS4, si tu veux le faire tout seul il y a plein de tuto sur le web

Aurais-je répondus a ta question ?