Γεια σας, σήμερα θα μιλήσουμε μαζί σας για το πώς να δημιουργήσετε τη δική σας γραμμή πλοήγησης για τον ιστότοπο. Χρησιμοποιείται σχεδόν σε κάθε πόρο του Διαδικτύου, επομένως κάθε προγραμματιστής θα πρέπει να μπορεί να δημιουργήσει αυτό το στοιχείο.

Επεξηγήσεις για το άρθρο:

1. "Sidebar / sidebar" - γραμμή πλοήγησης ιστότοπου.
2. Το "Position" είναι μια ιδιότητα στο CSS.
3. "Επάνω", "αριστερά", "δεξιά", "κάτω" είναι ιδιότητες κίνησης CSS.
4. Το WordPress είναι ένα σύστημα διαχείρισης περιεχομένου ιστότοπου/CMS.
5. Webix - Βιβλιοθήκη διεπαφής χρήστη. Σας επιτρέπει να δημιουργήσετε στοιχεία πίνακα.
6. Η προβολή είναι μια συνάρτηση JavaScript.

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

Πώς να φτιάξετε μια πλαϊνή γραμμή χειροκίνητα; CSS & HTML

Τώρα θα δείξουμε τον παραδοσιακό τρόπο ανάπτυξης, δηλαδή τη σύνταξη κώδικα επεξεργαστής κειμένου. Για να το κάνετε αυτό, πρέπει να ανοίξετε τα έγγραφα HTML και CSS σε ένα πρόγραμμα επεξεργασίας κώδικα.

Δημιουργία πλαϊνής γραμμής στη δεξιά πλευρά. HTML & CSS

Τις περισσότερες φορές, η γραμμή πλοήγησης βρίσκεται είτε στην κεφαλίδα του ιστότοπου είτε στη δεξιά πλευρά του. Στη δεύτερη περίπτωση, χρησιμοποιείται συνήθως διάταξη 2 στηλών.

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

Προσοχή! Κατά τη δημιουργία πλευρικών γραμμών και άλλων στοιχείων ιστότοπου, προετοιμάστε μια έτοιμη διάταξη εκ των προτέρων. Εστιάζοντας σε αυτό, θα απλοποιήσετε τη διαδικασία ανάπτυξης.

Η γραμμή πλοήγησης μπορεί να δημιουργηθεί χρησιμοποιώντας λίστες και κανονικά μπλοκ. Εάν χρησιμοποιείτε λίστες, απενεργοποιήστε την ιδιότητα "text-decoration" για αυτές.

Στο παράδειγμά μας, χρησιμοποιείται μια κατασκευή μπλοκ div.

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

Το κύριο μπλοκ θα χρησιμοποιηθεί για τη δημιουργία τοποθέτησης καθώς και για το μέγεθος.

Ας ξεκινήσουμε με την τοποθέτηση. Για το γενικό δοχείο, ορίσαμε τη σχετική τοποθέτηση - ιδιότητα (θέση: σχετική). Για στήλες, ορίζεται η ιδιότητα (θέση: απόλυτη).

Όταν χρησιμοποιείτε αυτόν τον τύπο, θα είναι ευκολότερο για σας να τοποθετήσετε στήλες μέσα στο μπλοκ. Για να γίνει αυτό, θα χρησιμοποιήσουμε τις ιδιότητες μετατόπισης: , , και .

Στο παράδειγμά μας, ο κώδικας μοιάζει με αυτό:

HTML

αντίγραφο

css

διάταξη (

θέση: σχετική;

φόντο: rgba(119, 115, 115, 0,58);

}

Sidebar , .content (θέση: απόλυτη ; )

πλαϊνή μπάρα (

φόντο: #C6DD7D;

Περιεχόμενο(

φόντο: #F4ECCE;

αντίγραφο

Προσοχή! Βεβαιωθείτε ότι έχετε καθορίσει ένα πλάτος για κάθε μεμονωμένο στοιχείο πλοήγησης. Το θέμα είναι ότι έχουν απόλυτη τοποθέτηση, που σημαίνει ότι το πλάτος τους θα είναι ίσο με το πλάτος του εσωτερικού περιεχομένου.

Θέλουμε επίσης να σημειώσουμε ότι στο , τοποθετείται πρώτα η δεύτερη στήλη και μετά η πρώτη. Χρησιμοποιώντας αυτή τη μέθοδοδεν πειράζει, καθώς οι στήλες μπορούν εύκολα να αντικατασταθούν.

Μπορείτε επίσης να χρησιμοποιήσετε την ιδιότητα float για αυτό. Αυτή η μέθοδος είναι πολύ πιο απλή καθώς βασίζεται στην περιτύλιξη στοιχείων. Χάρη σε αυτόν, το sidebat μας θα βρίσκεται στη δεξιά πλευρά.

Δημιουργία γραμμής πλοήγησης στη δεξιά πλευρά. HTML & CSS

Για να δημιουργήσετε ένα τέτοιο πλαίσιο, μπορείτε να χρησιμοποιήσετε την ίδια σήμανση όπως στο πρώτο παράδειγμα. Ο κώδικας CSS επίσης δεν χρειάζεται να αλλάξει πολύ.

Πρέπει να κάνετε μικρές προσαρμογές στον κώδικα CSS σας. Αυτό είναι απαραίτητο ώστε το μενού να βρίσκεται στη δεξιά πλευρά. Δεν αλλάζουμε τις ιδιότητες πλάτους και θέσης!

Πώς να δημιουργήσετε μια πλαϊνή γραμμή στο WordPress;

Τώρα ας δούμε μια μέθοδο που είναι πολύ διαφορετική από την προηγούμενη. Η διαφορά είναι ότι μπορείτε να δημιουργήσετε καλύτερη πλοήγηση με ελάχιστο έως καθόλου κώδικα CSS ή HTML.

Δεν θα χρειαστεί να γράψετε όλο τον κώδικα χειροκίνητα, όλη η εργασία θα πραγματοποιηθεί στον ίδιο τον κατασκευαστή.

Στο χρησιμοποιώντας WordPressθα χρειαστεί να καταχωρήσετε τη γραμμή πλοήγησης και να προσθέσετε μερικά γραφικά στοιχεία σε αυτήν.

Για να καταχωρήσετε μια πλαϊνή γραμμή στο WordPress, θα χρειαστεί να γράψετε μερικές συναρτήσεις Αρχεία PHP. Βασικά θα χρειαστείτε συστοιχίες δεδομένων που θα αναφέρονται στα widget και στις ετικέτες div τους.

Στο παράδειγμά μας, λαμβάνεται υπόψη η δεξιά πλαϊνή γραμμή, καθώς και η πλαϊνή γραμμή του υποσέλιδου.

Λίγα λόγια για το webix

Υπάρχει ένα άλλο ειδικό πλαίσιο που θα σας επιτρέψει να δημιουργήσετε αυτήν την πλαϊνή γραμμή. Το κύριο πλεονέκτημά του είναι ότι σας επιτρέπει να φτιάξετε έναν καλό πίνακα ελέγχου με λίγες μόνο γραμμές κώδικα.

Πρώτα πρέπει να κατεβάσετε αυτό το πλαίσιο. Μετά από αυτό, παρέχετε συνδέσμους προς τα στυλ και τα σενάρια του στο έγγραφό σας HTML.

Μετά από αυτό, μπορείτε να ξεκινήσετε τη δημιουργία της πλαϊνής γραμμής. Για να το τοποθετήσετε στο πλαίσιο, υπάρχει μια ειδική λειτουργία - προβολή. Το οποίο θα τοποθετήσει για την τοποθέτηση στοιχείων.

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

συμπέρασμα

Σε αυτό το άρθρο, καλύψαμε μερικούς βασικούς τρόπους για να δημιουργήσετε μια γραμμή πλοήγησης, αλλά υπάρχουν πολλοί περισσότεροι. Μπορείτε ακόμη και να βρείτε τον δικό σας τρόπο με βάση την εμπειρία μας.

Σε αυτά τα παραδείγματα, έχει εμφανιστεί μια απλή γραμμή πλοήγησης. Αν δουλέψεις λίγο πηγαίος κώδικας, τότε μπορείτε να αποκτήσετε ένα πραγματικό αριστούργημα.

Ετικέτες:

Ποιες είναι οι απαιτήσεις διάταξης;

• Λάστιχο δίστηλη διάταξη
• πλαϊνή γραμμή σταθερό πλάτος 300 px
• το περιεχόμενο τεντώνεται στο υπόλοιπο πλάτος.
• το υποσέλιδο πατημένο στο κάτω μέρος (σε αυτό το σεμινάριο δεν θα δείξω πώς γίνεται αυτό).

Ποια προβλήματα Css προκύπτουν κατά τη διάταξη μιας τέτοιας διάταξης:

1 τρόπος.

Εάν επιπλέετε μπλοκ, εσείς πρέπει να τους δώσει ένα σταθερό πλάτος(δεν μπορείτε να ορίσετε 1 πλαϊνή γραμμή σε 300 εικονοστοιχεία και περιεχόμενο σε 100%). Σε αυτήν την περίπτωση, είτε το περιεχόμενο ολισθαίνει προς τα κάτω είτε εμφανίζεται μια οριζόντια κύλιση 300 εικονοστοιχείων προς τα αριστερά. Λοιπόν, το κύριο πράγμα που πρέπει να καταλάβουμε είναι ότι αυτή η μέθοδος δεν μας ταιριάζει.

2 τρόπος.

Πολλοί στοιχειοθέτες προσφέρουν αυτή τη μέθοδο, τι σκέφτονται;! Η ουσία της μεθόδου είναι ότι μπορείτε να ρυθμίσετε την πλαϊνή γραμμή να επιπλέει με πλάτος 300 και να μην επιπλέει το περιεχόμενο και να ορίσετε περιθώριο αριστερά: 300 εικονοστοιχεία σε αυτό. Καλός τρόποςκαι όλα δείχνουν να πάνε τόσο καλά. Για να είμαι ειλικρινής, νόμιζα ότι αυτός ήταν ο καλύτερος τρόπος, αλλά αυτή η μέθοδος έχει τις δικές της παγίδες. Οι λόγοι για την εγκατάλειψη αυτής της μεθόδου είναι ότι αν ξαφνικά δημιουργήσουμε στο περιεχόμενο, για παράδειγμα, ένα μενού με float li ή οποιοδήποτε άλλο μπλοκ float και μετά θέλουμε να τα διαγράψουμε με clear:both, τότε το κάτω περίγραμμα αυτού του μπλοκ ολισθαίνει μέχρι το επίπεδο του κάτω περιγράμματος της πλαϊνής γραμμής (Τι και δεν είναι περίεργο αφού ο αφρός καθαρίζεται, μπορείτε να το αποφύγετε εάν ρυθμίστε ένα πλωτό μπλοκ σε σταθερό ύψος, αλλά δεν ισχύει καθόλου να ορίσετε ένα σταθερό ύψος).

3 τρόπο.

Μπορεί να χρησιμοποιηθεί για θέση πλαϊνής γραμμής απόλυτηαλλά μόνο αν εσύ είμαστε σίγουροι ότι το περιεχόμενο θα είναι μεγαλύτερο από την πλαϊνή γραμμή σε ύψοςΔιαφορετικά, ολόκληρο το περιεχόμενο της πλαϊνής γραμμής θα χωρέσει στο υποσέλιδο (εξάλλου, η απόλυτη τοποθέτηση βγαίνει από τη γενική ροή).

Αλλά όσο για μένα, αυτός δεν είναι επίσης πολύ καλός τρόπος!

4 τρόπος.

"Εξαιρετικός τρόπος, αν έχει ελαττώματα, παρακαλώ σχολιάστε. Αλλά νομίζω ότι αυτός είναι ο καλύτερος τρόπος."

• Πλεονεκτήματα αυτής της μεθόδου: πρώτον, το περιεχόμενο DOM θα πάει μπροστά από την πλαϊνή γραμμή, κάτι που είναι καλό για τις μηχανές αναζήτησης.
• τίποτα δεν χωράει στο υποσέλιδο
• τυχόν μπλοκ μπορούν να καθαριστούν και τίποτα δεν θα γλιστρήσει στο κάτω περίγραμμα (Έτσι ξεπεράσαμε τα προβλήματα της δεύτερης μεθόδου).

Σε γενικές γραμμές, πώς λειτουργεί:κοιτάξτε τον κώδικα πρώτα έρχεται το περιεχόμενο ακολουθούμενο από sidebar. βάλαμε float σε αυτά τα δύο μπλοκ (φυσικά η πλαϊνή μπάρα ολισθαίνει προς τα κάτω). Μετά από αυτό, ορίσαμε την ιδιότητα sidebar margin-αριστερά:-100%. υπέροχο, είναι και πάλι στη θέση του και εσοχή στο περιεχόμενο με margin-lerft:300px.

html

css

.sidebar(
πλάτος: 300 px;
display:block;
float: αριστερά;
περιθώριο: 0 0 0 -100%;
}
.περιεχόμενο(
min-width:723px;
display:block;
float: αριστερά;
περιθώριο: 0 0 0 220 εικονοστοιχεία;
}

Το απλούστερο παράδειγμα μιας σταθερής αιωρούμενης πλευρικής γραμμής σε HTML+CSS+JS.

Ποια είναι η ιδιαιτερότητά του - κατά την κύλιση, η πλαϊνή γραμμή κολλάει στην κορυφή του παραθύρου, αλλά ταυτόχρονα, όταν η πλαϊνή γραμμή μετακινείται στο υποσέλιδο, τότε ξεκολλάει από την κορυφή της οθόνης και κολλάει στη δική της κάτω μέροςστο υποσέλιδο, με αποτέλεσμα να μην επικαλύπτεται το υποσέλιδο (το υποσέλιδο πρέπει να είναι ψηλά). Αν καταλαβαίνεις τι εννοώ.

Το παράδειγμα λήφθηκε από κάποια τοποθεσία και είναι πολύ πρωτόγονο (και ηθικά ξεπερασμένο), κατάλληλο μόνο για αυτήν τη διάταξη. Περισσότερος καθολικός κώδικας μπορείτε να βρείτε σε αυτό το άρθρο και μπορείτε ήδη να γράψετε τον δικό σας κώδικα για το έργο σας.

Σήμανση HTML για μια απλή σελίδα

Στυλ CSS για μπλοκ περιεχομένου

.header ( πλάτος: 100%; φόντο: μωβ; ύψος: 80 px; ) .content ( πλάτος: 80%; φόντο: μπλε; ύψος: 800 px; float: αριστερά; ) .sidebar ( πλάτος: 20%; φόντο: πράσινο; ύψος: 100 px; float: δεξιά; ) .sidebar.fixed ( θέση: σταθερό; δεξιά: 50%; margin-right: -50%; ) .footer (πλάτος: 100%; φόντο: γκρι; ύψος: 500 px; καθαρό: και τα δυο; )

Σενάριο JS για σταθερή πλαϊνή γραμμή στην κύλιση σελίδας

Μην ξεχάσετε να συμπεριλάβετε το jQuery

$(function() ( var $window = $(window); var $sidebar = $(".sidebar"); var $sidebarTop = $sidebar.position().top; var $sidebarHeight = $sidebar.height() ; var $footer = $(".footer"); var $footerTop = $footer.position().top; $window.scroll(function(event) ( $sidebar.addClass("fixed"); var $scrollTop = $window.scrollTop(); var $topPosition = Math.max(0, $sidebarTop - $scrollTop); if ($scrollTop + $sidebarHeight > $footerTop) ( var $topPosition = Math.min($topPosition, $footerTop - $scrollTop - $sidebarHeight); ) $sidebar.css("top", $topPosition); )); ));

Απαιτείται ένα αιωρούμενο μπλοκ (ή όπως ονομάζεται επίσης μετακινούμενο, σταθερό, κολλημένο) στον ιστότοπο, έτσι ώστε ο χρήστης να βλέπει ένα σταθερό στοιχείο κατά την κύλιση της σελίδας, στην οποία τοποθετείται συχνότερα η διαφήμιση (teaser, banner ή πλαίσιο).

Αλίμονο, οι κανόνες του adsense μας το απαγορεύουν αυτό. Ωστόσο, πολλοί ιδιοκτήτες ιστότοπων αγνοούν τους κανόνες με δική τους ευθύνη. Ίσως δεν τιμωρούνται καν για αυτό, αλλά δεν θα συμβούλευα να ρισκάρουν.

Τοποθετώ το YAN, τα teaser/banner μου σε τέτοια μπλοκ και μερικές φορές, αντί για διαφήμιση, προβάλλω παρόμοιες αναρτήσεις ή κάποιες χρήσιμες πληροφορίες για τον επισκέπτη.

Ας σας πούμε πώς μπορείτε να δημιουργήσετε ένα αιωρούμενο μπλοκ στον ιστότοπό σας.

Μια εργασία:κάντε το τελευταίο μπλοκ στην πλαϊνή γραμμή (πλευρική γραμμή) να επιπλέει. Επιπλέον, ώστε να κολλάει μόνο τη στιγμή που ο χρήστης φτάνει σε αυτό κάνοντας κύλιση και όχι αμέσως όταν ανοίγει η σελίδα. Επίσης, το μπλοκ θα πρέπει να "κολλάει", φτάνοντας στο υποσέλιδο (δηλαδή να μην το επικαλύπτει).

Ο πιο λειτουργικός τρόπος

Υπάρχουν πολλές υλοποιήσεις του sticky block, αλλά δεν λειτουργούν όλες σωστά. Θα πω από προσωπική εμπειρία: Η ίδια μέθοδος εγκατάστασης ενός μπλοκ μπορεί να λειτουργήσει σε έναν ιστότοπο, αλλά εμφανίζονται παρεμβολές σε έναν άλλο.

Παρακάτω είναι ένα παράδειγμα ενός αιωρούμενου μπλοκ που έχει λειτουργήσει σχεδόν σε κάθε ιστότοπο στον οποίο το έχω εγκαταστήσει. Δεν υπήρχαν κατσίκες. Ο κινητήρας επίσης δεν είναι σημαντικός (DLE, WordPress, LiveStreet κ.λπ.).

Επικολλήστε τον ακόλουθο κώδικα HTML στην επιθυμητή θέση της πλαϊνής γραμμής:

$(window).scroll(function() (
var sb_m = 20 ; /* επάνω και κάτω επένδυση */
var mb = 300 ; /* ύψος υπογείου με περιθώριο */
varst = $(window).scrollTop() ;
var sb = $(".sticky-block" ) ;
var sbi = $(".sticky-block .inner" );
var sb_ot = sb.offset() .top;
var sbi_ot = sbi.offset() .top;
var sb_h = sb.height () ;

If(sb_h + $(document).scrollTop() + sb_m + mb< $(document) .height () ) {
if(st > sb_ot) (
var h = Math.round(st - sb_ot) + sb_m;
sb.css(("paddingTop" : h) );
}
αλλού(
sb.css(( "paddingTop" : 0 ) ;
}
}
} ) ;

Σε αυτόν τον κώδικα, μπορείτε να ορίσετε το πάνω, το κάτω και το ύψος του υποσέλιδου σας, π.χ. το ύψος στο οποίο πρέπει να σταματήσει το μπλοκ.

Τώρα συμπεριλαμβάνουμε JS. Για να το κάνετε αυτό, γράψτε στην ενότητα HEAD:

Μπορείτε να χρησιμοποιήσετε το ίδιο το αρχείο header.php περικλείοντας αυτόν τον κώδικα μεταξύ των ετικετών ανοίγματος και κλεισίματος της κεφαλής και τυλίγοντάς τον σε ετικέτες σεναρίου, όπως:

Μπορείτε επίσης να γράψετε αυτόν τον κώδικα σε ετικέτες σεναρίου οπουδήποτε αλλού. Το κύριο πράγμα είναι ότι φορτώνει στις σωστές σελίδες του ιστολογίου. Για παράδειγμα, μπορείτε στο footer.php πριν από το κλείσιμο της ετικέτας σώματος.

Τώρα ας πάμε απευθείας σε αυτόν τον κώδικα. Αποδεικνύεται ότι μετά από 10 pixel από την κορυφή, η σχετική τοποθέτηση αντικαθίσταται από μια σταθερή (δείτε το άρθρο στον παραπάνω σύνδεσμο). Εάν είναι απαραίτητο, στη γραμμή με το else, μπορείτε να επιλέξετε μια τιμή διαφορετική από το μηδέν για την κορυφή και, στη συνέχεια, το μενού που είναι σταθερό στο επάνω μέρος θα έχει εσοχή από την επάνω άκρη της θύρας προβολής κατά αυτήν την τιμή pixel (κατά τη γνώμη μου, αυτό είναι περιττό) .

Σε αντίθεση με τον αρχικό κώδικα, έπρεπε επίσης να προσθέσω πλάτος: "100%", γιατί διαφορετικά το μέγεθος του μενού σε πλάτος θα μειωνόταν, γεγονός που χαλούσε ολόκληρη την εικόνα.

Κοιτάξτε, για λόγους σαφήνειας, θα δώσω τον κώδικα Html που σχηματίζει το επάνω μενού στο πρότυπο ιστολογίου WordPress μου (ζει στο αρχείο header.php από ):

Στο πρότυπό σας, πιθανότατα, η έξοδος των στοιχείων μενού θα ρυθμιστεί χρησιμοποιώντας, για παράδειγμα, μια τέτοια κατασκευή (συνάρτηση), αλλά δεν είναι αυτό το θέμα.

Η συνάρτηση wp_list_pages είναι, φυσικά, καλή (σας επιτρέπει να ρυθμίσετε την ταξινόμηση, να ορίσετε εξαιρέσεις κ.λπ.), αλλά είναι καλύτερο να κάνετε τα πάντα χειροκίνητα μέσω απλού Html, όπως φαίνεται παραπάνω. IMHO.

Είναι σημαντικό εδώ να κατανοήσουμε ότι το όλο θέμα έχει ολοκληρωθεί σε δοχεία δοχείων, και στην κορυφαίαέχει ένα χαρακτηριστικό id="navi". Εδώ θα κολλήσουμε σε αυτό. Βλέπετε στον παραπάνω κώδικα JS εμφανίζεται δύο φορές #navi? Θα χρειαστεί να βάλετε το αναγνωριστικό σας εκεί αντί για #navi (ή μια τάξη, η οποία, όπως θυμάστε, δεν γράφεται μέσω κατακερματισμού, αλλά μέσω κουκκίδας, για παράδειγμα, όπως αυτό: .menu).

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

Αυτό, βλέπετε, δεν είναι καλό. Επομένως, έπρεπε να μπω λίγο στον κώδικα CSS και να προσθέσω με μια τιμή 1000 για το αναγνωριστικό του επιλογέα #navi:

#navi(background:#03658e url(https://website/wp-content/themes/Organic/images/spriteme2.png) repeat-x;background-position:0px -10px;height:31px;z-index:1000 )

Το γεγονός είναι ότι όταν ορίζετε έναν από τους τρεις τύπους τοποθέτησης χρησιμοποιώντας το Position, τότε αυτό το στοιχείο παύει να αλληλεπιδρά με τα συνήθη στοιχεία του κώδικα Html. Αλλά με άλλα παρόμοια τοποθετημένα, θα ανταγωνιστεί για τη θέση «πάνω ή κάτω». Το z-index:1000 μας επιτρέπει να τοποθετούμε το μενού μας προφανώς πάνω από όλα τα άλλα μπλοκ. Διαβάστε το παραπάνω άρθρο για λεπτομέρειες.

Πώς να φτιάξετε μια πλωτή πλευρική γραμμή στο WordPress χωρίς πρόσθετα

Χρησιμοποιώντας τη μέθοδο που περιγράφεται παρακάτω, μπορείτε να κάνετε ολόκληρη την πλαϊνή γραμμή ή μέρος της να επιπλέει (ή με άλλα λόγια, να στερεώσετε σε ένα συγκεκριμένο σημείο στη θύρα προβολής). Εάν αυτή η περιοχή είναι αρκετά μικρή και χωράει σε μία οθόνη (ακόμα και σε μια φορητή συσκευή), τότε μπορείτε να την κάνετε όλα να επιπλέουν.

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

Τα έκανα όλα αυτά γρήγορα και χωρίς να ταλαιπωρούμαι πολύ και να βρίσκω τη βέλτιστη λύση, γιατί από την πλούσια εμπειρία μου στα πειράματα έμαθα το μοτίβο ότι όσο περισσότερες ελπίδες βάζεις σε κάποια ιδέα, τόσο λιγότερο πιθανό είναι να «πυροβολήσεις». Λοιπόν, το αντίστροφο. Σε γενικές γραμμές, δεν είχε νόημα να ασχολούμαστε ακόμα, γιατί η πιθανότητα να ριζώσει όλο αυτό δεν είναι τόσο μεγάλη.

Οπότε μόλις πήρα για να δημιουργήσετε το κάτω μπλοκΜετακίνησα το πάνω μέρος της κύριας πλαϊνής γραμμής μου (στο πρότυπο sidebar.php), μετά το μετέφερα από το επάνω στο κάτω μπλοκ "Το χρησιμοποιώ για να βγάζω χρήματα" και στο τέλος κόλλησα αυτό που ήταν το τέλος στο κύριο ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ. Αποδείχθηκε κάτι σαν αυτό:

Λοιπόν, τώρα έχω μετακινηθεί το μπλοκ "Χρησιμοποιώ για κέρδη" από το επάνω μπλοκ της πλαϊνής γραμμής στο κάτω μέρος. Δεν αποδείχθηκε συντριβάνι, αλλά για "προσωρινό" θα κάνει. Απομένει μόνο να τακτοποιήσουμε όλα αυτά σε ένα αρχείο JS με κώδικα και το κάτω μπλοκ θα αρχίσει να επιπλέει. Ο κώδικας JS μοιάζει με αυτό:

$(document).ready(function()( var br = $.browser; $(window).scroll(function() ( var top = $(document).scrollTop(); if (πάνω< 2561) { $(".sidebar123").css({top: "0", position: "relative", marginLeft: "25px"}); } else if ((!br.msie) || ((br.msie) && (br.version >7))) ( $(".sidebar123").css((πάνω: "52px", θέση: "fixed", marginLeft: "760px")); ) other if ((br.msie) && (br.έκδοση<= 7)) { $(".sidebar123").css({top: "52px", position: "fixed", marginLeft: "25px"}); } }); });

Λάβετε υπόψη ότι αντί για .sidebar123, πρέπει να αντικαταστήσετε την κλάση σας ή το αναγνωριστικό του εξωτερικού κοντέινερ στο οποίο ζει το κάτω τμήμα της πλευρικής γραμμής.

Δεν καταλαβαίνω πολύ καλά αυτόν τον κώδικα (δεν ξέρω JS), αλλά όλα λειτουργούν. Τουλάχιστον εν μέρει. Όταν ορίζετε σταθερή θέση, η αναφορά είναι από το επάνω αριστερό σημείο. Επομένως, με το marginLeft: "760px" τοποθετώ αυτό το μπλοκ ακριβώς στο επίπεδο της πλαϊνής γραμμής (ο αριθμός λήφθηκε μέσω "δοκιμής και σφάλματος").

Η τιμή κορυφής: "52px" ορίζει τη συμπλήρωση του ήδη αιωρούμενου μπλοκ πλαϊνής γραμμής από το επάνω περίγραμμα. Η αξία της κορυφής Ωστόσο, έχω υπήρξε ένα πρόβλημασε περίπτωση που το συνολικό ύψος της κύριας πλευρικής γραμμής ήταν μικρότερο από το ύψος της περιοχής περιεχομένου. Κάτι τέτοιο προέκυψε, για παράδειγμα, κατά την προβολή του αρχείου επικεφαλίδων:

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