Barre de navigation (.mainmenu) en css sur phbb3

[_doojj45_]

Bonjour à tous,

Voilà j’explique mon problème je suis administrateur de ce forum : http://team-dns-u.gameproforums.com/
et je souhaiterais faire un menu déroulant à la place du menu navigation (.mainmenu il me semble) pour se faire j'ai cherché sur le forum d'entraide et je suis tombé sur le tuto : https://forum.forumactif.com/t314485-installation-d-un-menu-deroulant ainsi que sur ce sujet qui se rapproche le plus de mon besoin (malheureusement il est fermé).

Le forum est en Phbb3 normalement ce qui complique plus la tâche je pense

Alors voici le style que je voudrais

Code CSS

Code:


/* Principal */
body
{
        background-color: gray; /* Le fond de la page sera noir */
 color: white; /* Le texte de la page sera blanc */
 
}
p
{
 background-color: black;
 color: white;
 opacity: 0.3;
}
#menu{
        width: 100%;
        margin: 0;
        padding: 10px 0 0 0;
        list-style: none;
        background: #111;
        background: -moz-linear-gradient(#444, #111);
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
        background: -webkit-linear-gradient(#444, #111);
        background: -o-linear-gradient(#444, #111);
        background: -ms-linear-gradient(#444, #111);
        background: linear-gradient(#444, #111);
        -moz-border-radius: 50px;
        border-radius: 50px;
        -moz-box-shadow: 0 2px 1px #9c9c9c;
        -webkit-box-shadow: 0 2px 1px #9c9c9c;
        box-shadow: 0 2px 1px #9c9c9c;
}

#menu li{
        float: left;
        padding: 0 0 10px 0;
        position: relative;
}

#menu a{
        float: left;
        height: 25px;
        padding: 0 25px;
        color: #999;
        text-transform: uppercase;
        font: bold 12px/25px Arial, Helvetica;
        text-decoration: none;
        text-shadow: 0 1px 0 #000;
}

#menu li:hover > a{
        color: #fafafa;
}

*html #menu li a:hover{ /* IE6 */
        color: #fafafa;
}

#menu li:hover > ul{
        display: block;
}

/* Sous-menu */

#menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#menu ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block;
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child{
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#menu ul a{
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

*html #menu ul a{ /* IE6 */
        height: 10px;
        width: 150px;
}

*:first-child+html #menu ul a{ /* IE7 */
        height: 10px;
        width: 150px;
}

