Форум русской поддержки Joomla!® CMS
03.12.2016, 04:26:44 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Зафиксировать горизонтальное меню в Joomla 3.3

 (Прочитано 921 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Алесксандр
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 2


« : 12.03.2015, 22:23:34 »

Привет, прошу помощи у людей с прямыми руками)
Имеется шаблон Joomla http://demoseite.ah-68.de/joomla/kleinesschwarzes/
Хочется сделать, чтобы при скроллинге страницы вниз, меню, которое под шапкой, прилипло к верху страницы и осталось там зафиксированным, как на примере:
http://joomla-school.com/sozdanie-shablonov/1499-skroliruyushchee-menyu-na-jquery-dlya-joomla.html


Самому сделать по примеру не получилось - кривые руки Cry . Кто отважится решить мою проблему? Что куда прописать в шаблоне (желательно по пунктам)? Кину сотку на телефон тому, кто поможет !
Записан
AlekVolsk
Профи
********

Репутация: +316/-3
Offline Offline

Пол: Мужской
Сообщений: 6452



« Ответ #1 : 13.03.2015, 08:20:10 »

Как здесь: http://volskstroylicey.ru/?
Оборачиваете всю строку меню в отдельный <div id="fixedBox"> и прикручиваете js:
Код
jQuery(document).ready(function($) {
 
 /* функция кроссбраузерного определения отступа от верха документа к текущей позиции скроллера прокрутки */
 function getScrollTop() {
   var scrOfY = 0;
   if (typeof(window.pageYOffset) == "number") {
     scrOfY = window.pageYOffset;
   } else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
     scrOfY = document.body.scrollTop;
   } else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
     scrOfY = document.documentElement.scrollTop;
   }
   return scrOfY;
 }
 
 function fixPaneRefresh(){
   if ($("#fixedBox").length) {
     var top = getScrollTop();
     if (top < 95) {
       $("#fixedBox").css("top",95-top+"px");
       $("#fixedBox").css("box-shadow","none");
     } else {
       $("#fixedBox").css("top","0");
       $("#fixedBox").css("box-shadow","0 9px 27px -14px #000");
     }
   }
 }
 
 /* пересчитываем отступ при прокрутке экрана */
 $(window).scroll(function() {
   if ($(window).width() < 1024) return;
   fixPaneRefresh();
 });
 
});
Есс-но, размеры у вас будут свои, доп.стили тоже, да и скорее всего потребуется общая доверстка шапки.
Не самый удачный пример, но это первое, что под рукой было.
Записан
Алесксандр
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 2


« Ответ #2 : 13.03.2015, 17:04:18 »

А можно поподробней что именно где поменять? Я ж говорю, руки кривые у меня( Вот код меню
Код:
<!-- Start Topnav -->
    <div id="topnav">
      <div class="topnav-inner">
                <div class="topnav">
          <ul class="nav menusf-menu">
<li class="item-101 current active"><a href="/joomla/kleinesschwarzes/" >Startseite</a></li><li class="item-119 deeper parent"><a href="/joomla/kleinesschwarzes/joomla-nutzen.html" >Joomla! nutzen</a><ul class="nav-child unstyled small"><li class="item-136"> ...............и тд и тп</li></ul></li></ul>

        </div>
                        <!-- Start Search -->
        <div id="search">
          <div class="search">
            <div class="search">
<form action="/joomla/kleinesschwarzes/" method="post" class="form-inline">
<label for="mod-search-searchword" class="element-invisible">Suchen...</label> <input name="searchword" id="mod-search-searchword" maxlength="200"  class="inputbox search-query" type="search" size="20" placeholder="Suchen..." /> <button class="button btn btn-primary" onclick="this.form.searchword.focus();">los geht's</button> <input type="hidden" name="task" value="search" />
<input type="hidden" name="option" value="com_search" />
<input type="hidden" name="Itemid" value="101" />
</form>
</div>

          </div>
        </div>
        <!-- Ende Search -->
              </div>
    </div>
    <!-- Ende Topnav -->

Как мне обернуть всё меню в отдельный "<div id="fixedBox">"? не собъется ли шаблон? как потом в админке управлять этим меню, если оно будет по другому прикручено? Может можно как то в скрипте указать, что надо <div id="topnav"> меню, а не "<div id="fixedBox"> ?
Записан
AlekVolsk
Профи
********

Репутация: +316/-3
Offline Offline

Пол: Мужской
Сообщений: 6452



« Ответ #3 : 13.03.2015, 18:55:11 »

Весь <div id="topnav">. Для новичка не совсем тривиально, попробуйте в скрипте fixedBox поменять на topnav, а дальше смотрите, что да как доверстывать, учите мат.часть.
Не справитесь сами - стучите в скайп, на комм. основе.
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet