[Résolu] Mettre un menu déroulant dans la toolbar

[FANCH 56]

Bonjour

J'essaie vainement depuis quelques jours, d'installer sur la toolbar, un menu déroulant du style de celui ci-dessous. Je n'y arrive pas.

Avez-vous une solution.

Merci

Code:

<div style="text-align: center;">
          <select class="optionscolored" style="width: 280px;" onchange="location = this.value">
              <option selected="selected">JOINDRE UN ADMINISTRATEUR</option>
              <option value="http://www.anciens-cols-bleus.net/u908">- Alain  29</option>
              <option value="http://www.anciens-cols-bleus.net/u997contact">- centime44</option>
              <option value="http://www.anciens-cols-bleus.net/u2792">- Charly.</option>
              <option value="http://www.anciens-cols-bleus.net/u658contact">- COLLEMANT Dominique</option>
              <option value="http://www.anciens-cols-bleus.net/u1327contact">- Franjacq</option>
              <option value="http://www.anciens-cols-bleus.net/u255contact">- Momo</option>
              <option value="http://www.anciens-cols-bleus.net/u269contact">- SEGALEN Georges</option>
            </select>
        </div>

[Invité]

Salut FANCH 56,

j'ai inséré ton code dans ma P.A et j'ai ce résultat :


As tu la même apparence ?

a++

[FANCH 56]

Pour l'instant j'ai çà mais dans un widget. Mais c'est bien cela le visu.

[Invité]

Re,
Ok
tu veux l'installer sur la toolbar ??
a++

[FANCH 56]

Affirmatif

[Invité]

Re,

effectivement la toolbar cache systématiquement la tienne .

Que ce soit en position absolute ou fixed .
On peut la positionner juste en dessous mais est ce ton souhait ?

a++

[FANCH 56]

Cela doit-être faisable, puisque le "Bienvenue" est fait de cette manière.

Je rame, je rame...........

[Invité]

Salut FANCH 56,

comment as tu intégré ces notifications sur la Toolbar stp ?
a++

[FANCH 56]

C'est d'origine

[Invité]

Re,
ok merci mais comment as tu procédé stp ?


a++

[FANCH 56]

Quelles notifications ?

[Invité]

Re,
celles ci:


a++

[FANCH 56]

JAVASCRIPT

Code:

$(function (){$(function (){
       
              $('#fa_left').after(
                '<span id="toolbar_add"><span class="fa_tbMainElement"><a href="/f19-" style="color:red">SE PRÉSENTER</a></span>'+
                '<span class="fa_tbMainElement"><a href="mailto:contactacb@sfr.fr" style="color:blue">CONTACT</a></span>'+
                '<span class="fa_tbMainElement"><a href="/h1-liens-amis" style="color:blue">Liens amis</a></span>'+
                '<span class="fa_tbMainElement"><a href="/donate.forum" style="color:black">Contribution</a></span>'+
                '<span class="fa_tbMainElement"><a href="/t18237-#652414" style="color:#C03000">Réglement A.C.B.</a></span>'+
                '<span class="fa_tbMainElement"><a href="/t20091-" style="color:blue">Qui mieux que nous ?</a></span></span>'
              )
       
        })});

CSS

Code:

/* ********************MARGES TOOLBAR**************** */
#toolbar_add span { margin:6 6px; }


/* **************élemants dépassant ******************** */
        #fa_toolbar { overflow: hidden; }

/* **************** COULEUR TEXTE DE LA TOOLBAR***************** */

body #fa_share_text, body #fa_right.notifications #fa_menu #fa_welcome , body #fa_right #fa_menu #fa_welcome, body #fa_right #fa_notifications { color: black; font-size: 15px; }
body #fa_toolbar #fa_service { color: black!important }


/* ***********************couleur mot notification Toolbar****************** */
        #fa_right a.rightHeaderLink, #fa_icon, #fa_toolbar #fa_service  {
        color: red !important;
        }

/* **************************RETIRER RECHERCHE et LOUPE de la toolbar connexion et enregistrer et  BIENVENUE********** */

#fa_textarea { display: none!important; }
#fa_magnifier { display: none!important; }
#fa_welcome {display: none!important; }
#fa_notifications {display: none!important; }
/* *********************RETRAIT RÉSEAUX SOCIAUX******************** */

        #fa_share { display: none!important; }

#fa_textarea {display: none!important;}

/* ******************************IMAGE BARRE OUTIL FA************** */
        #fa_toolbar, #fa_toolbar_hidden {background-image: url('LIEN IMAGE');
 
}

[Invité]

Re,


ce n'est pas ma tasse de thé FANCH56 ,
le java et moi ça fait presque trois .

je vais regarder de plus près et voir ce que l'on peut faire ,
en attendant si les maitres du java passent par là .
a++

[FANCH 56]

Si c'est pour toi, il te suffit de reprendre, et juste changer les liens href, et les mots correspondants.

[Invité]

Re,
en fait çà me plait bien :

Tu peux essayer ceci FANCH56:

Code:

$(function (){$(function (){
             
                      $('#fa_left').after(
                        '<span id="toolbar_add">
<span class="fa_tbMainElement"><a href="/f19-" style="color:red">SE PRÉSENTER</a></span>'+
                        '<span class="fa_tbMainElement"><a href="mailto:contactacb@sfr.fr" style="color:blue">CONTACT</a></span>'+
                        '<span class="fa_tbMainElement"><a href="/h1-liens-amis" style="color:blue">Liens amis</a></span>'+
                        '<span class="fa_tbMainElement"><a href="/donate.forum" style="color:black">Contribution</a></span>
'+'<span class="fa_tbMainElement"><a href="/t18237-#652414" style="color:#C03000">Réglement A.C.B.</a></span>'+
                        '<span class="fa_tbMainElement"><a href="/t20091-" style="color:blue">Qui mieux que nous ?</a></span>'+'<span style="margin-left:10px;text-align: center;">
                  <select class="optionscolored" style="width: 280px;" onchange="location = this.value">
                      <option selected="selected">JOINDRE UN ADMINISTRATEUR</option>
                      <option value="http://www.anciens-cols-bleus.net/u908">- Alain  29</option>
                      <option value="http://www.anciens-cols-bleus.net/u997contact">- centime44</option>
                      <option value="http://www.anciens-cols-bleus.net/u2792">- Charly.</option>
                      <option value="http://www.anciens-cols-bleus.net/u658contact">- COLLEMANT Dominique</option>
                      <option value="http://www.anciens-cols-bleus.net/u1327contact">- Franjacq</option>
                      <option value="http://www.anciens-cols-bleus.net/u255contact">- Momo</option>
                      <option value="http://www.anciens-cols-bleus.net/u269contact">- SEGALEN Georges</option>
                    </select>
                </div></span>'
                      )
             
                })});

a++

[FANCH 56]

Alors là chapeau. J'ai essayé cela, mais j'ai dû oublier quelque chose.

Super et merci. Donc réalisable pour mettre d'autres choses ainsi

Résolu

[FANCH 56]

J'essaie de mettre à gauche en premier à côte de Forumactif, je ne trouve pas, çà casse le code.

[Invité]

Re,

Pour la modification supprimes et remplaces par

Code:


$(function (){$(function (){
             
                      $('#fa_left').after(
                        '<span id="toolbar_add">
<span style="margin-left:10px;text-align: center;">
                  <select class="optionscolored" style="width: 280px;" onchange="location = this.value">
                      <option selected="selected">JOINDRE UN ADMINISTRATEUR</option>
                      <option value="http://www.anciens-cols-bleus.net/u908">- Alain  29</option>
                      <option value="http://www.anciens-cols-bleus.net/u997contact">- centime44</option>
                      <option value="http://www.anciens-cols-bleus.net/u2792">- Charly.</option>
                      <option value="http://www.anciens-cols-bleus.net/u658contact">- COLLEMANT Dominique</option>
                      <option value="http://www.anciens-cols-bleus.net/u1327contact">- Franjacq</option>
                      <option value="http://www.anciens-cols-bleus.net/u255contact">- Momo</option>
                      <option value="http://www.anciens-cols-bleus.net/u269contact">- SEGALEN Georges</option>
                    </select>
                </span>'+'
<span class="fa_tbMainElement"><a href="/f19-" style="color:red">SE PRÉSENTER</a></span>'+
                        '<span class="fa_tbMainElement"><a href="mailto:contactacb@sfr.fr" style="color:blue">CONTACT</a></span>'+
                        '<span class="fa_tbMainElement"><a href="/h1-liens-amis" style="color:blue">Liens amis</a></span>'+
                        '<span class="fa_tbMainElement"><a href="/donate.forum" style="color:black">Contribution</a></span>
'+'<span class="fa_tbMainElement"><a href="/t18237-#652414" style="color:#C03000">Réglement A.C.B.</a></span>'+
                        '<span class="fa_tbMainElement"><a href="/t20091-" style="color:blue">Qui mieux que nous ?</a></span>
'
                      )
             
                })});


après chaque

Code:

</span>

il faut ceci:

Code:

'+'

et tu reprends un autre élément .


Heureux de t'avoir aidé FANCH56 .

a++

[FANCH 56]

Je ralnce.

Avec le code définitif ci-dessous

Code:

$(function (){$(function (){
                   
                              $('#fa_left').after(
                                '<span id="toolbar_add">
        <span style="margin-left:10px;text-align: center;">
                          <select class="optionscolored" style="width: 280px;" onchange="location = this.value">
                              <option selected="selected">JOINDRE UN ADMINISTRATEUR</option>
 <option value ="mailto:contactacb@sfr.fr" style="color:blue"> CONTACT FONDATEUR</option>
                              <option value="http://www.anciens-cols-bleus.net/u908"> Alain  29</option>
                              <option value="http://www.anciens-cols-bleus.net/u997contact"> centime44</option>
                              <option value="http://www.anciens-cols-bleus.net/u2792"> Charly.</option>
                              <option value="http://www.anciens-cols-bleus.net/u658contact"> COLLEMANT Dominique</option>
                              <option value="http://www.anciens-cols-bleus.net/u1327contact"> Franjacq</option>
                              <option value="http://www.anciens-cols-bleus.net/u255contact"> Momo</option>
                              <option value="http://www.anciens-cols-bleus.net/u269contact"> SEGALEN Georges</option>
            
                            </select>
                        </span>'+'
        <span class="fa_tbMainElement"><a href="/f19-" style="color:red">SE PRÉSENTER</a></span>'+
                             
                                '<span class="fa_tbMainElement"><a href="/h1-liens-amis" style="color:blue">Liens amis</a></span>'+
                                '<span class="fa_tbMainElement"><a href="/donate.forum" style="color:black">Contribution</a></span>
        '+'<span class="fa_tbMainElement"><a href="/t18237-#652414" style="color:#C03000">Réglement A.C.B.</a></span>'+
                                '<span class="fa_tbMainElement"><a href="/t20091-" style="color:blue">Qui mieux que nous ?</a></span>
        '
                              )
                   
                        })});

Je me retrouve avec le titre deux fois, une fois sur la barre, et une fois dans le déroulant. Comment faire pour ne pas avoir le titre à l'intérieur du déroulant ?

Merci

[Invité]

Salut FANCH56,
le javascript se répète comme sur les menus déroulants de nos forums
mais te dire comment supprimer l'affichage secondaire je n'en sait rien du tout .

a++

[FANCH 56]

J'avais réussi pour un menu déroulant il y a longtemps, mais là je bloque.

Mais j'laurai un jour.......j'laurai

[FANCH 56]

Je fais remonter

[Ea]

Bonjour,


Normalement :

- on met le titre en dehors :

Code:

Contacter un administrateur : <select><option></option><option>pierre</option><option>jacques</option><option>pol</option></select>

- on laisse le titre dedans : https://i.imgur.com/gA3yryI.png

Mais j'imagine qu'on pourrait mettre :

Code:

<option id="titre_option_non_visible">option qu'on ne veut pas voir</option>

Et mettre dans le css :

Code:

#titre_option_non_visible { display: none; }

Cordialement.

[FANCH 56]

Bonjour EA et merci

Je vais faire un essai.........

A suivre......

EDIT : 16H14

Cela fonctionne.

Voici le javascript qui fonctionne pour ceux que cela intéresse.

Code:

$(function (){$(function (){
                   
                              $('#fa_right').after(
                                '<span id="toolbar_add">
        <span style="margin-left:12px;text-align: center;">
                          <select class="optionscolored" style="width: 280px;" onchange="location = this.value">
                             
        <option id="titre_option_non_visible">JOINDRE UN ADMINISTRATEUR</option>

 <option value ="mailto:ADRESSE EMAIL DU FONDATEUR" style="color:blue"> CONTACT FONDATEUR</option>
                              <option value="http://www.anciens-cols-bleus.net/u908"> Alain  29</option>
                              <option value="http://www.anciens-cols-bleus.net/u997contact"> centime44</option>
                              <option value="http://www.anciens-cols-bleus.net/u2792"> Charly.</option>
                              <option value="http://www.anciens-cols-bleus.net/u658contact"> COLLEMANT Dominique</option>
                              <option value="http://www.anciens-cols-bleus.net/u1327contact"> Franjacq</option>
                              <option value="http://www.anciens-cols-bleus.net/u255contact"> Momo</option>
                              <option value="http://www.anciens-cols-bleus.net/u269contact"> SEGALEN Georges</option>
            
                            </select>
                        </span>'+'
        <span class="fa_tbMainElement"><a href="/f19-" style="color:red">Se présenter</a></span>'+
                             
                                '<span class="fa_tbMainElement"><a href="/h1-liens-amis" style="color:blue">Liens amis</a></span>'+
                                '<span class="fa_tbMainElement"><a href="/donate.forum" style="color:black">Contribution</a></span>
        '+'<span class="fa_tbMainElement"><a href="/t18237-#652414" style="color:#C03000">Réglement A.C.B.</a></span>'+
                                '<span class="fa_tbMainElement"><a href="/t20091-" style="color:blue">Qui mieux que nous ?</a></span>
        '
                              )
                   
                        })});