Main menu

Очень полезная приблуда для wordpress, называется

Sticky Menu (or Anything!)

Позволяет прицеплять меню или любой другой контейнер (div) к верху экрана. Полдня грохнул пока ее нашел. Возможно на джумлу есть что-то похожее.

Вот еще лучше чем нижнее

<script type='text/javascript'>
        jQuery(document).scroll(function(){
            if(jQuery(this).scrollTop() > 99){
                jQuery('#menubar').css('position','fixed');
                jQuery('#menubar').css('top','0');
                jQuery('#menubar').css('left','0');
                jQuery('#menubar').css('width','100%');
                jQuery('#menubar').css('-webkit-box-shadow','0 0 20px 0 rgba(0,0,0,0.25)');
                jQuery('#menubar').css('-moz-box-shadow','0 0 20px 0 rgba(0,0,0,0.25)');
                jQuery('#menubar').css('box-shadow','0 0 20px 0 rgba(0,0,0,0.25)');
            } else{
                jQuery('#menubar').css('position','static');
                jQuery('#menubar').css('-webkit-box-shadow','none');
                jQuery('#menubar').css('-moz-box-shadow','none');
                jQuery('#menubar').css('box-shadow','none');
            }
        });
    </script>

Вместо #menubar подсталяем свой модуль, ну и стили

#menubar {
background: #fff;
z-index: 9999999;
width: 100%;
-webkit-transform: translate3d(0, 0, 0);
padding-top: 20px !important;
padding-bottom: 20px !important;
}

Вот универсальное решение

JQuery

универсальный код
Меню, которое прилипает к верхнему краю экрана, когда вы листаете страницу вниз.

Сейчас такое меню весьма, что называется, в тренде. Вы можете обнаружить такие же на сайтах Яндекса, Гугла и многих других.
В качестве демо мы установили такое "прилипающее" меню непосредственно на этой странице, но недонастроили, поленились, чего с вами, будем надеяться, не случится.

Сразу о минусах

В правой колонке табы под заголовком "Недавно" не раскрываются. Конфликт скриптов JQuery. Прилипающее меню работает на JQuery 1.8.2, а табы на более свежей. Так что прежде чем предъявлять публике, проверьте, будет ли ваш сайт совмещать их.

Как установить

Ну а теперь, собственно код. Мы собрали его с сайта по строчке, поэтому не судите строго, лучше предложите лучший вариант, если знаете.
Итак, нужно вычислись, как у вас называется div, который вмещает ваше меню (например, у нас это <div id=topmenu_holder>) и, соответственно, вписать в таблицу стилей такие строки:


01.#topmenu_holder {
02. 
03.background: none repeat scroll 0% 0% #212325;
04. 
05.width: 1040px;
06. 
07.display: block;
08. 
09.position: relative;
10. 
11.z-index: 1000;
12. 
13.}

Затем нужно сослаться на JQuery, например так:


1.<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
2. 
3.<script type="text/javascript" src="/ПУТЬ ДО СКРИПТА НА ВАШЕМ СЕРВЕРЕ/jquery.sticky.js"></script>


Ну и в конце концов вставить вот этот маленький кусочек скрипта:


01.<script>
02. 
03.$(window).load(function(){
04. 
05.$("#topmenu_holder").sticky({ topSpacing: 0 });
06. 
07.});
08. 
09.</script>