#menu ul a:hover{
        background: #0186ba;
        background: -moz-linear-gradient(#04acec,  #0186ba);
        background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
        background: -webkit-linear-gradient(#04acec,  #0186ba);
        background: -o-linear-gradient(#04acec,  #0186ba);
        background: -ms-linear-gradient(#04acec,  #0186ba);
        background: linear-gradient(#04acec,  #0186ba);
}

#menu ul li:first-child a{
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after{
    border-bottom-color: #04acec;
}

#menu ul li:last-child a{
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Rétablissement du flottement */
#menu:after{
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */


et le code HTML (encore à l'état de brouillon)

Code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="lien du fichier CSS" />
        <title>Team DNS</title>
    </head>
<ul id="menu">
        <li><a href="#">Accueille</a></li>
        <li>
                <a href="#">Categories</a>
                <ul>
                        <li><a href="#">Reglement</a></li>
                        <li><a href="#">Inscription aux forums</a></li>
                </ul>
        </li>
        <li>
 <a href="#">Connexion</a>
 <ul>
 <li><a href="#">Ce connecter au forum GE</a></li>
                        <li><a href="#">Ce connecter au forum GRO</a></li>
 </ul>
 </li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
</ul>

<body>

 


</body>
</html>

Je vois bien où mettre le code CSS mais pour le Code HTML je ne vois pas trop.
J'aimerais aussi que cette barre soit affichée sur toute les pages du forum
Est ce possible? Que dois-je modifier?
Merci d'avance

[[AoH]Insane]

D'après ce que j'ai cru comprendre de ton besoin tu souhaites mettre le menu déroulant à la place de la barre de navigation qu'il y a automatiquement lors de la création d'un forum? Si c'est le cas, alors il y a plus d'une étape à suivre. Le code HTML pour afficher ton menu déroulant ne devrais pas être constitué d'une page complète. Il devrait uniquement être constitué de ton menu déroulant, avec des class qui font un lien entre ta page CSS que tu colles directement dans:

Panneau d'Administration (PA) Affichage Couleurs Feuille de style CSS

Une fois que le CSS est adéquatement placé dans cette section avec les termes que tu as donné, soit #menu pour la cause, tu devras donc créer un class="menu" afin que le HTML comprenne que le menu doit avoir cette apparence décrite plus tôt dans le CSS. Le code expliqué dans le tutoriel que tu as mis en lien dans ton message est très bien. Selon tes désirs, je crois que ça donnerais quelque chose comme ça en réalité :

Code:

<div id="menu">
<dl>
<dt>Replier</dt>
</dl>
 
<dl>
<dt>Forum</dt>
<dd  style="display:none;">
<ul>
<li><a href="URL_Accueil">Accueil</a></li>
<li><a href="URL_Règlements">Règlements</a></li>
<li><a href="URL_Inscription">Inscription</a></li>
</ul>
</dd> 
</dl>
 
<dl>
<dt>Connexion</dt>
<dd  style="display:none;">
<ul>
<li><a href="URL_GE">Se connecter à GE</a></li>
<li><a href="URL_GRO">Se connecter à GRO</a></li>
</ul>
</dd>
</dl>
 
<dl>
<dt>Question?</dt>
<dd  style="display:none;">
<ul>
<li><a href="URL_About">À propos</a></li>
<li><a href="URL_Contact">Contact</a></li>
</ul>
</dd> 
</dl>
</div>

Bref, si tu veux de l'aide pour coder je peux toujours t'en apporter plus tard, lorsque tu auras peut-être précisé ce que tu désirs si ce n'est pas ce que je t'ai indiqué dans ce qui suis!

Premièrement, si tu ne veux pas que la barre de navigation s'affiche, le moyen que j'utilisais était d'aller simplement dans:

Panneau d'Administration (PA) Affichage Page d'accueil En-tête & Navigation 3ième option : Afficher seulement des images dans la barre des liens Coché oui

Une fois ce petit chemin suivi, il faut enlever toute les images qu'il y a dans la section "Barre de navigation" qui se trouve dans le fieldset juste au dessous. Une fois que la barre de navigation affiche uniquement des images transparente, elle est plus ou moins inexistante.

Tu peux aussi aller fouiner dans les Templates afin d'essayer de supprimer la barre de navigation complètement. Pour ce faire, ce qui serait aussi simple que l'étape précédente, voire meilleure, tu dois fouiller :

Panneau d'Administration (PA) Affichage Templates Général overall_header

Une fois dans le bon Template tu devras trouver ce code :

Code:

<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
 <tr>
 <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
 </tr>
 </table>

Par la suite, la deuxième étape est de placer adéquatement ton code HTML soit dans le Template à la place de la barre de navigation normale, mais je te conseillerais de plutôt le mettre dans le message d’accueil. Ce message d'accueil est modifiable là:

Panneau d'Administration (PA) Affichage Page d'accueil Généralités Seconde section : Message sur la page d'accueil

Tu devras donc coller ton HTML dans la section contenu du message, afin que ta barre de navigation en menu déroulant s'affiche à l'endroit où serait affiché le message sur la page d'accueil (qui se trouve en haut, sous la barre de navigation normale, mais puisqu'elle n'existe plus, alors il n'y aura pas de soucis).

Je te conseil aussi d'ajouter un margin-top à un div pour ton menu. Comme la barre de navigation est enlevé, il reste tout de même beaucoup d'espace entre la bannière du forum et l'emplacement habituel du message d'accueil sur le Forum. C'est pourquoi, avec un :

Code:

<div style="margin-top: -Dpx;">//Code de ton menu</div>

où D est la Distance en Pixels

Tu pourrais très bien faire en sorte que ton menu déroulant soit presque collé à ta bannière.

En espérant avoir aidé!

[AoH]Insane

[_doojj45_]

Merci de votre réponse rapide alors donc si j'ai bien compris l'idée proposée serait d'enlever les boutons images actuels en choisissant de ne pas les ajouter, et de mettre le code HTML le plus haut possible dans la rubrique de l'écran d'accueil. Alors effectivement j'avais pensé à cette solution l’ennuie c'est qu'il me semble qu'en faisant ça, effectivement sa fonctionne pour le forum mais ça ne fonctionne pas sur les autres pages enfin je peux me tromper.

Sinon pour les templates je suis en phpBB3 (oups je l'ai mal écris dans le titre) du coup je ne dois pas pouvoir aller dans ce menu.

Mais sinon mon besoin est dans l'ensemble compris

[_doojj45_]

up

[_doojj45_]

up

[_doojj45_]

up

[serwal]

up

[_doojj45_]

up

[[AoH]Insane]

Le fais que vous soyez en PhPBB3 est un peu embêtant pour ce genre de modification, puisqu'il n'y aucun accès aux Templates. Comme vous avez le code de votre menu, alors je vous conseillerais de faire un menu flottant, sur le côté droit de la page par exemple, le code serait donc à insérer dans les JavaScript:

Panneau d'Administration (PA) Modules HTML & JAVASCRIPT Gestion des codes Javascript

Le code serait le suivant (où [...] signifie le code actuel de votre menu):

Code:

jQuery(document).ready(function() { jQuery('body').append('<table style="position: fixed; top: 50px; right: 10px;background-color: transparent;z-index:10000; width: 165px; height: 400px;"><tr><td>[...]</td></tr></table>'); } );

En espérant avoir aidé

[AoH]Insane

[serwal]

bonjour,

peut on avoir un exemple sur un site pour voir ce que ça pourrait donner!? s'il vouS plait, merci

[serwal]

up

[_doojj45_]

Bonjour
merci de la réponse du coup pensez vous qu'il vaut mieux passer le forum en phpbb2 ou autre pour obtenir ce que l'on souhaite?

[FANCH 56]

bonjour,

peut on avoir un exemple sur un site pour voir ce que ça pourrait donner!? s'il vouS plait, merci

Bonsoir

Va sur le forum de mon profil, les menus déroulants sont dans la toolbar à gauche.

[serwal]

bonjour,

peut on avoir un exemple sur un site pour voir ce que ça pourrait donner!? s'il vouS plait, merci

Bonsoir

Va sur le forum de mon profil, les menus déroulants sont dans la toolbar à gauche.

ha oui d'accord je suiS aller faire un tour, c'est paS trop ce style qu'on recherche, c'est pluS deS boutonS déroulant leS optionS du bouton enxemple avec le bouton connexion, on passe la souriS dessuS et voilà ce qu'il se passe


connexion

on
off

et en enlevant le curseur du bouton ça redevient à la normal c'est à dire

connexion

voilà, maiS ça je pense que vouS l'aviez compriS

merci

[[AoH]Insane]

Tu peux toujours visiter mon Forum, il y en a un plus que basique. Il suffit de remplacer le texte par des images et d'arranger un peu le CSS afin que ça te convienne pour le mieux!

En espérant avoir aidé

[AoH]Insane

[serwal]

Tu peux toujours visiter mon Forum, il y en a un plus que basique. Il suffit de remplacer le texte par des images et d'arranger un peu le CSS afin que ça te convienne pour le mieux!

En espérant avoir aidé

[AoH]Insane

salut,

voilà c'est ça

on veut faire le même rendu que teS boutonS " age of heroeS, role play " etc ...
je voiS que ça décale tout ce qu'il y a en dessouS deS boutonS quand on passe le curseur, sur ton site c'est paS gênant car il y a un espace, alorS que nouS il y a du texte ce qui fait que le texte est complètement déformé aprèS, j'entendS par là qu'il est coupé d'une partie à une autre selon sur quel bouton est le curseur, serait-il possible de ne paS avoir cet espèce de décalage!?

merci

[serwal]

merci

peut-on passer de " phpbb3 " à " phpbb2 " en remettant notre thème personnalisé facilement!?
car en " phpbb3 " nouS n'avonS paS accèS aux " templateS "

merci

[serwal]

up

[_doojj45_]

Tu peux toujours visiter mon Forum, il y en a un plus que basique. Il suffit de remplacer le texte par des images et d'arranger un peu le CSS afin que ça te convienne pour le mieux!

En espérant avoir aidé

[AoH]Insane

salut,

voilà c'est ça

on veut faire le même rendu que teS boutonS " age of heroeS, role play " etc ...
je voiS que ça décale tout ce qu'il y a en dessouS deS boutonS quand on passe le curseur, sur ton site c'est paS gênant car il y a un espace, alorS que nouS il y a du texte ce qui fait que le texte est complètement déformé aprèS, j'entendS par là qu'il est coupé d'une partie à une autre selon sur quel bouton est le curseur, serait-il possible de ne paS avoir cet espèce de décalage!?

merci

Bonjour,
Effectivement c'est cet effet que l'on recherche mais avec une barre au look plus arrondie comme vous avez pu le voir dans mon code CSS comment êtes vous parvenu à ce résultat? Votre forum est en phpBB?

PS : J'aime bien le système de changement de thème

[[AoH]Insane]

Mon forum est en PhPBB2, ce qui fait que je peux jouer dans les Templates. Ceci dit, tu n'as qu'à prendre le code que je t'ai fournis plutôt; à moins que tu désire absolument qu'il soit placé à la place de la barre de navigation. Dans ce dernier cas, il va falloir aller jouer un petit peu dans les Templates.

Cordialement

[AoH]Insane

[_doojj45_]

Ok merci du coup on va également passer en phpbb2 on revient vers vous dès que c'est fait

[_doojj45_]

Bonsoir,

Donc nous somme passer en phpBB2 vous aviez parlé de template au début du sujet pour mettre la barre en haut et sur toute les pages comment faire?

[[AoH]Insane]

Alors c'est assez simple lorsqu'on a compris le principe. Il faut aller dans le Panneau d'Administration et prendre le bon Template pour débuter.

Panneau d'Administration (PA) Affichage Templates Général overall_header

Une fois dans ce bon Template tu dois trouver cette partie de code :

Code:

<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>

Afin de le remplacer par le code de ton menu; si tu n'en as pas déjà un de fait, alors je pourrai tenter de t'en faire un assez simple basé sur le mien!

En espérant avoir aidé

[AoH]Insane

[serwal]

nouS allonS mettre ça en place

serait-il possible de changer de fondateur ou paS!?
car la personne qui s'occupe deS templateS ne l'est paS ce qui sera donc difficile pour elle d'y accéder

merci

[[AoH]Insane]

Non, impossible de changer de fondateur, malheureusement. La seule façon est de se relayer le compte.

Cordialement

[AoH]Insane

[serwal]

d'accord, merci de votre réponse, on va donc se relayer le compte.
par contre depuiS qu'on a mit le site en " phpbb2 " et un foiS remit le thème leS imageS, leS widgetS, etc ... tout ceci est énorme, n'y a t-il donc paS un moyen de rectifier cela!?

merci

pS : " j'ai essayé de mettre le site en punbb on retrouve un un taille normal comme on le souhaite deS imageS, widgetS, etc ... maiS malheureusement le thème est tout griS, comme si il y avait une perte deS couleurS souS le punbb pourquoi cela!? merci "

[serwal]

up

[[AoH]Insane]

Je n'ai jamais fait le passage de l'un à l'autre, alors je ne suis pas sûr de savoir d'où peut provenir le problème. J'ai toujours été en PhPBB3; alors l'agrandissement des icônes n'a pas exister pour moi.

Cordialement

[AoH]Insane

[_doojj45_]

Bonjour,
Nous avons suivis vos conseils et pour le moment cela fonctionne on attend d'être vraiment sûr avant de passer le sujet en ok

Nous vous tenons au courant bonne journée

PS: Toujours un problème d'affichage due au passage phpbb3 au phpbb2

[Matriochka]

Bonjour,

Où en est votre problème ? S’il est résolu, merci de le signaler. Sinon, pensez à remonter votre sujet régulièrement, sans quoi celui-ci sera considéré comme abandonné et envoyé à la corbeille.

Bonne journée