Αυτός ο οδηγός θα σας βοηθήσει να κάνετε τη μπάρα πλοήγησης να εμφανίζεται κατά τη διάρκεια της πλοήγησης στο φόρουμ. Έτσι λοιπόν, η μπάρα θα εμφανίζεται στο πάνω μέρος της οθόνης συνέχεια. Φυσικά κάνει την πλοήγηση στο φόρουμ πιο εύκολη και πιο γρήγορη.
Αυτός ο οδηγός είναι διαθέσιμος για όλες τις εκδόσεις φόρουμ. Όμως, αν έχετε τροποποιήσει τα στοιχεία της μπάρας πλοήγησης, θα χρειαστεί να κάνετε κάποιες αλλαγές.
Εγκατάσταση 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 κώδικες για να συμφωνούν με τις ανάγκες σας. Προσοχή! Αν οι σύνδεσμοί σας δεν εμφανίζονται στη μπάρα πλοήγησης λόγω του μεγέθους, μπορείτε να αλλάξετε τον αριθμό του μεγέθους. Το προεπιλεγμένο ύψος είναι 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.
|