1. Приветствуем Вас на неофициальном форуме технической поддержки XenForo на русском языке. XenForo - коммерческий форумный движок от бывших создателей vBulletin, написанный на PHP.

Ракетная панель

Тема в разделе "Вопросы по стилям, изменения в CSS и шаблонах", создана пользователем infis, 26.10.2011.

Загрузка
  1. infis

    infis Местный

    Регистрация:
    27.06.11
    Сообщения:
    5 966
    Симпатии:
    3 548
    Версия XF:
    1.5.9
    Ковыряюсь тут потихонечку с открепляемой панелью (на просторах интернета таковая называется ракетной). Суть в том, что панель открепляется при скролинге, дабы оставаться постоянно видной (сверху страницы). Так вот проблема в том, что не могу ее отцентрировать, да и внешний вид оставляет желать лучшего.

    А теперь вопросы:

    1. Как можно ее отцентрировать, сохранив по возможности ее истинное положение по ширине независимо от размера окна (если стиль резиновый, например)?
    2. Как сохранить ее цвет, включая прозрачный фон, если уголки присутствуют?
    3. Как думаете, может есть смысл в таком случае копировать уголки сверху в нижние углы, которые обычно не скругляются (зависит от стиля)?
    4. Ну и напоследок, как такую панель сделать максимально совместимой с любым стилем, чтобы избежать лишних правок? В идеале стиль панели должен быть вообще автоматически подгоняемый под текущий стиль.

    Вот пример того, что получилось на дефолтном стиле - лично мне такое поведение не нравится, хочется красивее.
    Не откреплена.png Откреплена.png
    Кстати, возможно, будет проще панель вообще сделать совершенно в своем стиле или в нескольких заранее заданных стилях по типу гаммы или банально "темная" и "светлая"? При этом 1-й вопрос сохраняется, так как совсем не хочется менять шрифт, например. Желательно ведь плавное открепление и последующее ее закрепление?

    Вот такой стиль используется для открепленной панели (скриншоты самой панели во вложении):
    Код:
    .floater{
    position:fixed;
    top:0px;
    z-index:999;
    height:50px;
    width:1100px;
    border-top:none;
    background-color: #F1F1F1;
    border:1px solid #000000;
    color:#ccc;
    display:block;
    clear:both;
    margin-left:auto;
    margin-right:auto;
    float:left;
    
    box-shadow: 0 0 7px rgba(0,0,0,0.4);
        -webkit-box-shadow: 0 0 7px rgba(0,0,0,0.4);
        -moz-box-shadow: 0 0 7px rgba(0,0,0,0.4);
        border-radius: .214em;
        -webkit-border-radius: .214em;
        -moz-border-radius: .214em;
    
    }
    --- добавлено : Oct 26, 2011 9:24 AM ---
    Блин. Еще один косяк с панелью обнаружился. Выезжающие меню (панели), которые отображаются при задержке курсора мыши или при нажатии на кнопку слева от кнопки меню, остаются в результате на старых местах, а не перемещаются вместе с панелью. Естественно, в результате их либо не видно (если далеко внизу находишься), либо видно частично.
     
  2. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2 604
    Симпатии:
    1 660
    Версия XF:
    1.5.10
    1. Если заранее известна ширина то достаточно указать left: 50%; margin-left: -половина ширины блока;
    Если неизвестна то никак. Блок будет либо 100% по ширине, либо получит такую ширину, что пустого места между блоками не будет. Это будет не очень красиво.
    Можно конечно попробовать задействовать параметры из pageWidth, то бишь margin-left и right. Тогда всё реализуемо.
    Код примерно такой:

    Код:
    #navigation .pageContent
    {
    left: 0px;
    right: 0px;
    margin-left: @pageWidth.margin-left;
    margin-right: @pageWidth.margin-right;
    position: fixed;
    }
    Обязательное условие: в pageWidth отступы должны быть добавлены в соответствующие поля, а не в поле для дополнительного css.

    2,3,4 - отмените собственные стили и примените только модификацию выше.
    То что будет везде работать не гарантирую, но должно работать во всех слабо модифицированных стилях.
     
  3. infis

    infis Местный

    Регистрация:
    27.06.11
    Сообщения:
    5 966
    Симпатии:
    3 548
    Версия XF:
    1.5.9
    Так. Панель автоматом вписывается в ширину блока pageConent, хотя слева и справа внутри панели расстояние до пунктов меню меняется. В принципе, это не существенно.
    В общем почти нормально, но не работают меню на этой панели. Вернее, в открепленном состоянии они рисуются на том месте, где располагалась панель без открепления.
    И в стиле Metro, к сожалению, фон прозрачный, а потому выглядит такая плавающая панель экстравагантно, но не удобно :)
    Таким образом, осталось победить выезжающие меню на этой панели и автоматом копировать фон, если он имеется. Тогда можно будет считать такой мелкий грязный хак шаблонов вполне уместным.

    Но вообще, конечно, нужно будет попробовать через хуки это добавить, чтобы оформить в виде плагина без прямой правки шаблонов.
     
  4. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2 604
    Симпатии:
    1 660
    Версия XF:
    1.5.10
    Выпадающие меню просто так не пофиксить, они через js запрашиваются. Подгружаются в самом конце html, позиционируются тоже через js. Так что простыми хаками их не прикрепить.

    В metro у меня получилось сделать фиксированную панель, но только без логотипа. Фон можно тоже туда поставить, но это будет не очень красиво выглядеть. Стоит ли?
     
  5. infis

    infis Местный

    Регистрация:
    27.06.11
    Сообщения:
    5 966
    Симпатии:
    3 548
    Версия XF:
    1.5.9
    Блин. А без этих меню грустно как-то получается :(
    По большому счету панель ведь имеет реально два класса. Первый класс описывает в обычном состоянии, а второй класс описывает открепленный вариант. Т.е. класс открепленной панели называется в моем случае как floater.
    Код:
        if ($(window).scrollTop()>$top1)
        {
            $('#navigation').addClass('floater');
        }
        else
        {
            $('#navigation').removeClass('floater');
            }
    ...
    
    Поэтому в открепленном варианте задать фон можно и нужно, если стиль подразумевает там прозрачный фон. В общем это решаемо и не мешает.

    Эх, блин. Как заставить эти выезжающие меню отображаться в нужном месте?
     
  6. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2 604
    Симпатии:
    1 660
    Версия XF:
    1.5.10
    Есть одно решение как это сделать. Говорю конкретно для metro, для других стилей отдельные параметры надо менять, так как это очень грязный хак.

    Код:
    #logo
    {
        position: absolute; /* чтобы навигация не слетала */
    }
    
    body #navigation
    {
        margin-left: 278px; /* отступ от ширины логотипа */
        position: fixed;
    }
    Соответственно можно на #navigation поставить свой фон и что угодно.

    Почему это работает я кажется разобрался. Позиционирование выпадающих меню рассчитывается исходя из #navigation, т.е. если там поставить fixed то и у них тоже будет позиционирование fixed. Могу и ошибаться, т.к. в js не разбираюсь :)
     
  7. Pepelac

    Pepelac Продам луц в бутылках

    Регистрация:
    28.09.10
    Сообщения:
    1 794
    Симпатии:
    1 361
  8. infis

    infis Местный

    Регистрация:
    27.06.11
    Сообщения:
    5 966
    Симпатии:
    3 548
    Версия XF:
    1.5.9
    Буду пробовать. А пока порылся на офе. Откопал вот такое решение. Не совсем то, что мне нужно, но выглядит тоже не плохо. Только вот я не смог прикрутить их решение к себе. Код присутствует, но не выполняется в принципе.
    --- добавлено : Oct 26, 2011 12:48 PM ---
    Блин. Уже нашел. Не хочет у меня работать. Не могу понять, почему.

    А главное отличие их решения от моей задачи - мне нужна полная панель навигации, а не только нижняя часть.
    --- добавлено : Oct 26, 2011 1:11 PM ---
    Стоп. Их решение работает, но со стилем Metro не работает. В FireBug видно, что меняется стиль div с id="header", но визуально ничего не меняется.
     
  9. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2 604
    Симпатии:
    1 660
    Версия XF:
    1.5.10
    Не знаю почему не работает. Достаточно прописать:
    Код:
    body #headerMover #header
    {
    position: fixed;
    }
    И всё работает как надо :) Даже выпадающие меню.
     
  10. infis

    infis Местный

    Регистрация:
    27.06.11
    Сообщения:
    5 966
    Симпатии:
    3 548
    Версия XF:
    1.5.9
    А почему у меня не работает? Поисковое меню работает без проблем. А вот другие выпадающие меню отображаются совсем не там, где надо.
    И да, через EXTRA.css так работает. А вот через скрипт - нет.
     
  11. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2 604
    Симпатии:
    1 660
    Версия XF:
    1.5.10
    Почему через скрипт не работает не знаю, если через extra работает то зачем через скрипт? :)
     
  12. infis

    infis Местный

    Регистрация:
    27.06.11
    Сообщения:
    5 966
    Симпатии:
    3 548
    Версия XF:
    1.5.9
    Из принципа :)
    Если по существу, то позиционирование панели в таком случае не корректное, так как она тупо на месте стоит, а не прилепляется к верху окна. Ведь мне нужна не вся шапка, а только навигационная часть.
    Ну а по поводу выпадающих меню - у меня так и не работают корректно.
     
  13. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2 604
    Симпатии:
    1 660
    Версия XF:
    1.5.10
    Там аддон заменяет свойства у #header, а надо у body #headerMover #header
     
  14. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2 604
    Симпатии:
    1 660
    Версия XF:
    1.5.10
    Решение получилось вот таким:

    Код:
    <script type="text/javascript">
        $(function() {
            $(window).scroll(function(){
                ($(window).scrollTop() > {xen:calc '36'}) ?
                    $('body #headerMover #header').stop().animate({'opacity':'0.5'},400).css({'position':'fixed','top':'0','z-index':'5000','background-color':'@pageBackground'}):
                    $('body #headerMover #header').stop().animate({'opacity':'1'},400).css({'position':'absolute','top':'36px','background-color':'transparent'});
                });
            $('#header').hover(
                function(){ if ($(window).scrollTop() > {xen:calc '36'}) $(this).stop().animate({'opacity':'1'},400);},
                function(){ if ($(window).scrollTop() > {xen:calc '36'}) $(this).stop().animate({'opacity':'0.5'},400);}
            );
        });
    </script>
     
  15. infis

    infis Местный

    Регистрация:
    27.06.11
    Сообщения:
    5 966
    Симпатии:
    3 548
    Версия XF:
    1.5.9
    Выпадающие меню не работают, к сожалению.
     
  16. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2 604
    Симпатии:
    1 660
    Версия XF:
    1.5.10
    Хм, очень странно. Я у себя на сайте добавил только мой скрипт и по какой-то магии всё работало как надо. Мне кажется CSS ещё может мешать где-нибудь.
     
  17. infis

    infis Местный

    Регистрация:
    27.06.11
    Сообщения:
    5 966
    Симпатии:
    3 548
    Версия XF:
    1.5.9
    Найти бы его... Я в личке отписал, где я экспериментирую. Сейчас обновлю до 4-й беты и буду мучить дальше. Вас :)
     
  18. aresstokrat

    aresstokrat Пользователь

    Регистрация:
    25.10.13
    Сообщения:
    11
    Симпатии:
    0
    Версия XF:
    1.2.2
    а у меня вообще нет этой панели сверху, как здесь. Как включить?
     
  19. adder

    adder Местный

    Регистрация:
    08.10.10
    Сообщения:
    1 164
    Симпатии:
    846
    Версия XF:
    1.3.4
    Вы о какой панели говорите? О штатной навигации или о самодельной (здесь на самом верху)?
     
  20. aresstokrat

    aresstokrat Пользователь

    Регистрация:
    25.10.13
    Сообщения:
    11
    Симпатии:
    0
    Версия XF:
    1.2.2
    о штатной, по дефолту у меня не оказалось
     

Поделиться этой страницей