Автор Тема: Плавающее горизонтальное меню  (Прочитано 1467 раз)

26 Июль 2013, 03:49:51
  • Пользователь
  • **
  • Сообщений: 64
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Версия 1.5.2.0
Взял модуль стандартного горизонтального меню, вставил разметку пунктов меню, вставил css, подключил файл .js, но никак не могу вставить код:
<script>
//config
$float_speed=1500; //milliseconds
$float_easing="easeOutQuint";
$menu_fade_speed=500; //milliseconds
$closed_menu_opacity=0.75;

//cache vars
$fl_menu=$("#fl_menu");
$fl_menu_menu=$("#fl_menu .menu");
$fl_menu_label=$("#fl_menu .label");

$(window).load(function() {
menuPosition=$('#fl_menu').position().top;
FloatMenu();
$fl_menu.hover(
function(){ //mouse over
$fl_menu_label.fadeTo($menu_fade_speed, 1);
$fl_menu_menu.fadeIn($menu_fade_speed);
},
function(){ //mouse out
$fl_menu_label.fadeTo($menu_fade_speed, $closed_menu_opacity);
$fl_menu_menu.fadeOut($menu_fade_speed);
}
);
});

$(window).scroll(function () {
FloatMenu();
});

function FloatMenu(){
var scrollAmount=$(document).scrollTop();
var newPosition=menuPosition+scrollAmount;
if($(window).height()<$fl_menu.height()+$fl_menu_menu.height()){
$fl_menu.css("top",menuPosition);
} else {
$fl_menu.stop().animate({top: newPosition}, $float_speed, $float_easing);
}
}
</script>
Все время происходит сбой и пишет просто, что нет соединения с сервером и все - никаких указаний на ошибку не вылазит. Подскажите как мне сделать плавающее меню?
Вот сорцы данного меню:
26 Июль 2013, 10:28:42
Ответ #1
  • Администратор
  • Ветеран
  • *****
  • Сообщений: 102479
  • Репутация: +34219/-0
    • Просмотр профиля
Js скрипты подключаются в файле PHP
$this->context->controller->addJS(путь к вашему файлу/file.js');или же в шаблоне TPL
{literal}
<script type="text/javascript">
....
</script>
{/literal}
29 Июль 2013, 12:17:32
Ответ #2
  • Пользователь
  • **
  • Сообщений: 64
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Что-то никак не могу разобраться.
Может кто-нибудь уже раньше переделывал модули - как сделать, что бы обычное горизонтальное меню стало плавающим?
29 Июль 2013, 12:21:41
Ответ #3
  • Ветеран
  • *****
  • Сообщений: 885
  • Репутация: +206/-0
    • Просмотр профиля
JS + css.
Примеров полно. На jQuery можно.
29 Июль 2013, 12:23:49
Ответ #4
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 86543
  • Репутация: +25419/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Плавающее - это выдвигающиеся справа/слева?
29 Июль 2013, 12:27:49
Ответ #5
  • Пользователь
  • **
  • Сообщений: 64
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Под плавающим я имею ввиду липкое меню.
Делаю по примерам, но почему то меню не прокручивается вместе с содержимым страницы.
29 Июль 2013, 12:34:14
Ответ #6
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 86543
  • Репутация: +25419/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Вот пример bootstrap.
Его нужно выносить в отдельный блок и менять стили как в примере.
29 Июль 2013, 12:46:01
Ответ #7
  • Пользователь
  • **
  • Сообщений: 64
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Я там не нашел примера плавающего меню. Я делаю по примеру - прикрепил файл примера в сообщении.
29 Июль 2013, 12:51:19
Ответ #8
  • Ветеран
  • *****
  • Сообщений: 33071
  • Репутация: +26762/-0
    • Просмотр профиля
На самом сайте есть такое меню, всегда вверху.
Скачиваешь библиотеку bootstrap к себе на сайт.
Добавляешь стили и js файлы и делаешь как в примере.
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
  <div class="container">
    <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar" type="button">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a href="./" class="brand">Bootstrap</a>
    <div class="nav-collapse collapse">
        <ul class="nav">
            <li>
               <a href="./index.php">Главная</a>
           </li>
        </ul>
    </div>
  </div>
</div>
29 Июль 2013, 12:55:28
Ответ #9
  • Пользователь
  • **
  • Сообщений: 64
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Спасибо - буду пытаться делать.