Installation d'un menu déroulant

[Coralina]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : https://belfort-academie.forumactif.com/

Description du problème

Bonjour
Je souhaite créer un menu déroulant ( c'est la première fois que j'essaye du HTML )
j'ai un soucis consternant les codes, les codes HTML, Le code Javascript ... Je n'arrive pas à savoir où les placer dans mon panneau d'administration. J'ai l'impression que quand je met les différent  codes par exemple  JavaScript dans :
Panneau d'administration = Module = Gestion des codes JavaScript

Ca n'a aucun effet et même cela fait des modifications indésirables
Merci d'avance

[Invité]

Hello Coralina,

il faudrait modifier ton profil car ton forum est une version ModernBB et non Phpbb3.

il faudrait connaitre le code html et le JavaScript que tu utilises .
Merci de les fournir chère amie .

a++

[Coralina]

Merci #Milouze14
J'utilise le code javascript : Pour une apparition des sous-menu au survol

[Invité]

Re,
merci mais cela ne me donne pas le code html et le JavaScript .
Tu as bien installé quelque chose sur ton forum ?
Si oui, c'est ce que je souhaite voir .

a++

[Coralina]

Voici le code JavaScript #Milouze14 :
$(function(){ $("#menu dl").hover(function(){$("#menu dl dd").slideUp("500");$(this).find("dd").stop(true,true).slideDown("500");},function(){$(this).find("dd").slideUp("500");}); });

[Invité]

Re,
utilises les balises code pour mettre du script ou du code html .
Tu désires afficher ce menu sur toutes les pages de ton forum ?
Si oui ou désires tu l'afficher?
Est-ce que ce dernier devra être visible par tout le monde ou juste pour tes membres ?

a++

[Coralina]

#Milouze14
Les balises codes je ne sais pas ce que c'est ?
J'aimerais créer un menu déroulant dans la barre de navigation si c'est possible
Je souhaite l'afficher sur toutes mes pages seulement pour mes membres .

Voilà je sais pas si c'est possible

[Invité]

Re,
alors les balises se trouvent sur l'éditeur:




On va donc tester ceci, le menu sera affiché sur toutes les pages sur la barre de navigation côté gauche.
Ce menu sera donc accessible qu'aux membres.

Tout va se trouver dans le JavaScript:

Suis bien la procédure suivante:


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.

Cocher sur toutes les pages.


Déposes ceci:

Code:


$(function(){
if(!_userdata["session_logged_in"])return;
$('#page-header ul.navbar').find('li:first').before('<li id="menu"><dl><div title="Afficher le contenu">Titre du menu</div>
<dd>Menu1</dd>
<dd>Menu2</dd>
<dd>Menu3</dd>
<dd>Menu4</dd>
<dd>Menu5</dd>
</dl>
</li>');
$("#menu dl").hover(function(){
$("#menu dl dd").slideUp("500");
$(this).find("dd").stop(true,true).slideDown("500");},
function(){
$(this).find("dd").slideUp("500");
}); });



Penses à cliquer sur le bouton VALIDER

Ensuite un peu de style:

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajoutes ceci:

Code:


/*on donne une apparence au bloc*/
#menu
{
  height:auto;
  padding:5px;
  position:absolute;

  z-index:999;
  width: 120px;
margin-left: -120px;
}
 
/*on donne une apparence au titre*/
#menu dl div
{
font-size: 1.3rem;
color:white;
text-align:center;
cursor:pointer;
}
/*on donne une apparence au titre*/
#menu dd
{background-color:#333;
  display:none;
  color:white;
  font-size: 1.3rem;
  border-top:1px solid white;
  height: 24px;
line-height: 24px;
}



Penses à cliquer sur le bouton

Tu peux voir le résultat sur mon fofo de tests car de mon côté j'ai autorisé pour tout le monde:

https://m14phpbb2.forumactif.org/




Dans le script, tu as ceci:
Le titre du menu:

Code:

<div title="Afficher le contenu">Titre du menu</div

Puis tous les menus cachés:

Code:


<dd>Menu1</dd>
<dd>Menu2</dd>
<dd>Menu3</dd>
<dd>Menu4</dd>
<dd>Menu5</dd>


Il faut donc remplacer tous les textes par ce que tu souhaites.
Si tu as des difficultés, donnes moi le titre et le contenu de chaque menu .


a++

[Coralina]

Re, #Milouze14
Voilà j'ai copier-coller les 2 codes au bonne endroit et j'ai pensé à enregistrer mais je ne vois aucun changement

[Invité]

Re,
hum, les scripts ne sont peut être pas activés ?
Modules/HTML&JAVASCRIPT/Gestion des codes Javascript

Activer la gestion des codes Javascript : cocher "Oui" . puis

a++

[Coralina]

#Milouze14

Merci beaucoup j'ai pu réussir grâce à toi

Passe une bonne soirée

[Invité]

Re,
de rien chère amie,
ne mets pas en résolu tout de suite,il faut voir ensuite ce que tu veux déposer dans les menus car le JavaScript est capricieux avec les caractères spéciaux.

Bonne soirée à toi aussi.
a++

[Coralina]

Re Cc #Milouze14

Je me demandais si tu pouvais me créer un code pour que je puise avoir le même menu déroulant mais dans la barre de navigation coté droite ?

[Invité]

Hello Coralina,

dans le script ,
il faut donc remplacer cette ligne dans le script:

Code:

$('#page-header ul.navbar').find('li:first').before

Par ceci:

Code:


$('#page-header ul.navbar').find('li').last().after


Le script complet:

Code:

$(function(){
$('#page-header ul.navbar').find('li').last().after('<li id="menu"><dl><div title="Afficher le contenu">Titre du menu</div>
<dd>Menu1</dd>
<dd>Menu2</dd>
<dd>Menu3</dd>
<dd>Menu4</dd>
<dd>Menu5</dd>
</dl>
</li>');
$("#menu dl").hover(function(){
$("#menu dl dd").slideUp("500");
$(this).find("dd").stop(true,true).slideDown("500");},
function(){
$(this).find("dd").slideUp("500");
}); });

Et le style associé:
Remplaces dans la feuille de style ici:

Code:


#menu
{
  height:auto;
  padding:5px;
  position:absolute;
 
  z-index:999;
  width: 120px;
margin-left: -120px;
}


modifies la valeur du margin-left à 20px:

Comme ceci:

Code:

margin-left:20px;

Ensuite, si tu veux insérer que des liens, voici un exemple:

Code:

$(function(){
$('#page-header ul.navbar').find('li').last().after('<li id="menu"><dl><div title="Afficher le contenu">Titre du menu</div>
<dd><a href="https://belfort-academie.forumactif.com/calendar">Calendrier</a></dd>
<dd><a href="https://belfort-academie.forumactif.com/memberlist">Membres</a></dd>
<dd><a href="https://belfort-academie.forumactif.com/groups">Groupes</a></dd>
<dd><a href="https://belfort-academie.forumactif.com/faq">Faq</a></dd>
<dd><a href="https://belfort-academie.forumactif.com/search">Rechercher</a></dd>
</dl>
</li>');
$("#menu dl").hover(function(){
$("#menu dl dd").slideUp("500");
$(this).find("dd").stop(true,true).slideDown("500");},
function(){
$(this).find("dd").slideUp("500");
}); });


Puis ajouter ce style:

Code:

#menu dd a:hover{background-color:transparent!important;color:white!important;}

Et voilou .
a++

[Coralina]

Merci beaucoup #Milouze14

J'ai essayé de créer un lien pour tomber sur le profil
<dd><a href="https://belfort-academie.forumactif.com/profile">Profil</a></dd>

Mais ce lien me fait arriver sur le page d'accueil

[Invité]

Re,
sers toi des balises codes s'il te plait.

Remplaces par:

Code:

<dd><a href="https://belfort-academie.forumactif.com/profile?mode=editprofile">Profil</a></dd>

a++

[Coralina]

Merci beaucoup ça à marché #Milouze14

J'aimerais créer dans mes menu déroulant des forum es que c'est possible ?
Merci d'avance

[Invité]

Re,
de rien .

J'aimerais créer dans mes menu déroulant des forum es que c'est possible ?

Oui bien sur,
par contre il faut que tous tes membres puisent y accéder.

Tu as remarqué que dans le script tu as à chaque fois une ligne comme ceci:

Code:

<dd><a href="https://belfort-academie.forumactif.com/calendar">Calendrier</a></dd>

Il faut donc ajouter cette même ligne en modifiant le lien et le titre comme ceci admettons:
Comme sur ton forum sur ce forum nommé "Contexte":
https://belfort-academie.forumactif.com/f3-contexte

Ce qui donnera comme code HTML:

Code:


<dd><a href="https://belfort-academie.forumactif.com/f3-contexte">Contexte</a></dd>


a++

[Coralina]

Merci #Milouze14
Du coup si je l'ai copier-coller dans mon menu déroulant es que je peux le supprimer de mon accueil et qui reste en même dans mon menu déroulant ?

Merci d'avance

[Invité]

Re,
pardon, je n'ai pas compris ta question!!

a++

[Coralina]

#milouze14
Vu que j'ai mis le forum " contexte " dans mon menu déroulant puis-je le supprimer de ma page d'accueil ?
Je sais pas si c'est plus claire

[Invité]

Re,

Je sais pas si c'est plus claire

C'est plus clair merci .

tu ne peux pas supprimer un forum sur ta page d'accueil !!!!
Puis c'est plus judicieux de le laisser car tes membres n’utiliseront pas forcément ce menu déroulant .

a++

[Coralina]

#milouze14
On ne peut vraiment pas le supprimer même avec des codes

[Invité]

Re,
hum non, à moins que je ne saisisse pas ta demande,
tu parles bien du forum?
Dans le cas d'une réponse positive, le menu déroulant ne fera plus son action sur le dit forum.

a++

[Coralina]

#milouze14
Je viens de trouver une alternative à mon petit problème
Merci d'avance pour tous ce que tu as fait, je pense avoir toute les clés en main pour réussir à compléter mes 2 menu déroulant
Juste une chose mon menu déroulant de gauche est sur mon onglet Accueil de ma barre de navigation

[Invité]

Hello Coralina,
de rien chère amie,
par contre le menu à droite ne doit pas être disponible pour les invités .

Juste une chose mon menu déroulant de gauche est sur mon onglet Accueil de ma barre de navigation

Tu voulais tous tes forums au survol de cet onglet?

Voir sur mon fofo de tests:
https://m14phpbb2.forumactif.org/

Tu peux l'automatiser avec ce script:

Code:

$(function(){
var test=$('#page-header ul.navbar').find('img#i_icon_mini_index').closest('li').attr('id','menu');
$.get('/' , function(data){
$(data).find('.topiclist.forums').find('h3.hierarchy a.forumtitle').each(function(){
var link=$(this).attr('href');
var texte=$(this).text();
test.after().append('<div><a href="'+link+'"title="'+texte+'">'+texte+'</a></div>');
$("#menu").hover(function(){
$("#menu div").slideUp("500");
$(this).find("div").stop(true,true).slideDown("500");},
function(){
$(this).find("div").slideUp("500");
   });
  });
 });
});


Et le style associé:

Code:

/*on donne une apparence au bloc*/
#menu
{
  height:auto;
  position:absolute;
  z-index:9999999!important;
  width: 120px;
margin-left: -120px;
}
 

/*on donne une apparence au titre*/
#menu div
{
  background-color:#333;
  display:none;
  color:white;
  font-size: 1.3rem;
  border-top:1px solid white;
  height: 24px;
line-height: 24px;
  text-align:left;
}
#menu div a
{
width: 100px;
  white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}


La dernière partie:

Code:

#menu div a
{
width: 100px;
  white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}


Sert à mettre des titres qui ne dépasse pas la largeur de chaque case du menu.


a++

[Coralina]

Cela ne marche pas comme on peut le voir sur mon forum j'ai replacer dans ma feuille de style :

Code:


Menu déroulant gauche :
  
 
/*on donne une apparence au bloc*/
#menu
{
  height:auto;
  position:absolute;
  z-index:9999999!important;
  width: 120px;
margin-left: -120px;
}
 
 
/*on donne une apparence au titre*/
#menu div
{
  background-color:#333;
  display:none;
  color:white;
  font-size: 1.3rem;
  border-top:1px solid white;
  height: 24px;
line-height: 24px;
  text-align:left;
}
#menu div a
{
width: 100px;
  white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
 
 
menu déroulant droite :

 
#menu
{
  height:auto;
  padding:5px;
  position:absolute;
 
  z-index:999;
  width: 120px;
margin-left: -120px;
}
#menu dd a:hover{background-color:transparent!important;color:white!important;}

J'ai replacé mes codes Javascript du menu déroulant par ça :

Code:

$(function(){
var test=$('#page-header ul.navbar').find('img#i_icon_mini_index').closest('li').attr('id','menu');
$.get('/' , function(data){
$(data).find('.topiclist.forums').find('h3.hierarchy a.forumtitle').each(function(){
var link=$(this).attr('href');
var texte=$(this).text();
test.after().append('<div><a href="'+link+'"title="'+texte+'">'+texte+'</a></div>');
$("#menu").hover(function(){
$("#menu div").slideUp("500");
$(this).find("div").stop(true,true).slideDown("500");},
function(){
$(this).find("div").slideUp("500");
   });
  });
 });
});

Et rien ne s'affiche j'ai du louper une étape

[Invité]

Re,
dans ta feuille de style, retires dans un premier temps cette ligne:

Code:

Menu déroulant gauche :

Ou remplaces par:

Code:

/*Menu déroulant gauche :*/

Puis:

Code:

menu déroulant droite :

Par:

Code:

/*menu déroulant droite :*/

Sur ton forum en regardant le code source, tu as deux scripts ayant le même id:
Il faut différencier les conteneurs si tu veux en utiliser plusieurs comme ici:
https://forum.forumactif.com/t405778-installation-d-un-menu-deroulant#3382853

Code:

$('#page-header ul.navbar').find('li').last().after('<li id="menu">

Tu vois:

Code:

id="menu"

Cet id ne peut être utilisé qu'une seule fois.
Pour celui de gauche au survol du bouton "Accueil" .

Tu as ce script:

Code:

$(function(){if(!_userdata["session_logged_in"])return;$('#page-header ul.navbar').find('li:first').before('<li id="menu"><dl><div title="Afficher le contenu">Lieu</div><dd>Le hall</dd><dd>La grande Salle</dd><dd>Toillette</dd><dd>Dortoir</dd><dd>Salle de cour</dd></dl></li>');$("#menu dl").hover(function(){$("#menu dl dd").slideUp("500");$(this).find("dd").stop(true,true).slideDown("500")},function(){$(this).find("dd").slideUp("500")})});

Il faut le supprimer et le remplacer par celui que je t'ai donné en modifiant l'id par :

Code:

menu_index

Comme ceci:

Code:


$(function(){
var test=$('#page-header ul.navbar').find('img#i_icon_mini_index').closest('li').attr('id','menu_index');
$.get('/' , function(data){
$(data).find('.topiclist.forums').find('h3.hierarchy a.forumtitle').each(function(){
var link=$(this).attr('href');
var texte=$(this).text();
test.after().append('<div><a href="'+link+'"title="'+texte+'">'+texte+'</a></div>');
$("#menu_index").hover(function(){
$("#menu_index div").slideUp("500");
$(this).find("div").stop(true,true).slideDown("500");},
function(){
$(this).find("div").slideUp("500");
   });
  });
 });
});

Puis remplacer aussi les id dans la feuille de style:

Remplaces donc le style donné ici:
https://forum.forumactif.com/t405778-installation-d-un-menu-deroulant#3382882

Par celui-ci:

Code:

/*on donne une apparence au bloc*/
#menu_index
{
  height:auto;
  position:absolute;
  z-index:9999999!important;
  width: 120px;
margin-left: -120px;
}
 
 
/*on donne une apparence au titre*/
#menu_index div
{
  background-color:#333;
  display:none;
  color:white;
  font-size: 1.3rem;
  border-top:1px solid white;
  height: 24px;
line-height: 24px;
  text-align:left;
}
#menu_index div a
{
width: 100px;
  white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#menu_index div a:hover{background-color:transparent!important;color:white!important;}



a++

[Coralina]

Merci
Cela ne marche toujours pas
Fiche CCS

Code:

/*Menu déroulant gauche :*/
  
 
/*on donne une apparence au bloc*/
#menu_index
{
  height:auto;
  position:absolute;
  z-index:9999999!important;
  width: 120px;
margin-left: -120px;
}
 
 
/*on donne une apparence au titre*/
#menu_index div
{
  background-color:#333;
  display:none;
  color:white;
  font-size: 1.3rem;
  border-top:1px solid white;
  height: 24px;
line-height: 24px;
  text-align:left;
}
#menu_index div a
{
width: 100px;
  white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#menu_index div a:hover{background-color:transparent!important;color:white!important;}
 
 /*menu déroulant droite :*/

 
#menu12
{
  height:auto;
  padding:5px;
  position:absolute;
 
  z-index:999;
  width: 120px;
margin-left: -120px;
}
#menu12 dd a:hover{background-color:transparent!important;color:white!important;}

Codes JavaScript :

Menu déroulant Gauche

Code:

$(function(){
if(!_userdata["session_logged_in"])return;
$('#page-header ul.navbar').find('li:first').before('<li id="menu"><dl><div title="Afficher le contenu">Lieu </div>
<dd>Le hall</dd>
<dd>La grande Salle</dd>
<dd>Toillette</dd>
<dd>Dortoir</dd>
<dd>Salle de cour</dd>
</dl>
</li>');
$("#menu dl").hover(function(){
$("#menu dl dd").slideUp("500");
$(this).find("dd").stop(true,true).slideDown("500");},
function(){
$(this).find("dd").slideUp("500");
}); });
 
$(function(){
var test=$('#page-header ul.navbar').find('img#i_icon_mini_index').closest('li').attr('id','menu_index');
$.get('/' , function(data){
$(data).find('.topiclist.forums').find('h3.hierarchy a.forumtitle').each(function(){
var link=$(this).attr('href');
var texte=$(this).text();
test.after().append('<div><a href="'+link+'"title="'+texte+'">'+texte+'</a></div>');
$("#menu_index").hover(function(){
$("#menu_index div").slideUp("500");
$(this).find("div").stop(true,true).slideDown("500");},
function(){
$(this).find("div").slideUp("500");
   });
  });
 });
});

Menu Déroulant Droite :

Code:

$(function(){
$('#page-header ul.navbar').find('li').last().after('<li id="menu"><dl><div title="Afficher le contenu">Profil</div>
<dd><a href="https://belfort-academie.forumactif.com/profile?mode=editprofile">Profil</a></dd>
<dd><a href="https://belfort-academie.forumactif.com/f3-contexte">Contexte</a></dd>
<dd>Registre en construction</dd>
<dd>Proposition</dd>
<dd><a href="https://belfort-academie.forumactif.com/faq">Faq</a></dd>
<dd>Mise a jour </dd>                                                  
<dd><a href="https://belfort-academie.forumactif.com/search">Rechercher</a></dd>
</dl>
</li>');
$("#menu dl").hover(function(){
$("#menu dl dd").slideUp("500");
$(this).find("dd").stop(true,true).slideDown("500");},
function(){
$(this).find("dd").slideUp("500");
}); });

Je pense que j'ai loupé une étape
Bonne soirée

[Invité]

Re,
bon je crois que je n'aurais jamais du te donner le dernier script pour afficher tous les forums!!

Bref, tu as actuellement trois scripts sur ton forum.
Ma demande est donc, désires tu remplacer le survol sur le bouton "Accueil" et afficher tous les forums ?
Car mon dernier script créer un conflit avec celui-ci:

Code:

$(function(){
if(!_userdata["session_logged_in"])return;
$('#page-header ul.navbar').find('li:first').before('<li id="menu"><dl><div title="Afficher le contenu">Lieu </div>
<dd>Le hall</dd>
<dd>La grande Salle</dd>
<dd>Toillette</dd>
<dd>Dortoir</dd>
<dd>Salle de cour</dd>
</dl>
</li>');
$("#menu dl").hover(function(){
$("#menu dl dd").slideUp("500");
$(this).find("dd").stop(true,true).slideDown("500");},
function(){
$(this).find("dd").slideUp("500");
}); });

a++