0
Заголовок темы

Раздвижные вкладки в Adobe Muse

Всем привет! Как сделать раздвижную панель как на сайте teore.ma (чтобы при нажатии фото - под ним выезжал текст и нижние блоки также смещались вниз). Есть стандартная раздвижная композиция в Muse, но она только по горизонтали работает, а нужно по вертикали.
Всем привет! Как сделать раздвижную панель как на сайте teore.ma (чтобы при нажатии фото - под ним выезжал текст и нижние блоки также смещались вниз). Есть стандартная раздвижная композиция в Muse, но она только по горизонтали работает, а нужно по вертикали.
Привет.
Вопрос не совсем точный, т.к. стандартная "Раздвижная панель" как раз-таки раздвигается вертикально, т.е. вниз (просто вкладки расположены не вертикально), но благодаря примеру я вроде понял, что нужно.

Для этих целей подойдет стандартный виджет "Панели со вкладками". Но без легкого шаманства не обойтись. Как, наверно, все знают, что у панелей со вкладками высота фиксированная и будет зависеть от той вкладки, где контент больше по высоте.
Чтобы заставить общий контейнер уменьшаться, при открытии вкладки с меньшим контентом,  нужно добавить небольшой код в секцию head сайта:



Вот этот код:

<style>
   .TabbedPanelsContent{padding-bottom:10px!important}
</style>


Где вместо значения 10px укажите размер желаемого отступа между краем панели и содержимым вкладки.

Но и это еще не решит полностью проблему - если сейчас поместить ниже панели любой конетент, то при открытии вкладки меньшей высоты нижестоящий контент не будет смещаться вверх плотнее, а просто увеличится расстояние до нижестоящего объекта.
Как это исправить? Да, очень просто.

Берем стандартный виджет "Кнопка состояния", удаляем из нее лишнее (можно убрать зваливку и обводку), раздвигаем ее под нужный размер и помещаем внутрь неё нашу панель со вкладками. Это всё.
Теперь при раскрытии вкладок разной высоты, общий контейнер, в нашем случае это кнопка состояния, будет подстраиваться под высоту контента каждой вкладки, а нижестоящие объекты будут сдвигаться, соблюдая одинаковое расстояние от низа каждой вкладки:

Обновлено 17 Май 2016, 21:30
Image 4.png (755 Кб)  
Спасибо, очень помогли! А как сделать фильтрацию по цвету, чтобы менялись картинки с анимацией как здесь omega-kuhni.ru. Это тоже панель вкладок задействована?
Спасибо, очень помогли! А как сделать фильтрацию по цвету, чтобы менялись картинки с анимацией как здесь omega-kuhni.ru. Это тоже панель вкладок задействована?

Да, конечно, можете попробовать использовать панель со вкладками, но анимации там не будет.
Есть еще платный виджет "Фильтр" от E-potok, попробуйте его - там при фильтрации есть анимация.
А можно в кнопку состояния добавить ещё якорную ссылку? Мало ли посетитель раздвинет панель, не закроет и пройдёт по ссылке, ведущей на контент, находящийся ниже панели. А якорная ссылка осталась на месте, и получается, что он не совсем попадёт в ту область экрана, куда изначально вела якорная ссылка?
А можно в кнопку состояния добавить ещё якорную ссылку? Мало ли посетитель раздвинет панель, не закроет и пройдёт по ссылке, ведущей на контент, находящийся ниже панели. А якорная ссылка осталась на месте, и получается, что он не совсем попадёт в ту область экрана, куда изначально вела якорная ссылка?
К сожалению, нельзя. Якоря ставятся "жестко" и не могут сдвигаться.
Вопрос еще по данному стандартному виджету (Tabbed panels). Как сделать, чтобы изначально все закладки были закрыты.
Вопрос еще по данному стандартному виджету (Tabbed panels). Как сделать, чтобы изначально все закладки были закрыты.
Используйте "Композицию". Вкладки так не сделать
Да, это был бы вариант, если бы они были тянущиеся... а как то принудительно можно закрыть самую первую легким шаманством? или вариант, что первая вкладка будет шириной 1пх, но тогда нужно чтобы именно она была такой ширины, в отличие от остальных с пропорциями. был бы еще как вариант поместить панель в аккордион, но в аккордионе нужно тогда шаманить, чтобы вкладка отрабатывала только 1 раз на открытие....
https://forums.adobe.com/message/5677248#5677248<br />
тут как раз пишут про аккордион, только вопрос как сделать кнопку на аккордионе инвизибл в положении актив...
https://forums.adobe.com/message/5677248#5677248

