Кросс-браузерное, чистое решение для выпадающих меню в разных кадрах?

Question

Позвольте мне начать с того, что я действительно люблю Superfish (& jQuery). К сожалению, это - по-видимому? - не предлагает поперечной поддержки из коробки.

Ситуация: сайт экстрасети, состоящий из 2 фреймов, разделенных по горизонтали. Верхняя рамка (самая маленькая) содержит меню. При наведении курсора на это меню «выпадающий» контент отображается в нижнем фрейме (конечно же, над остальными элементами). Вот пример (и собственно, решение, которое мы используем сегодня): http://javascript.cooldev.com/scripts/coolmenu/demos/frames/

Так кто-нибудь знает способ создать чистое (используя стандартный HTML / CSS и как можно меньше JS) решение? Любая помощь будет оценена! :)

Answer 1

Я полагаю, что армии возьмут на себя роль «бросить свои кадры», поэтому я не буду. Я предполагаю, что вы сообщили о бескаркасных альтернативах и пришли к выводу, что вам нужны кадры (по любой [абсурдной] причине).

Короткая история: вы не можете вырваться из рамки, так же, как вы не можете вырваться из окна. Весь контент содержится внутри фрейма / окна - нет возможности пролистать контент.

Тем не менее, у вас осталось два варианта.

1. Ваш родительский документ является обычным документом, содержащим два фрейма, и все документы обслуживаются с одного хоста ( SOP ). В этом случае ваш фрейм меню может создавать элементы в родительском фрейме, которые фактически перекрывают сами фреймы. Таким образом, вы можете расположить элемент в родительском фрейме так, чтобы он отображался под соответствующим элементом фрейма меню, в то же время индексируя его по фрейму содержимого
2. Ваш родительский фрейм является документом frameset и поэтому не принимает никакого содержимого, кроме фреймов. Тебе не повезло. Единственное, что вы можете сделать, это заставить ваш фрейм меню выполнить тот же трюк, описанный в (1), но добавить элементы меню к фрейму контента.

Любой вариант - отстой. Если у вас есть возможность, откажитесь от своих кадров. Любой тупой серверный язык (php, ruby, python,…) позволяет вам извлекать часто используемые компоненты (например, навигацию) в отдельные файлы и связывать их в любом другом имеющемся документе. SSI тоже может быть вариантом.

Answer 2

Если единственная причина, по которой вы используете рамку, заключается в том, чтобы меню были прикреплены к верхней части окна, тогда вы можете просто использовать position: fixed в CSS.

Answer 3

Построение системы выпадающего меню, которая пересекает фреймы, похоже на построение обычной системы выпадающего меню (наведите курсор мыши на меню «голова», покажите меню «тело»; мышь из головы, скройте тело и т. Д. .), кроме:

• Поскольку элементы на самом деле не могут пересекать границы кадра, лучшее, что вы можете сделать, это поместить голову в одном кадре, а тело - в другом (например, COOLjsMenu).

• Чтобы координировать две половины, вы можете (в зависимости от ситуации), чтобы один кадр непосредственно управлял элементами другого кадра, или передавать сообщения между кадрами и каждый кадр управлял своими собственными элементами.

Таким образом, дополнительная сложность заключается в том, как управлять двумя половинами:

• Если оба фрейма происходят из того же источника , то JavaScript из одного фрейма может напрямую манипулировать элементами другого фрейма. (Поскольку вы используете COOLjsMenu, я предполагаю, что это относится к вашей экстрасети.)

• Если кадры происходят из разных источников, то они не могут манипулировать элементами друг друга, хотя вы все равно сможете передавать сообщения между кадрами:

  • Если вам требуется только поддержка «современных» браузеров (Firefox 3+, Chrome, Safari 4+, IE 8+, Opera 9.5+), то вы можете использовать window.postMessage().

  • Если вам требуется поддержка старых браузеров (а именно IE 6-7), вы можете использовать easyXDM (который также использует window.postMessage(), если доступно в браузере пользователя).

  В этом случае вам потребуется JavaScript в каждом кадре для управления его собственными элементами и связи с другим кадром.

На самом деле создание системы раскрывающегося меню с кросс-кадром оставлено читателю в качестве упражнения: -)

Answer 4

Идеальным решением было бы НЕ использовать фреймы. Вместо этого вы должны в идеале настроить меню с фиксированной позицией. Правильный CSS для вашего элемента меню будет:

position:fixed

Возможно, вам придется внести некоторые другие изменения, например, установить z-index в вашем меню больше, чем остальная часть вашего документа. Если вы использовали фиксированное позиционирование, вы можете обойтись без использования JavaScript. Вот несколько примеров меню, которые используют фиксированное позиционирование:

1. Коллекция из 21 меню с фиксированным положением - Например, меню Face Works выполняет почти то же самое, что и ваше меню без использования рамок.
2. Плавающее меню CSS
3. CSS: фиксированные меню

Вы должны заметить, что фрейм не может получить доступ к контенту вне себя. Нет CSS / JavaScript, который позволил бы вашему верхнему фрейму получить доступ к содержимому вашего нижнего фрейма. Это было бы ошибкой безопасности, чтобы позволить этому случиться. Если вам действительно нужно использовать фреймы, используйте нечто похожее на ваше текущее решение.

Answer 5

Вы можете просто использовать чисто CSS-меню (например, http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/).. Я не уверен, почему именно навигация находится в другом кадре, но это даст вам функциональность и гибкость для перемещения выпадающих списков. вверх или вниз (путем настройки свойств padding / margin / top в CSS), чтобы соответствовать нижней части кадра.

Answer 6

Ранее мы использовали выпадающие меню с поддержкой кросс-фреймов без особых проблем. Один из способов сделать это с помощью allwebmenus, мощного конструктора меню на JavaScript с множеством действительно замечательных функций и встроенной поддержкой кросс-фреймов: http://www.likno.com/examples.html?example=crossframe

На этой странице объясняется, как это происходит: http://www.likno.com/drop-down-css-menu/compilepropertiescrossframe.htm.

Роскошное меню также выполняет аналогичные функции: http://deluxe -menu.com / данные-образцы / кросс-кадр горизонтально-1-sample.htm и дешевле, если вы хотите сделать это только на одном сайте, но дороже для нескольких сайтов.

Answer 7

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