VPF::скрулл в многоуровневом меню - Форум программистов

Evghenusi

Дата 13.6.2011, 00:55 (ссылка)

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

Загрузка ...

майский жук

Профиль
Группа: Участник
Сообщений: 506
Регистрация: 3.8.2006
Где: Молдова, Кишинёв

Репутация: 3
Всего: 15

доброго времени суток.
есть трёхуровневое вертикальное меню, требуется без javascript ограничить высоту выпадающих списков, что бы они были не длиннее 200px, если длиннее то вывести скрулл бар.

overflow-y: auto и max-height: 200px я вписал для ul. но при этом третий уровень не показывается.....он находится вне области видимости.

или такое не возможно сделать?

0Scrum

Дата 13.6.2011, 15:30 (ссылка)

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

Загрузка ...

Новичок

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

Репутация: 2
Всего: 3

Покажите проблемный участок.

Evghenusi

Дата 21.6.2011, 23:46 (ссылка)

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

Загрузка ...

майский жук

Профиль
Группа: Участник
Сообщений: 506
Регистрация: 3.8.2006
Где: Молдова, Кишинёв

Репутация: 3
Всего: 15

Цитата(0Scrum @ 13.6.2011, 15:30

)

Покажите проблемный участок.

проблемный smile

Код


#nav, #nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    float : left;
    width : 11em;
}
#nav li {
    position : relative;
    float : left;
    line-height : 1.25em;
    margin-bottom : -1px;
    width: 11em;
}
#nav li ul {
    position : absolute;
    left: -999em;
    margin-left : 11.05em;
    margin-top : -1.35em;
    /*overflow-y: auto;
    max-height:200px;*/
}
#nav li ul ul {
    left: -999em;
    /*overflow-y: auto;
    max-height:200px;*/
}
#nav li a {
    width: 10em;
    display : block;
    color : black;
    font-weight : bold;
    text-decoration : none;
    background-color : white;
    border : 1px solid black;
    padding : 0 0.5em;
}
#nav li a:hover {
    color : white;
    background-color : black;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
    left: auto;
}

Код


<ul id="nav">
    <li><a href="#">Percoidei</a>
        <ul>
            <li><a href="#">Tigerfishes</a>
                <ul>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">6</a></li>
                    <li><a href="#">7</a></li>
                    <li><a href="#">8</a></li>
                    <li><a href="#">9</a></li>
                    <li><a href="#">10</a></li>
                    <li><a href="#">11</a></li>
                    <li><a href="#">12</a></li>
                    <li><a href="#">13</a></li>
                    <li><a href="#">14</a></li>
                    <li><a href="#">15</a></li>
                    <li><a href="#">16</a></li>
                    <li><a href="#">17</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Anabantoidei</a></li>
</ul>

вот меню с которым играюсь. за комментированные стили - это то что я пробовал

Это сообщение отредактировал(а) Evghenusi - 21.6.2011, 23:47

mark2011

Дата 5.7.2011, 22:26 (ссылка)

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

Загрузка ...

Бывалый

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

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

Выкладываю изменённый CSS с которым у меня абсолютно всё в порядке smile

Код


#nav, #nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    float : left;
    width : 11em;
}
#nav li {
    position : relative;
    float : left;
    line-height : 1.25em;
    margin-bottom : -1px;
    width: 11em;
}
#nav li ul {
    position : absolute;
    left: -999em;
    margin-left : 11.05em;
    margin-top : -1.35em;
}
#nav li ul ul {
    left: -999em;
    overflow-y: auto;
    max-height:200px;
}
#nav li a {
    width: 10em;
    display : block;
    color : black;
    font-weight : bold;
    text-decoration : none;
    background-color : white;
    border : 1px solid black;
    padding : 0 0.5em;
}
#nav li a:hover {
    color : white;
    background-color : black;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { 
    left: auto;
}

Evghenusi

Дата 9.7.2011, 01:51 (ссылка)

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

Загрузка ...

майский жук

Профиль
Группа: Участник
Сообщений: 506
Регистрация: 3.8.2006
Где: Молдова, Кишинёв

Репутация: 3
Всего: 15

)), угу, отчасти, но тогда второй уровень останется без скрулла

mark2011

Дата 9.7.2011, 08:25 (ссылка)

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

Загрузка ...

Бывалый

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

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

А вам нужно чтобы всё скроллировалось?? В том коде, который вы представили, скроллироваться должен был только третий уровень.

Evghenusi

Дата 11.7.2011, 01:13 (ссылка)

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

Загрузка ...

майский жук

Профиль
Группа: Участник
Сообщений: 506
Регистрация: 3.8.2006
Где: Молдова, Кишинёв

Репутация: 3
Всего: 15

все

blah

Дата 11.7.2011, 03:30 (ссылка)

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

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 205
Регистрация: 25.9.2008
Где: моя тачка, чувак?

Репутация: 15
Всего: 17

Цитата(Evghenusi @ 11.7.2011, 00:13)

все

пропало?

У вас в задаче взаимоисключающие параграфы.

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