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

Ответ 1

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

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

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

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

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

Ответ 2

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

Ответ 3

Построение выпадающего меню, которое пересекает рамки, похоже на создание нормальной выпадающего меню (мышь над меню "голова", показ меню "тело", мышь из головы, скрыть тело и т.д..), за исключением:

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

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

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

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

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

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

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

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

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

Ответ 4

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

Ответ 5

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

position:fixed

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

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

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

Ответ 6

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

Ответ 7

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

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

Меню Deluxe также делает аналогичную вещь: http://deluxe-menu.com/data-samples/cross-frame-horizontal-1-sample.htm и дешевле, если вы только хотите сделать это на одном веб-сайте, но более дорогостоящим для нескольких сайтов.