Πως δημιουργουμε sticky navigation menu στο Wordpress?

rafailidis · 29 Ιουλίου 2012

Γεια χαρα σε ολους.

Θελω το navigation menu να βρισκεται παντα στο οπτικο πεδιο του αναγνωστη οπως εδω: http://www.backslash.gr/demos/jquery-sticky-navigation/

To source code ειναι εδω:

http://www.backslash.gr/content/blog/webdevelopment/6-navigation-menu-that-stays-on-top-with-jquery

Ωραια μεχρι εδω!Επειδη ομως ειμαι τελειως ασχετος...που βαζουμε ολο αυτο τον κωδικα?

Μπορει να μου πει καποιος το how to αλλα σε step by step edition???

Παρεπιπτοντως....υπαρχει ετοιμο plugin για wordpress???

Premium βρηκα αλλα free οχι!

Ευχαριστω!

Lucky Luke · 29 Ιουλίου 2012

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

Στο αρχείο demo.html μέσα στα <head> tags θα βρεις τον εξής κώδικα:

>
<script>
$(function() {
// grab the initial top offset of the navigation
var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;

// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top

// if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
if (scroll_top > sticky_navigation_offset_top) {
$('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });
} else {
$('#sticky_navigation').css({ 'position': 'relative' });
}
};

// run our function on load
sticky_navigation();

// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});

// NOT required:
// for this demo disable all links that point to "#"
$('a[href="#"]').click(function(event){
event.preventDefault();
});

});
</script>

Στην ουσία αυτό το κομμάτο κώδικα κάνει όλη τη δουλειά.

Αυτό θα πρέπει να το προσθέσεις κι εσύ στο δικό σου αρχείο header.php το οποίο βρίσκεται μέσα στο φάκελο του theme του wordpress installation σου πριν το </head>.

Επιπλέον επειδή μέσα στον κώδικα αν δεις αναφέρεται συνεχώς σε ένα #sticky_navigation. Αυτό σημαίνει ότι θα πρέπει να ανοίξεις το αρχείο header,php και να "μαρκάρεις" το menu με αυτό το sticky_navigation ως id.

Δηλαδή άνοιξε το header.php και αντικατεστησε τον κώδικα

>
<div id="botmenu">
<?php wp_nav_menu( array( 'container_id' => 'subnav', 'theme_location' => 'primary','menu_class'=>'sfmenu','fallback_cb'=> 'fallbackmenu' ) ); ?>
</div>

με

>
<div id="sticky_navigation">
<div id="botmenu">
<?php wp_nav_menu( array( 'container_id' => 'subnav', 'theme_location' => 'primary','menu_class'=>'sfmenu','fallback_cb'=> 'fallbackmenu' ) ); ?>
</div>
</div>

Αν είσαι τυχερός θα δουλέψει το παραπάνω απευθείας αλλιώς ενδεχομένως θα χρειαστείς παραπάνω "πείραγμα" στον κώδικα.

Επεξ/σία 29 Ιουλίου 2012 από Lucky Luke

rafailidis · 31 Ιουλίου 2012

η απαντηση για οσους ψαχνουν τη λυση γι'αυτο το προβλημα ειναι εδω:

http://www.fuelyourcreativity.com/how-to-create-a-fixed-navigation-bar-for-your-website/

Lucky Luke σ'ευχαριστω!

Σύνδεση

Πως δημιουργουμε sticky navigation menu στο Wordpress?

Προτεινόμενες αναρτήσεις

rafailidis

Lucky Luke

rafailidis

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση