Η τρέχουσα ημερομηνία/ώρα είναι Πεμ Μαρ 28, 2024 3:56 pm

Η αναζήτηση βρήκε 1 εγγραφή

Συνεχής εμφάνιση της μπάρας πλοήγησης (sticky navbar)

Συνεχής εμφάνιση της μπάρας πλοήγησης



Αυτός ο οδηγός θα σας βοηθήσει να κάνετε τη μπάρα πλοήγησης να εμφανίζεται κατά τη διάρκεια της πλοήγησης στο φόρουμ. Έτσι λοιπόν, η μπάρα θα εμφανίζεται στο πάνω μέρος της οθόνης συνέχεια. Φυσικά κάνει την πλοήγηση στο φόρουμ πιο εύκολη και πιο γρήγορη.

Θέματα με ετικέτα page-header στο Ελληνική Κοινότητα Υποστήριξης ForumGreek 4ed69be97ff39dbebb5d701f6fe1ad6a

Αυτός ο οδηγός είναι διαθέσιμος για όλες τις εκδόσεις φόρουμ. Όμως, αν έχετε τροποποιήσει τα στοιχεία της μπάρας πλοήγησης, θα χρειαστεί να κάνετε κάποιες αλλαγές.

Θέματα με ετικέτα page-header στο Ελληνική Κοινότητα Υποστήριξης ForumGreek 09615110Εγκατάσταση CSS


Πρώτα, θα χρειαστεί να προσθέσετε κάποιους CSS κώδικες για τη μπάρα πλοήγησης. Πηγαίντε στον Πίνακας Διαχείρισης ► Εμφάνιση ► Εικόνες και χρώματα ► Χρώματα ► CSS Stylesheet και μετά επιλέξτε ένα από τα παρακάτω θέματα και κάντε το επικόλληση.

Φωτεινό θέμα:
Κώδικας:
/* sticky nav main */
#fa_sticky_nav {
  font-size:0; /* hide whitespace */
  text-align:center;
  background:#FAFAFA;
  border-bottom:1px solid #CCC !important;
  height:30px;
  position:fixed;
  right:0;
  z-index:999;
  overflow:hidden;
  transition:top 200ms linear, width 600ms ease-in-out;
}
 
#fa_sticky_nav li { display:inline } /* navlist adjustment */
 
 
/* sticky menu links */
#fa_sticky_nav a.mainmenu {
  color:#39C;
  font-size:12px;
  font-weight:bold;
  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
  background:url('http://i18.servimg.com/u/f18/18/45/41/65/nav10.png') repeat-x 0px 30px;
  display:inline-block;
  padding:0 10px;
  height:30px;
  line-height:30px;
  transition:200ms;
}
 
#fa_sticky_nav a.mainmenu:hover, #fa_sticky_nav a.mainmenu.fa_navactif {
  background-position:0 25px;
}
 
 
/* sticky nav toggler */
#fa_sticky_toggle {
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/omnibo10.png') no-repeat 0 0 #FAFAFA;
  border:1px solid #CCC;
  border-right:none;
  display:inline-block;
  height:29px;
  width:30px;
  position:fixed;
  right:0;
  z-index:999;
  transition:top 200ms linear;
}
 
#fa_sticky_toggle:hover { background-position:-30px 0 }
 
 
/* make hidden toolbar similar to toggler */
#fa_toolbar_hidden {
  border-radius:0 !important;
  border:1px solid #CCC;
  border-right:0;
  border-top:0;
}
 
 
/* post offset fix */
.post div[style*="-30px;"] {
  top:-60px !important;
}


Σκοτεινό θέμα:
Κώδικας:
/* sticky nav main */
#fa_sticky_nav {
  font-size:0; /* hide whitespace */
  text-align:center;
  background:#333;
  border-bottom:1px solid #222 !important;
  height:30px;
  position:fixed;
  right:0;
  z-index:999;
  overflow:hidden;
  transition:top 200ms linear, width 600ms ease-in-out;
}
 
#fa_sticky_nav li { display:inline } /* navlist adjustment */
 
 
/* sticky menu links */
#fa_sticky_nav a.mainmenu {
  color:#CCC;
  font-size:12px;
  font-weight:bold;
  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/row10.gif') repeat-x 0px 30px;
  display:inline-block;
  padding:0 10px;
  height:30px;
  line-height:30px;
  transition:200ms;
}
 
#fa_sticky_nav a.mainmenu:hover, #fa_sticky_nav a.mainmenu.fa_navactif {
  color:#FFF;
  background-position:0 25px;
}
 
 
/* sticky nav toggler */
#fa_sticky_toggle {
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/omnida11.png') no-repeat 0 0 #333;
  border:1px solid #222;
  border-right:none;
  display:inline-block;
  height:29px;
  width:30px;
  position:fixed;
  right:0;
  z-index:999;
  transition:top 200ms linear;
}
 
#fa_sticky_toggle:hover { background-position:-30px 0 }
 
 
/* make hidden toolbar similar to toggler */
#fa_toolbar_hidden {
  border-radius:0 !important;
  border:1px solid #222;
  border-right:0;
  border-top:0;
}
 
 
/* post offset fix */
.post div[style*="-30px;"] {
  top:-60px !important;
}


Μπορείτε φυσικά να τροποποιήσετε τους CSS κώδικες για να συμφωνούν με τις ανάγκες σας.
Exclamation Προσοχή! Αν οι σύνδεσμοί σας δεν εμφανίζονται στη μπάρα πλοήγησης λόγω του μεγέθους, μπορείτε να αλλάξετε τον αριθμό του μεγέθους. Το προεπιλεγμένο ύψος είναι 30 pixels (height: 30px;).

Θέματα με ετικέτα page-header στο Ελληνική Κοινότητα Υποστήριξης ForumGreek 09615110Εγκατάσταση Javascript


Τώρα, πηγαίντε στον Πίνακας Διαχείρισης ► Λειτουργικές Μονάδες ► HTML & JAVASCRIPT ► Διαχείριση κωδικών Javascript και δημιουργήστε ένα νέο script.

Τίτλος: Sticky Navbar
Τοποθέτηση: Σε όλες τις σελίδες
Κώδικας:
Κώδικας:
(function() {
  if (!window.FA) window.FA = {};
  if (FA.Nav) {
    if (window.console && console.warn) console.warn('FA.Nav has already been defined');
    return;
  }
 
  FA.Nav = {
 
    // TARGET NODES BY VERSION
    // PHPBB2  : .bodyline > table + table
    // PHPBB3  : #page-header .navlinks
    // PUNBB    : #pun-navlinks
    // INVISION : #submenu
    targetNode : '#page-header .navlinks',
 
    customNav : '', // custom navlinks
 
    keepDefault : true, // keep the default navlinks
    collapsible : true, // show hide button
 
 
    // offset states
    offsets : {
      tbVisible : {
        bottom : 30,
        top : '30px'
      },
   
      tbHidden : {
        bottom : 0,
        top : '0px'
      },
   
      toggler : '30px'
    },
 
    activeOffset : {}, // active offset for the sticky nav
 
    visible : false, // sticky nav is visible
 
    // check the state of the static nav
    checkState : function() {
      if (!FA.Nav.animating) {
        var hidden = FA.Nav.barStatic.getBoundingClientRect().bottom <= FA.Nav.activeOffset.bottom;
   
        if (hidden && FA.Nav.barSticky.style.top != FA.Nav.activeOffset.top) {
          if (FA.Nav.toggler) FA.Nav.toggler.style.top = FA.Nav.offsets.toggler;
          FA.Nav.barSticky.style.top = FA.Nav.activeOffset.top;
          FA.Nav.visible = true;
        } else if (!hidden && FA.Nav.barSticky.style.top != '-30px') {
          if (FA.Nav.toggler) FA.Nav.toggler.style.top = '-30px';
          FA.Nav.barSticky.style.top = '-30px';
          FA.Nav.visible = false;
        }
      }
    },
 
    animating : false, // sticky nav is animating
 
    // animate the sticky nav when the toolbar is toggled
    animate : function() {
      if (FA.Nav.visible) {
        FA.Nav.animating = true;
        FA.Nav.barSticky.style.transition = 'none';
   
        $(FA.Nav.barSticky).animate({
          top : FA.Nav.activeOffset.top
        }, function() {
          FA.Nav.barSticky.style.transition = '';
          FA.Nav.animating = false;
          FA.Nav.checkState();
        });
      }
    },
 
    // toggle sticky navigation and remember preference via cookies
    toggle : function() {
      if (FA.Nav.barSticky.style.width == '100%') {
        my_setcookie('fa_sticky_nav', 'hidden');
        FA.Nav.barSticky.style.width = '0%';
      } else {
        my_setcookie('fa_sticky_nav', 'shown');
        FA.Nav.barSticky.style.width = '100%';
      }
      return false;
    }
 
  };
 
  $(function() {
    // set default offsets based on toolbar state
    FA.Nav.activeOffset = (my_getcookie('toolbar_state') == 'fa_hide' || !_userdata.activate_toolbar) ? FA.Nav.offsets.tbHidden : FA.Nav.offsets.tbVisible;
    if (!_userdata.activate_toolbar) FA.Nav.offsets.toggler = '0px';
 
    // find the static nav
    FA.Nav.barStatic = document.querySelector ? document.querySelector(FA.Nav.targetNode) : $(FA.Nav.targetNode)[0]; // static nav
 
    if (FA.Nav.barStatic) {
      FA.Nav.barSticky = FA.Nav.barStatic.cloneNode(FA.Nav.keepDefault); // clone static nav
      if (FA.Nav.customNav) FA.Nav.barSticky.insertAdjacentHTML('beforeEnd', FA.Nav.customNav);
      FA.Nav.barSticky.id = 'fa_sticky_nav';
      FA.Nav.barSticky.style.width = my_getcookie('fa_sticky_nav') == 'hidden' ? '0%' : '100%';
      FA.Nav.barSticky.style.top = '-30px';
       
      document.body.appendChild(FA.Nav.barSticky); // append the sticky one
       
      // sticky nav toggler
      if (FA.Nav.collapsible) {
        FA.Nav.toggler = document.createElement('A');
        FA.Nav.toggler.id = 'fa_sticky_toggle';
        FA.Nav.toggler.href = '#';
        FA.Nav.toggler.style.top = '-30px';
        FA.Nav.toggler.onclick = FA.Nav.toggle;
       
        document.body.appendChild(FA.Nav.toggler);
      };
     
      window.onscroll = FA.Nav.checkState; // check state on scroll
      FA.Nav.checkState(); // startup check
   
      // toolbar modifications
      $(function() {
        // animate sticky nav and change offsets when the toolbar is toggled
        $('#fa_hide').click(function() {
          FA.Nav.activeOffset = FA.Nav.offsets.tbHidden;
          FA.Nav.animate();
        });
     
        $('#fa_show').click(function() {
          FA.Nav.activeOffset = FA.Nav.offsets.tbVisible;
          FA.Nav.animate();
        });
      });
    }
  });
}());


Κάντε αποθήκευση και πλέον η μπάρα πλοήγησης θα εμφανίζεται συνέχεια στο πάνω μέρος του φόρουμ!

Θέματα με ετικέτα page-header στο Ελληνική Κοινότητα Υποστήριξης ForumGreek 09615110Τροποποιήσεις


Μπορείτε να κάνετε 5 αλλαγές στο script.

targetNode : Το targetNode αποτελεί το στοιχείο για το οποίο θα ισχύει το plugin. Στην περίπτωσή μας, για τη μπάρα πλοήγησης. Σύμφωνα με την έκδοση του φόρουμ σας, θα χρειαστεί να αντικαταστήσετε το #page-header .navlinks με:

phpBB2: .bodyline > table + table
phpBB3: Δεν χρειάζεται αντικατάσταση
PunBB: #pun-navlinks
Invision: #submenu

customNav : Αυτό το στοιχείο σας επιτρέπει να προσθέσετε περισσότερους συνδέσμους στη μπάρα πλοήγησης. Για παράδειγμα, αν θέλατε να προσθέσετε ένα κουμπί Top και ένα κουμπί Bottom (πάνω και κάτω αντίστοιχα), θα φαινόταν κάπως έτσι:

Κώδικας:
customNav : '<a class="mainmenu" href="#top">Top</a><a class="mainmenu" href="#bottom">Bottom</a>',


Θυμηθείτε να συμπεριλαμβάνετε το class="mainmenu" διότι χρησιμοποιείται για το σχεδιασμό του συνδέσμου.

keepDefault : Αυτή η επιλογή σας επιτρέπει να αφήσετε όλους τους προεπιλεγμένους συνδέσμους στη μπάρα πλοήγησης. Αν θέσετε αυτή την επιλογή ως false, όλοι οι προεπιλεγμένοι σύνδεσμοι θα αφαιρεθούν. Μπορείτε να προσθέσετε το δικό σας περιεχόμενο στη μπάρα πλοήγησης μέσω του customNav, όπως προαναφέραμε.

collapsible : Αυτή η επιλογή σας επιτρέπει να αποφασίσετε αν θέλετε να υπάρχει το κουμπί που "κρύβει" τη μπάρα πλοήγησης. Θέματα με ετικέτα page-header στο Ελληνική Κοινότητα Υποστήριξης ForumGreek Captur82 Αν θέσετε αυτή την επιλογή ως false, το κουμπί αυτό δεν θα εμφανίζεται.

offsets : Αυτή η επιλογή περιέχει δύο αντικείμενα για τη θέση της μπάρας πλοήγησης σε διάφορες στιγμές.

tbVisible : Τι θα εφαρμόζεται όταν υπάρχει η γραμμή εργαλείων (toolbar)
tbHidden : Τι θα εφαρμόζεται όταν δεν υπάρχει η γραμμή εργαλείων

Μέσα σε αυτά τα αντικείμενα υπάρχουν δύο ιδιότητες:

top : Προσδιορίζει το πάνω μέρος της γραμμής εργαλείων (πχ. εμφανίζονται 30 pixels από το πάνω μέρος της οθόνης)
bottom : Προσδιορίζει το κενό όταν η μπάρα πλοήγησης πρέπει να εμφανίζεται. Αφού το toolbar χρειάζεται 30 pixels από το πάνω μέρος της σελίδας, προσθέσαμε 30 pixels. Επομένως, όταν η κανονική μπάρα πλοήγησης καλύπτεται από τη γραμμή εργαλείων, τότε εμφανίζεται η sticky navbar.

toggler : Όταν η γραμμή εργαλείων εμφανίζεται, απέχει 30 pixels από το πάνω μέρος του φόρουμ. Προσδιορίζει το πάνω μέρος για το toggler.


Ο οδηγός γράφτηκε από Ange Tuteur του Αγγλικού Φόρουμ Υποστήριξης και μεταφράστηκε από Nemo.
από Nemo
Την / Το Παρ Νοε 20, 2015 8:12 pm
 
Αναζήτηση σε...: Οδηγοί & Συμβουλές
Θεματική Ενότητα: Συνεχής εμφάνιση της μπάρας πλοήγησης (sticky navbar)
Απαντήσεις: 0
Αναγνώσεις: 1048

Επιστροφή στην κορυφή

Μετάβαση σε: