VPF::Позиционирование элементов выпадающего меню

Гриша

Дата 11.6.2007, 12:34 (ссылка)

(нет голосов)

Загрузка ...

НУС(незнаю|узнаю|создаю)

Профиль
Группа: Участник
Сообщений: 181
Регистрация: 12.6.2005
Где: Земля, Москва, Хр ущевка

Репутация: нет
Всего: 1

Здрауствуйте.

Javascript знаю плохо, ис с размещением слоев у меня тоже проблемы.
Сделал выпадающее меню, все вроде получается, но есть проблема при позиционировании выпадающего меню,
т.е. например в IE выпадающее меню появляется справа от родительского элемента, в Mozilla и Opera, под родительским элементов.
Хотел бы что бы во всех броузерах было как в IE.

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

ВОт ссылка на визуальный пример:
http://magazin.pozvonochnik.info/menu_demo.html (позже уберу)

Вот html код:

Код


<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Демо выпадающего меню</title>
</head>
<body leftmargin="25" marginwidth="25" topmargin="20" marginheight="20" link="blue" vlink="#800080" alink="#800080" text="black" bgcolor="white">


<script language="JavaScript">
<!--

function showMenu(obj, id)
{
    var menu=document.getElementById(id+"_menu");
    menu.style.display = "block";
}

function hidMenu(obj, id)
{
    var menu=document.getElementById(id+"_menu");
    menu.style.display = "none";
}

-->
</script>

<div>
<ul>            
<li><a href="/catalog/1/">Биотренажеры</a></li>
<li onmouseover="showMenu(this, '2')" onmouseout="hidMenu(this, '2')"><a href="/catalog/2/">Ортопедические изделия</a></li> 
    <div id="2_menu" onmouseover="showMenu(this, '2')" onmouseout="hidMenu(this, '2')" style="display: none; position:absolute; background-color: white; margin-left: 0px; border: solid 1px #CCCCCC;" >
    <ul>            
    <li><a href="/catalog/5/">Головодержатели</a></li>
    <li><a href="/catalog/6/">Корсеты</a></li>            
    <li><a href="/catalog/8/">Корректоры осанки</a></li>            
    <li><a href="/catalog/7/">Бандажи</a></li>
    <li onmouseover="showMenu(this, '10')" onmouseout="hidMenu(this, '10')"><a href="/catalog/10/" title="Фиксаторы">Фиксаторы</a></li>
        <div id="10_menu" onmouseover="showMenu(this, '10')" onmouseout="hidMenu(this, '10')" style="display: none; position:absolute; background-color: white; margin-left: 0px; border: solid 1px #CCCCCC;" >
        <ul>
        <li><a href="/catalog/11/">Верхних конечностей</a></li>
        <l ><a href="/catalog/12/">Нижних конечностей</a></li>                     
        </ul>
        </div>            
    <li><a href="/catalog/9/" title="Стельки">Стельки</a></li>                     
    </ul>
    </div>            
<li><a href="/catalog/4/">Товары для здорового сна</a></li> 
</ul>
</div>


</body>
</html>

Это сообщение отредактировал(а) Гриша - 11.6.2007, 12:36

--------------------

Если долго мучиться, что-нибудь получитЬся.

Mymik

Дата 11.6.2007, 18:19 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1474
Регистрация: 12.5.2006
Где: Lamer-центер

Репутация: 11
Всего: 78

Гриша, оно у тебя не работает, потому что это не валидный код. На самом деле даже в IE оно не работает. То тебе только показалось что оно верно работает. А точнее повезло что оно так вот выглядит.
По спецификации нельзя ставить div элементы между тэгами <li> когда не закрыт <ul>.
И как я помню, внутри <li> их тоже нельзя ставить.

Код


<div>
<ul>            
    <li><a href="/catalog/1/">Биотренажеры</a></li>
    <li onmouseover="showMenu(this, '2')" onmouseout="hidMenu(this, '2')"><a href="/catalog/2/">Ортопедические изделия</a></li> 
    <li><a href="/catalog/4/">Товары для здорового сна</a></li> 
</ul>
<div id="2_menu" onmouseover="showMenu(this, '2')" onmouseout="hidMenu(this, '2')" style="display: none; z-index:100; position:absolute; background-color: white; float:left; margin:-40px 0px 0px 220px; border: solid 1px #CCCCCC;" >
    <ul>            
         <li><a href="/catalog/5/">Головодержатели</a></li>
         <li><a href="/catalog/6/">Корсеты</a></li>            
         <li><a href="/catalog/8/">Корректоры осанки</a></li>            
         <li><a href="/catalog/7/">Бандажи</a></li>
         <li onmouseover="showMenu(this, '10')" onmouseout="hidMenu(this, '10')"><a href="/catalog/10/" title="Фиксаторы">Фиксаторы</a></li>
    <li><a href="/catalog/9/" title="Стельки">Стельки</a></li>                     
    </ul>
</div>            
<div id="10_menu" onmouseover="showMenu(this, '10')" onmouseout="hidMenu(this, '10')" style="display: none; z-index:120; position:absolute; background-color: white; margin:50px 0px 0px 395px; padding:0px; border: solid 1px #CCCCCC;" >
    <ul>
         <li><a href="/catalog/11/">Верхних конечностей</a></li>
         <li><a href="/catalog/12/">Нижних конечностей</a></li>                     
        </ul>
</div>            
</div>

--------------------

ICQ ::            857-857
E-mail ::         mymik[at]inbox[dot]ru
HomaPage ::  http://localhost/

:to_become_senile  :this

Гриша

Дата 11.6.2007, 18:44 (ссылка)

(нет голосов)

Загрузка ...

НУС(незнаю|узнаю|создаю)

Профиль
Группа: Участник
Сообщений: 181
Регистрация: 12.6.2005
Где: Земля, Москва, Хр ущевка

Репутация: нет
Всего: 1

Mymik, спасибо за ответ.

Ну тогда вместо <div> я точно могу использовать <span></span> - эффект такой же, в IE спарва от родительского элемента отображается выпадающее меню, в остальных броузерах под родительским элементом.
Ну или данные стиля из <div> могу перенести в <ul>, но опять же все тоже самое.

--------------------

Если долго мучиться, что-нибудь получитЬся.

Mymik

Дата 11.6.2007, 19:19 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1474
Регистрация: 12.5.2006
Где: Lamer-центер

Репутация: 11
Всего: 78

Цитата(Гриша @ 11.6.2007, 18:44

)

Ну тогда вместо <div> я точно могу использовать <span></span> - эффект такой же, в IE спарва от родительского элемента отображается выпадающее меню, в остальных броузерах под родительским элементом.
Ну или данные стиля из <div> могу перенести в <ul>, но опять же все тоже самое.

Я немного не понял где ты размещаешь <span>... Если за пределами <li></li> и в пределах <ul> то это запрещено. В <ul> могут быть только лишь <li> элементы

--------------------

ICQ ::            857-857
E-mail ::         mymik[at]inbox[dot]ru
HomaPage ::  http://localhost/

:to_become_senile  :this

AKS

Дата 11.6.2007, 19:27 (ссылка)

(нет голосов)

Загрузка ...

Участник форума

Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 27
Всего: 52

Гриша, вот, попытался сделать для Вас "красноречивый" примерчик (насколько это было в моих силах), который бы помог разобраться в принципах верстки (обязательно должно помочь при внимательном рассмотрении):

Код


<div>
    <ul>            
        <li>
            <a href="#">Биотренажеры</a>
        </li>
        <li onmouseenter='F(event, this)' onmouseleave='F(event, this)'>
            <a href="#">Ортопедические изделия</a>
            <ul>            
                <li>
                    <a href="#">Головодержатели</a>
                </li>
                <li>
                    <a href="#">Корсеты</a>
                </li>            
                <li>
                    <a href="#">Корректоры осанки</a>
                </li>            
                <li>
                    <a href="#">Бандажи</a></li>
                <li onmouseenter='F(event, this)' onmouseleave='F(event, this)'>
                    <a href="#">Фиксаторы</a>
                    <ul>
                        <li>
                            <a href="#">Верхних конечностей</a>
                        </li>
                        <li>
                            <a href="#">Нижних конечностей</a>
                        </li>
                    </ul>
                </li>            
                <li>
                    <a href="#">Стельки</a>
                </li>
            </ul>
        </li>                        
        <li>
            <a href="#">Товары для здорового сна</a>
        </li> 
    </ul>
</div>

Код


li ul {
    display:none;
    position:absolute;
    background-color:white;
    border:1px solid black;
    list-style:none;
    padding:5px;
    margin:0 0 0 -3em;
}
li:hover > ul {
    display:block;
    margin:-10px 0 0 2em;
}

Код


function F(e, o) {
    var s = (e.type === 'mouseenter')
            ? 'block' : 'none';
    o.lastChild.style.display = s;
}

Гриша

Дата 14.6.2007, 11:02 (ссылка)

(нет голосов)

Загрузка ...

НУС(незнаю|узнаю|создаю)

Профиль
Группа: Участник
Сообщений: 181
Регистрация: 12.6.2005
Где: Земля, Москва, Хр ущевка

Репутация: нет
Всего: 1

Mymik, спасибо за разъяснения.

AKS, спасибо за пример.

Буду разбираться и пробовать.

--------------------

Если долго мучиться, что-нибудь получитЬся.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »