Ελληνική Κοινότητα Υποστήριξης ForumGreek
Καλωσήρθατε στο Ελληνικό Φόρουμ Υποστήριξης της ForumGreek!!

Για να αποκτήσετε πλήρη πρόσβαση στο φόρουμ και στα όσα προσφέρει, μπορείτε πολύ απλά να κάνετε μια σύνδεση ή αν δεν έχετε λογαριασμό μία δωρεάν εγγραφή και μπείτε στην κοινότητά μας!!

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

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Πήγαινε κάτω

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

Δημοσίευση από Nemo Την / Το Παρ Νοε 20, 2015 8:12 pm

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


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


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

Εγκατάσταση 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;).

Εγκατάσταση 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();
        });
      });
    }
  });
}());

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

Τροποποιήσεις


Μπορείτε να κάνετε 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 : Αυτή η επιλογή σας επιτρέπει να αποφασίσετε αν θέλετε να υπάρχει το κουμπί που "κρύβει" τη μπάρα πλοήγησης. Αν θέσετε αυτή την επιλογή ως false, το κουμπί αυτό δεν θα εμφανίζεται.

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

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

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

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

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

Ο οδηγός γράφτηκε από Ange Tuteur του Αγγλικού Φόρουμ Υποστήριξης και μεταφράστηκε από Nemo.

Nemo
Υπεύθυνος Φόρουμ

Υπεύθυνος Φόρουμ

Άντρας
Τόπος : Αθήνα, Ελλάδα
Δημοσιεύσεις : 1079

Επιστροφή στην κορυφή Πήγαινε κάτω

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Επιστροφή στην κορυφή


 
Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης
Χρειάζεστε βοήθεια;
Στις Συχνές Ερωτήσεις μπορείτε να βρείτε σημαντικές πληροφορίες που θα σας βοηθήσουν!