Κατασκευή ιστοσελίδων Κατασκευή ιστοσελίδων
Κατασκευάζουμε ιστοσελίδες. Όχι από αυτές που κυκλοφορούν , αλλά από τις άλλες τις καλές ......
More detail
Διαφήμιση Google Adwords Διαφήμιση Google Adwords
Την φτιάξατε την ιστοσελίδα. Αρκεί να μπαίνετε μόνο εσείς ; Πως θα την δουν οι υπόλοιποι; ...
More detail
Φιλοξενία ιστοσελίδων Φιλοξενία ιστοσελίδων
Υπερσύχρονοι servers , σε Ευρωπαϊκά και Ελληνικά datacenters με 99.95% uptime και κα...
More detail

Joomla fixed menu when scrollling

To make a fixed menu when scrolling is Joomla is really easy !

Just need css and a small javascript .

First you need a jquery library. Propably your templates already loads so most of the times you do not have to do anything

Lets say that you have you menu in a class named header_menu

create a js file and give it any name you want. For our example we will call it menu.js

Put inside this code


jQuery("document").ready(function($){
    
    varnav=$('.header_menu');
    
    $(window).scroll(function(){
        if($(this).scrollTop()>136){
            nav.addClass("f-nav");
        }else{
            nav.removeClass("f-nav");
        }
    });
 
});


Add this to your template . Propably edit the index.php and add this code

$doc->addScript($this->baseurl."/templates/".$this->template."/javascript/menu.js");

this means that you have a folder named javascript and inside you put the menu.js file

Last , go to your css and add this

.f-nav {z-index:9999;position:fixed;left:0;top:0;width:100%;}/* this make our menu fixed top */

How does this work?

when your menu ( class header_menu ) goes to the top of the page then the javascript tells him to add af-nav class beside the header_menu class. As you see the f-nav  have position:fixed and top:0px!

thats it!


Διαβάζουμε. Ενημερωνόμαστε. Ψαχνόμαστε. Πινουμε πολλούς καφέδες και συζητάμε.

διαφήμιση google adwords