Barre de notification et de navigation fusionner

[AryaLestrange]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 17/01/2021
Lien du forum : https://arya-forumtest.forumactif.com/

Description du problème

bien le bonjour à vous
Je me permets de revenir vers vous car je souhaiterai fusionner ma barre de navigation et de notification ensemble mais je ne trouve pas de tuto pour modernbb pour y parvenir, je vous joins le résultats souhaité :
https://zupimages.net/up/21/02/g8ex.png

D'avance merci, le problème restant la fusion, j'arrive parfaitement à arranger ensuite la navigation et jpense que la notification ne sera pas un soucis également, merci à vous <3
bonne soirée

[Milouze14]

Hello AryaLestrange,

on va placer la variable qui génère la barre de navigation en dehors du header dans le template:

Dans le template overall_header:
Affichage/Templates/Général/ overall_header


Recherches et supprimes ceci:

Code:


<ul class="navbar navlinks{NAVBAR_BORDERLESS}">
               <li>{GENERATED_NAV_BAR}</li>
            </ul>




Plus haut recherches cette variable:

Code:

 {JAVASCRIPT}

Juste en dessous déposes ceci:

Code:

 <div class="M14_navigation">{GENERATED_NAV_BAR}</div>

Penses a enregistrer puis à valider en cliquant respectivement sur puis


Le soucis est le suivant, la variable génère des balises li, ce qui provoque des retour à la ligne.

Pour y remédier on va les supprimer et les remplacer par le lien avec la class mainmenu et leur textes respectifs.

Le script :

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

Mets un titre explicite.

Coches sur toutes les pages.


Déposes ceci:

Code:


$(function(){$('.M14_navigation').find('a.mainmenu').each(function(){var a=$(this).attr('href');var text=$(this).text();var b=$(this).closest('li').length;
if(b){$(this).closest('li').replaceWith('<a href="'+a+'" class="mainmenu">'+text+'</a>'); 
}});});



Penses à cliquer sur le bouton VALIDER

Puis on cache ce qui nous intéresse pas sur la Toolbar et on donne l'apparence souhaitée pour le placement de la barre et des boutons.

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

Ajoutes ceci:

Code:


/*LES PARTIES A GAUCHE DE LA TOOLBAR*/
#fa_left,#fa_search,#fa_share{display:none!important;}
/*LA NOUVELLE BARRE DE NAVIGATION*/
.M14_navigation{width:80%;left:10%;position:fixed;z-index: 200009 !important;top:0;}
/*LES LIENS DE LA NOUVELLE BARRE DE NAVIGATION*/
.M14_navigation a
{
color:white!important;
margin-top:14px;
padding: 0 4px;
font-size: 1.3rem;
display: inline-block !important;
}


Penses à cliquer sur le bouton

Ensuite cette version à une barre de navigation flottante qui désormais ne sert plus à rien,
on va donc supprimer le script:

Dans le template overall_footer_end :
Affichage/Templates/
Général/overall_footer_end


Recherches et supprimes ceci:

Code:


<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
   $(window).scroll(function() {
      var header_top = $('#headerbar-top');

      if (header_top.hasClass('w-toolbar')) {
         if ($(window).scrollTop() >= 42) {
            header_top.addClass('is-sticky');
         } else {
            header_top.removeClass('is-sticky');
         }
      } else {
         if ($(window).scrollTop() >= 1) {
            header_top.addClass('is-sticky');
         } else {
            header_top.removeClass('is-sticky');
         }
      }
   });
});
//]]>
</script>



Penses a enregistrer puis à valider en cliquant respectivement sur puis

Et voilou, à toi de travailler quelque peu .

a++

[AryaLestrange]

Coucou
Merci à toi et oui je vais bosser xD
Je vous tiens informer
J'essaye de faire ça aujourd'hui ou demain

[AryaLestrange]

Double post :p finalement j'ai pas pu m'empêcher Je suis arrivée à un résultat satisfaisant pour la barre de navigation, je galère cependant un peu avec la notification pour les points suivants :
> retirer le pseudo pour ne laisser que le lien cliquable sur l'avatar afin que je puisse ensuite le déplacer correctement en haut et qu'au clic, ça fasse comme sur la maquette que les options apparaissent à gauche de l'avatar et en version réduite vu que j'ai réussi à cacher une bonne partie de ce que je voulais pas.
> retirer au clic le surlignement blanc, (notification et sur l’avatar) ; et remonter la notification de tel sorte à ce qu'elle soit pareil que la navigation ; jpourrai ensuite m'attaquer à l'intérieure :3

voici le CSS actuel (faut pas hésiter à me dire si certaines choses sont inutiles, ou si je peux simplifier) :

Code:

/*** variables couleurs ***/
:root{
--fondun: #d2dee2; /** fonds bleu clair, fond bandeau, pa, qeel, catégories et fond des informations pour le profil (niveau de la barre de nav) **/
--fonddeux: #e6eded; /** fonds bleu plus clair,  fond description, carré d’informations **/
 --fondtrois: #a7b9c8; /** fond bleu, fond titre categorie, qeel et nav **/
--fondsquatre:(-70deg,#a9bbca, #41465d); /** dégradé**/


--colorone: #fff; /** couleur blanc, titre avec un fond en dégradé **/
--colortwo: #3a3e56; /** couleur bleu foncé, couleur des titres sans fond, ainsi que des description.  **/
--colorthree: #a7b9c8; /** couleur bleu claire, pour les messages/sujet, date et heure. **/
}

  /*** fin variables ***/

/*---------------------------------- Barre de navigation et de notification -----------------------------------*/

 
/*LES PARTIES A GAUCHE DE LA TOOLBAR*/
#fa_left,#fa_search,#fa_share, a#fa_hide, #fa_usermenu{display:none!important;}

#fa_menu #fa_welcome, #fa_right a.rightHeaderLink{color: var(--colortwo)!important; text-decoration:none!important;}



#fa_toolbar{height: 30px;font-family: 'Playfair Display', serif;
  font-size: 12px;
  text-transform: uppercase;height: 30px;font-weight: bold;line-height: 30px;}

div#fa_right{line-height: 30px;color:var(--colortwo)!important;font-size: 12px; }

ul#fa_menulist{background:var(--fonddeux);color: var(--colortwo)!important;}

#fa_toolbar :link, #fa_toolbar :visited{color: var(--colortwo)!important; text-decoration:none!important;}

.fa_avatar img {
  width: 100px;
  height: 100px;
  position: relative;
  top: -3px;
  margin-right: 5px;
  border-radius: 100%;
  margin-bottom: -10px;
}

/*LA NOUVELLE BARRE DE NAVIGATION*/
.M14_navigation{text-align: center; width: 50%; left: 25%; position:fixed;z-index: 200009 !important;top:0;background:var(--fondtrois);font-family: 'Playfair Display', serif;
  font-size: 12px;
  text-transform: uppercase;height: 30px;font-weight: bold;}

/*LES LIENS DE LA NOUVELLE BARRE DE NAVIGATION*/
.M14_navigation a
{
color:var(--colortwo)!important;
line-height: 30px;
padding: 0 4px;
display: inline-block !important;
}

/*------------------------------- Fin Barre de navigation et de notification ----------------------------------*/

d'avance merci pour ces éclaircissements,

bonne journée

[Milouze14]

Re,

alors j'ai apporté des nouveautés dans la feuille de style, il faudra les ajuster et les compiler si besoin:

Code:

/*** variables couleurs ***/
:root{
--fondun: #d2dee2; /** fonds bleu clair, fond bandeau, pa, qeel, catégories et fond des informations pour le profil (niveau de la barre de nav) **/
--fonddeux: #e6eded; /** fonds bleu plus clair,  fond description, carré d’informations **/
 --fondtrois: #a7b9c8; /** fond bleu, fond titre categorie, qeel et nav **/
--fondsquatre:(-70deg,#a9bbca, #41465d); /** dégradé**/
 
 
--colorone: #fff; /** couleur blanc, titre avec un fond en dégradé **/
--colortwo: #3a3e56; /** couleur bleu foncé, couleur des titres sans fond, ainsi que des description.  **/
--colorthree: #a7b9c8; /** couleur bleu claire, pour les messages/sujet, date et heure. **/
}
 
  /*** fin variables ***/
 
/*---------------------------------- Barre de navigation et de notification -----------------------------------*/
 
 
/*LES PARTIES A GAUCHE DE LA TOOLBAR*/
#fa_left,#fa_search,#fa_share, a#fa_hide, #fa_usermenu{display:none!important;}
 
#fa_menu #fa_welcome, #fa_right a.rightHeaderLink{color: var(--colortwo)!important; text-decoration:none!important;}
 
 
 
#fa_toolbar{height: 30px;font-family: 'Playfair Display', serif;
  font-size: 12px;
  text-transform: uppercase;height: 30px;font-weight: bold;line-height: 30px;}
 
div#fa_right{line-height: 30px;color:var(--colortwo)!important;font-size: 12px; }
 
ul#fa_menulist{background:var(--fonddeux);color: var(--colortwo)!important;}
 
#fa_toolbar :link, #fa_toolbar :visited{color: var(--colortwo)!important; text-decoration:none!important;}
 
.fa_avatar img {
  width: 100px;
  height: 100px;
  position: relative;
  top: -15px;
  margin-right: 5px;
  border-radius: 100%;
  margin-bottom: -10px;
  cursor:pointer;
}
 
/*LA NOUVELLE BARRE DE NAVIGATION*/
.M14_navigation{text-align: center; width: 50%; left: 25%; position:fixed;z-index: 200009 !important;top:0;background:var(--fondtrois);font-family: 'Playfair Display', serif;
  font-size: 12px;
  text-transform: uppercase;height: 30px;font-weight: bold;}
 
/*LES LIENS DE LA NOUVELLE BARRE DE NAVIGATION*/
.M14_navigation a
{
color:var(--colortwo)!important;
line-height: 30px;
padding: 0 4px;
display: inline-block !important;
}
 
/*------------------------------- Fin Barre de navigation et de notification ----------------------------------*/



#fa_usermenu{width:0px!important;padding:0px!important;}
#fa_menulist{padding: 9px 18px 9px 18px!important;text-align: center;right: 209px!important;}
#fa_right.welcome #fa_menu #fa_welcome{background-color:transparent!important;}

Le script qui va dérouler le menu au clic sur l'avatar ( non disponible sur la version de base ) .

Édites donc le script pour cet avatar et remplaces le par celui-ci:

Code:

$(function() {
$(function() {
$('#fa_welcome').remove();
$('#fa_notifications').before('<span class="fa_avatar">' + _userdata.avatar + '</span>');
  $('span.fa_avatar').click(function(){
    $('#fa_menulist').slideToggle();
  });
    
})
});

a++

[AryaLestrange]

Bonsoir merci à toi
C'est presque tout bon, il y a un moyen de basculer l'ouverture du menu et des notifications derrières l'avatar ?
la demande pourra bientôt être archivée

[Milouze14]

Hello AryaLestrange,

l'espace est bien trop restreint de ce côté désolé .

a++

[AryaLestrange]

oki je note merci