Découvrir le conceptSans inscriptionMettez les créditsCommandes ouvertes
Le Deal du moment : -15%
(Adhérents Fnac) LEGO® Star Wars™ ...
Voir le deal
552.49 €

KoalaVolant
KoalaVolant
Mar 6 Oct 2020 - 1:23
Version nécessaire du forum : phpbb2

Cette barre de navigation / toolbar a été fait pour une commande de Kaerin. La maquette / l'apparence, a donc été déterminée par elle, en la remerciant de me permettre de mettre ce code en libre service.

De fait, voici à quoi ça ressemble :


Activer la toolbar



Pour que ce code fonctionne, il vous faudra activer la toolbar.
Pour ça il suffit d'aller dans Modules > Toolbar > Configuration et de l'activer.
N'oubliez pas de la fixer également.

HTML



Si vous désirez la même police d'écriture, il vous faudra aller sur "overall_header" et y placer :

Code:
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap" rel="stylesheet">

Dans la balise
Code:
<head></head>

Ensuite, il vous faudra trouver dans ce même template

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

Pour le remplacer par :

Code:
                    <script type="text/javascript">$(function(){
    $('.vavacon').replaceWith(_userdata.avatar);
    });</script>
  
  <div class="barreuhnav"><!-- BEGIN switch_user_logged_in -->
    <div class="divava">
      <div class="vavacon">Avatar</div>
    </div><!-- END switch_user_logged_in -->
   </div>
                  
 <table class="barre-nav" cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
 <tr>
 <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
 </tr>
 </table>

CSS



Voici le CSS. De fait, les couleurs sont mis en premier pour que cela soit plus pratique pour vous.
A savoir que le CSS est fait pour que le code soit au mieux adaptable selon tous les écrans

Code:
/* Toolbar par KoalaVolant et Maquette par Kaerin */

/* Couleurs */

#fa_toolbar, #fa_notifications, #fa_right.welcome #fa_menu #fa_welcome, #fa_menulist, #fa_menu:hover :visited, #fa_toolbar > #fa_right.notification > #fa_notifications,
#fa_toolbar #fa_right #notif_list li{
  background-color:#1B1C1D; }
#fa_notifications, #fa_welcome, #fa_menulist, #fa_usermenu, #fa_toolbar #fa_right #notif_list li{ color:#fff !important; }
#fa_menulist :link, #fa_menulist :visited, #fa_ranktitle, #fa_toolbar #fa_right #notif_list li .contentText a, .menu-tooltool a,
.rightHeaderLink:first-child, .rightHeaderLink+.rightHeaderLink{ color:#5b8b1e !important; }
#fa_menulist :hover, #fa_ranktitle:hover, #fa_toolbar #fa_right #notif_list li .contentText a:hover,
.menu-tooltool a:hover, .rightHeaderLink:first-child:hover, .rightHeaderLink+.rightHeaderLink:hover{ color:#7CC029 !important; transition:500ms; }
#fa_search #fatextarea{ background-color:#8D8E8E; color:white; }
#fa_notifications, #fa_welcome, #fa_menulist :link, #fa_menulist :visited, #fa_ranktitle,
.menu-tooltool, .rightHeaderLink:first-child, .rightHeaderLink+.rightHeaderLink{font-size:18px; }
#fa_toolbar #fa_right #notif_list li{ font-size:14px; }
#fa_toolbar, .menu-tooltool, .rightHeaderLink:first-child, .rightHeaderLink+.rightHeaderLink{ font-family: 'Crimson Text', serif; }
#fa_notifications{ text-transform:uppercase; padding:5px; width:204px; text-align:center; letter-spacing:3px; }
#fa_toolbar #fa_right #notif_list li.see_all{ text-align:center !important; }

/* Icon de recherche */
#fa_toolbar #fa_magnifier{ background-image:url('https://nsa40.casimages.com/img/2020/09/17/200917073226909157.png'); background-size:100%; }

/* Margin Barre Nav */
.barre-nav{ margin:20px auto; }

/* Structure toolbar */
.menu-tooltool .actif{ display:none; }
#fa_toolbar{  height:50px; z-index:997; }

/* Enlever ce qui n'est pas nécessaire avec la toolbar */
#fa_left, #fa_share, #fa_hide, #fa_usermenu img { display:none !important; }

/* Faire que les données soient au bon endroit */
#fa_usermenu{ padding-top:70px; }

/* Faire les positions absolute des éléments nécessaires */
.rightHeaderLink:first-child{ position:fixed; top:10px; left:10vw; }
.rightHeaderLink+.rightHeaderLink{ position:fixed; top:10px; left:5vw; }
#fa_welcome{position:fixed; top:10px; left:7vw; }
#fa_search{position:fixed; top:10px; left:50vw; transform:translateX(-50%); z-index:998; }
#fa_notifications{ position:fixed; top:53px; left:7%;; }
.divava{ position:fixed; top:12px; left:1vw; z-index:998; }
.menu-tooltool{ position:fixed; top:-6px; right:3%; z-index:998;}
#fa_menulist{ top:50px; z-index: 999; }
#notif_list{ top:85px; left:7.5vw !important; }
#fa_search #fa_magnifier{ left: -34px; }

/* Avatar */

.divava img{ width:100px; height:100px; object-fit:cover; border-radius:50%; -webkit-border-radius:50%; }

/* Notifications */

#notif_list{ width:244px; }
#notif_list > li{ width:235px; }
#notif_list .see_all{ width:231px; }
#notif_list .content{ position:relative; }
#fa_toolbar #fa_right #notif_list li .content{ width:235px; }
#fa_toolbar #fa_right #notif_list li .contentText{ width:219px; }
#fa_toolbar #fa_right #notif_list li a.delete{ position:absolute; right:0px; }

/* Menu de droite */

.menu-tooltool{ display:flex; color:#fff; list-style-type:none;}
.actifparent:after{ content:''; width:11px; height:11px; background-image:url('https://nsa40.casimages.com/img/2020/09/17/200917074000478880.png');
  display: inline-block; margin-left: 5px;}
.menu-tooltool > li{ display:inline-block; margin:0px 15px; position:relative; }
.menu-tooltool ul{ position: absolute;left: -20px;background-color: #1B1C1D;
padding: 10px;width: 77px;text-align: center;  top: 30px; }
.menu-tooltool ul li{ list-style-type:none; }
.menu-tooltool ul li a{ display:block; margin:5px 0px; }

/* Responsive */

@media (max-width: 1440px) {
  #fa_welcome{ left:8vw; }
  #fa_notifications{ left:8vw; font-size:14px; width:143px; }
}

@media (max-width: 1368px) {
  #fa_notifications{ font-size:14px; letter-spacing:0px; width:133px; }
}

@media (max-width: 1240px) {
  #fa_welcome{ left:7vw; }
  .divava img{ width:70px; height:70px; }
  #notif_list{ left:4vw !important; }
  #fa_usermenu{ padding-top:35px; }
}

@media (max-width: 1024px) {
.rightHeaderLink:first-child, .rightHeaderLink+.rightHeaderLink, #fa_welcome, #fa_search, #fa_toolbar, #fa_notifications, .divava, .menu-tooltool{
    position:absolute !important;}
  #fa_welcome{ left:9vw; }
  #fa_search{ left:42vw; }
}

@media (max-width: 768px) {
    #fa_welcome, #fa_notifications{ left:10vw; }
}

/* FIN DE LA TOOLBAR SPECIAL PAR KOALAVOLANT */

Javascript



Enfin, il va falloir vous amuser à ajouter du Javascript sur votre forum.

De fait, ce code proviens d'une personne du forum de Forumactif et n'est pas de mon fait. Mais pour l'esthétisme du code, je vous le propose :
Une fois placé dans Modules > Pages Javascript, n'oubliez pas d'activer la gestion des pages javascript.
De plus cocher "Toutes les pages" avant de mettre ce code :

Code:
$(function(){
 
  var texte_milieu = " a posté dans ";
  var si_titre_vide = "ce sujet";
 
  if(typeof(compileNotif)!="function")return;var d=compileNotif;Toolbar.compileNotif=compileNotif=function(b){var a=d(b);if(b.text.type==FA.Notification.NOTIF_TOPIC_WATCH){var c=a.match(/^(.*) a écrit un message dans (<a href="\/t[0-9]+(p[0-9]+)?-([^#?"]*)[^"]+">)[^<]+<\/a>$/);c&&(b=c[1]+texte_milieu+c[2],a=c[4],a="topic"==a||/^[\s-]*$/.test(a)?si_titre_vide:a.replace(/-/g," ").replace(/(^\s+|\s+$)/g,""),a=b+a+"</a>")}return a}
 
});

location.pathname=="/profile" && location.search.indexOf("page_profil=notifications")!=-1 && $(function(){
 
  var texte_milieu = " a posté dans ";
  var si_titre_vide = "ce sujet";
 
  $('.table1 td:first-child,td.gen:first-child,.ipbtable td:first-child,.tcr .postdetails').each(function(){
    var a = $(this).html();
    var c = a.match(/^(.*) a écrit un message dans (<a href="\/t[0-9]+(p[0-9]+)?-([^#?"]*)[^"]+">)[^<]+<\/a>$/);
    c&&(b=c[1]+texte_milieu+c[2],a=c[4],a="topic"==a||/^[\s-]*$/.test(a)?si_titre_vide:a.replace(/-/g," ").replace(/(^\s+|\s+$)/g,""),$(this).html(b+a+"</a>"))
  });
 
});

Afin d'avoir le menu correctement, vous pourrez mettre aussi ce javascript en plus (mais pas dans la même page) et modifier le menu où il est indiqué "Système" "Univers" etc :

Code:
$(function(){
  $('body').append(
    `<ul class='menu-tooltool'>
     <li><a href="">Accueil</a></li>
     <li><span class="actifparent">Système</span>
    <ul class="actif">
    <li><a href="">Lien</a></li>
        <li><a href="">Lien</a></li>
        <li><a href="">Lien</a></li>
        <li><a href="">Lien</a></li>
    </ul></li>
         <li><span class="actifparent" >Univers</span>
    <ul class="actif">
    <li><a href="">Lien</a></li>
        <li><a href="">Lien</a></li>
        <li><a href="">Lien</a></li>
        <li><a href="">Lien</a></li>
    </ul></li>
         <li><span class="actifparent">Personnage</span>
    <ul class="actif">
    <li><a href="">Lien</a></li>
        <li><a href="">Lien</a></li>
        <li><a href="">Lien</a></li>
        <li><a href="">Lien</a></li>
    </ul></li>
    </ul>`);
    
});
  
  $(function(){
  // On cache les sous-menus :
    $('.menu-tooltool .actifparent .actif').hide();
  console.log('poeut');
    // Curseur main sur les h2
    $('.menu-tooltool .actifparent').css('cursor','pointer');
    $('.menu-tooltool .actifparent').click(function(){
      console.log('carotte');
       //si ouvert -> referme
      if($(this).next('.actif:visible').length!=0){
           $('.actifparent').addClass('afterdiff');
          console.log('poire');
        $(this).next('.actif').slideUp('normal');
        }
        //si cache, on ferme les autres et on affiche
        else {
          $('.menu-tooltool .actifparent .actif').slideUp('normal');
          $(this).next('.actif').slideDown('normal');
        }
        return false;
     });
  
  
     });
Revenir en haut

Nos amis proches

Barre de navigation n°1 Parto512 Logo WyvArtem