Подменю и элементы формы

ccop · February 22, 2007

На сайте реализовано подменю с помощью банального появления и скрытия слоя:

Все замечательно работает, но вот в ИЕ, когда под менюшкой находиться элемент формы , то слой DIV выходит под этим элементом.

Замечено только в ИЕ и только с , как исправить?

Спасибо!

s0rr0w · February 22, 2007

Присваивать селекту display: none, если показывается менюшка.

ccop · February 22, 2007

это не совсем хороший способ, может есть еще какие-то варианты?

s0rr0w · February 22, 2007

Это один из трех способов, которые доступны на данный момент времени.

1. Убирать селект

2. Забить на подменю такого вида

3. Забить IE6 и пользователей данного продукта

Если ты сомневаешься в моих словах, то у тебя есть google. Вперед, ищи более хороший способ решения данной проблемы.

rentgen · May 29, 2007

Некоторые элементы в IE реализованы с помощью окон, к таким элементам относится и SELECT. Поэтому, вс? позиционирование на уровне сло?в будет применяться к дочерним элементам окна, а не к самому элементу. Соответственно, здесь можно выйти из положения следующим образом. Если мы возьм?м iframe, пропишем ему

style="position:absolute"

отпозиционируем его сверху нашего select'a и поверх ФРЕЙМА отпозиционируем ещ? и DIV с нужным нам содержимым, тогда мы добь?мся частичного перекрывания элемента Select. Что и хотелось получить. Будут вопросы пишите...

strix · May 30, 2007

s0rr0w предложил вам лучший вариант из того, что есть. чем он вас не устроил?

А от фрейма больше проблем, чем плюсов. Главное - поисковая оптимизация, не правда ли?

Tokolist · May 30, 2007

s0rr0w предложил вам лучший вариант из того, что есть. чем он вас не устроил?
А от фрейма больше проблем, чем плюсов. Главное - поисковая оптимизация, не правда ли?

Можете обьяснить причем здесь поисковая оптимизация? Фрейм должен быть пустой.

Как он будет влиять на поисковых роботов?

Потом если прятать селект, то это может показаться странным юзверю (при условии, конечно, что менюшка не перекрывает весь селект).

Поэтому это наилучший ИМХО вариант. rentgen-у плюсик к карме однозначно респект!

Более того я специально создал пример. Здесь вообще фрейм создается динамически с помощью скриптов и поисковик не "увидит" его вообще.

Пример сильно упрощен. здесь я бы еще добавил проверку браузера через window.event и фрейм должен позиционироваться автоматически (создавать только один фрейм) под каждое меню (сдесь оно только одно).

Более того я заметил, что если фрейм создается перед div, то все нормально, а если после (например в событии onLoad), то селект все-равно перекрывает див.

Собственно код:

<html>
<head>
<style type="text/css">
body {
 margin: 0;
 padding: 0;
}

form {
 margin: 0;
 padding: 0;
}

select {
 width: 200px;
}

#hint {
 display: none;
 position: absolute;
 left: 50px;
 top: 20px;
 width: 100px;
 height: 100px;
 border: 1px solid #000;
 background-color: #eee;
}

#hover {
 width: 200px;
 height: 20px;
 background-color: orange;
}
</style>
<script type="text/javascript">
var frameHack;

showHint = function(show) {
 var hintDiv = document.getElementById("hint");
 frameHack.style.display = hintDiv.style.display = show ? "block" : "none";
}
</script>
</head>
<body>
<script type="text/javascript">
frameHack = document.createElement("iframe");
frameHack.style.display = "none";
frameHack.style.position = "absolute";
frameHack.style.left = "50px";
frameHack.style.top = "20px";
frameHack.style.width = "100px";
frameHack.style.height = "100px";
document.getElementsByTagName("body")[0].appendChild(frameHack);
</script>

<div id="hint">test</div>
<div id="hover" onMouseOver="showHint(true)" onMouseOut="showHint(false)">Move mouse HERE :)</div>
<form action="#">
<select name="test" size="5" multiple>
 <option value="1" selected>Item 1</option>
 <option value="2">Item 2</option>
 <option value="3" selected>Item 3</option>
 <option value="4">Item 4</option>
 <option value="5">Item 5</option>
</select>
</form>
</body>
</html>

Sign In

Подменю и элементы формы

Question

ccop

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

s0rr0w

Link to comment

Share on other sites

ccop

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

rentgen

Link to comment

Share on other sites

strix

Link to comment

Share on other sites

Tokolist

Link to comment

Share on other sites

Обсуждения

Forums

Important Information