тут как раз пишут про аккордион, только вопрос как сделать кнопку на аккордионе инвизибл в положении актив...
Сделайте её невидимой в настройках соотв. состояний, в чём проблема? Либо я вас не понял.
Наверное не поняли, потому что я плохо объясняю. Помещаем таббед панель в аккордион. В аккордионе оставляем одну вкладку, с таббед панел внутри. Изначально аккордион закрыт. Нажимаем на кнопку аккордиона, раскрывается вкладка с таббед панель. Теперь нужно сделать так, чтобы не было срабатывания аккордиона на закрытие его вкладки снова. Так понимаю, на эту вкладку нужно навесить график стайл в положении актив - инвизибл, чтобы она не закрывалась. Убирание заливок и текстов делает ее прозрачной, но она также отрабатывает на закрытие.
Наверное не поняли, потому что я плохо объясняю. Помещаем таббед панель в аккордион. В аккордионе оставляем одну вкладку, с таббед панел внутри. Изначально аккордион закрыт. Нажимаем на кнопку аккордиона, раскрывается вкладка с таббед панель. Теперь нужно сделать так, чтобы не было срабатывания аккордиона на закрытие его вкладки снова. Так понимаю, на эту вкладку нужно навесить график стайл в положении актив - инвизибл, чтобы она не закрывалась. Убирание заливок и текстов делает ее прозрачной, но она также отрабатывает на закрытие.

Нет, стандартными средствами такое не сделать. Скажите, а чем обусловлена бредовость этой затеи? (по другому я это не могу назвать. Мне кажется, это тот случай, когда человек уперся рогом в задачу, которая фактически ничего полезного для пользователя сайта не дает и может запросто быть заменена).
Быть может вы это видели на каком-то сайте, тогда покажите пример. Рельно, не понятна ценность этой задачи.
1. нужна тянущаяся форма с горизонтальными вкладками. 
2. нужно чтобы изначально все вкладки были закрыты.
Объяснять, почему изначально именно все закрыты нужны не буду, просто поверьте, что так необходимо... был бы очень рад Вашей помощи...
1. нужна тянущаяся форма с горизонтальными вкладками. 
2. нужно чтобы изначально все вкладки были закрыты.
Объяснять, почему изначально именно все закрыты нужны не буду, просто поверьте, что так необходимо... был бы очень рад Вашей помощи...
Слишком много недопонимания и неточностей в ваших вопросах. Поэтому я просил пример и разумное объяснение, быть может это помогло хоть как-то приблизиться к решению вашей задачи.
Вот сейчас, опять морочите голову:
1.Какая еще форма, речь уже про форму?
2.Как сделать, чтобы изначально были закрыты все вкладки, вроде уже обсудили. Т.е. просто настроить соотв. образом "Раздивжную панель" (вы ее называете "аккордеон").
А если сделать триггер вкладки в активном состоянии прозрачным, то и пользователь не будет даже пытаться на него нажать (ну да и нажмет, то в чем проблема-то? Просто откроет, если нужно снова)

Обновлено 1 Авг 2016, 11:48
1. извиняюсь, имел ввиду конечно панель.

через подробнее не вариант. Визуально выглядит все так: закладки таббед панель - графические, они представляют собой объекты (чтото типа меню). 

Механика должна быть в итоге такая: изначально пользователь видит только верхние "уши" вкладок панели, затем при нажатии на любую кнопку таббед панели, она раскрывается вниз 1 раз и далее пользватель работает уже с открытой панелью.

Изначально неправильно показывать контент закладки первого объекта (самая левая вкладка), поэтому была идея использовать поверх таббед панели аккордион. Но сейчас я уже понимаю, что аккордион не получится использовать...
 
1. извиняюсь, имел ввиду конечно панель.

через подробнее не вариант. Визуально выглядит все так: закладки таббед панель - графические, они представляют собой объекты (чтото типа меню). 

Механика должна быть в итоге такая: изначально пользователь видит только верхние "уши" вкладок панели, затем при нажатии на любую кнопку таббед панели, она раскрывается вниз 1 раз и далее пользватель работает уже с открытой панелью.

Изначально неправильно показывать контент закладки первого объекта (самая левая вкладка), поэтому была идея использовать поверх таббед панели аккордион. Но сейчас я уже понимаю, что аккордион не получится использовать...
 
Теоретически сейчас вижу решение такое (надо пробовать):
1.Берете виджет "Вкладки" (табы). Очищаете сожержимое каждой вкладки. Настраивайте визуальную часть, чтобы видны были только кнопки, а у содержимого не было рамки. Настраиваете высоту содержимого минимальной (чтобы только поместить по высоте закрытую панель).
2.Берете "Раздвижную панель". Убирайте оформление и обводку полностью, и у триггера, и у содержимого. Оставляете панель в закрытом виде.
3.Вставляете такую настроенную панель в содержимое каждой вкладки.
4.Далее, нам потребуется виджет "Click Remote". При помощи виджета нужно перенаправить клик по вкладке табов на триггер для раскрытия панели. В итоге, при клике на вкладку, должна одновременно раскрыться вложенная панель (изначально закрытая).
Все понял, один вопрос, где взять виджет "Click Remote". А так больше спасибо!
Все понял, один вопрос, где взять виджет "Click Remote". А так больше спасибо!
Думаю, запросто найдете при помощи поисковика (по запросу "виджет перенаправления клика" или "click remote". В нашем каталоге такого виджета нет. Но в принципе, он существует, по-моему даже не один вариант.
Александр, я вот сделал, как вы написали, прописал кусочек этого кода, все сработало замечательно, но теперь если я нажимаю на вкладку, в которой меньше  контекста, чем на самой галвной вкладке и листаю страницу вниз, то после футера появляется белое пространство, из-за того, что в настройках то высота страницы задана именно такая, как стоит на главной вкладке. Вот ссылка, так будет понятнее: astelo.ru/deti1
Присоединяюсь к вопросу Biyama (Гость). Как это все поправить, чтобы размер страницы не скакал и футер был всегда самым нижним элементом и на своем месте?

Александр, я вот сделал, как вы написали, прописал кусочек этого кода, все сработало замечательно, но теперь если я нажимаю на вкладку, в которой меньше  контекста, чем на самой галвной вкладке и листаю страницу вниз, то после футера появляется белое пространство, из-за того, что в настройках то высота страницы задана именно такая, как стоит на главной вкладке. Вот ссылка, так будет понятнее: astelo.ru/deti1

Biyama, в вашем сообщениии уже есть ответ. Просто задайте в настройках страницы минимальную высоту меньше (можно любую, например 500, или 1000px).

Присоединяюсь к вопросу Biyama (Гость). Как это все поправить, чтобы размер страницы не скакал и футер был всегда самым нижним элементом и на своем месте?

Sergee, вы присоединяетесь, но в вашем вопросе речь совсем про другое, как  я понимаю. Почитйте вот тут, по моему это вам поможет разобраться.
Добрый день. Если есть возможность скиньте пожалуйста мьюзовский файл с настроенной раздвижной панелью.
Делаю все как прописано выше, но высота во вкладках все-равно фиксированная остается по размеру самой длинной.
Добрый день. Если есть возможность скиньте пожалуйста мьюзовский файл с настроенной раздвижной панелью.
Делаю все как прописано выше, но высота во вкладках все-равно фиксированная остается по размеру самой длинной.
Здравствуйте.
Загрузите ваш тестовый пример на хостинг и дайте ссылку, либо прикрепите ваш Muse-файл, чтобы можно было глянуть, как у вас получилось. Я скажу, что не так.
Все , я решил проблему. Спасибо
Обновлено 15 Сен 2016, 20:14


Сообщение
Ник *
Ваш e-mail *
Защитный код *
 
Опрос
Каких виджетов, по вашему мнению, до сих пор не хватает (не достаточно раскрыта тема)?
Мувилаб рекомендует: быстрый хостинг с защитой от DDos атак!