Как сделать различную ширину столбцов в двухуровневом меню?

@vlad-55 · Регистрация: 21.02.2009

Студворк — интернет-сервис помощи студентам

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

Как бы её устранить?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<ul id="navbar"> 
    <li><a href="/">Главная</a></li> 
    <li><a href="#">Миссия</a></li> 
    <li><a href="#">Услуги и цены</a></li> 
    <li><a href="#">Вопросы и ответы</a> 
        <ul> 
            <li><a href="#">Часть 1</a></li> 
            <li><a href="#">Часть 2</a></li> 
        </ul> 
    </li> 
    <li><a href="#">Портфолио</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> 
        </ul> 
    </li> 
        <li><a href="#">Благодарности</a> 
        <ul> 
            <li><a href="#">Часть 1</a></li> 
            <li><a href="#">Часть 2</a></li> 
        </ul> 
    </li> 
    <li><a href="#">Контакты</a></li> 
</ul>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
ul#navbar{ 
    border:0; 
    border-left:1px solid white; 
    height:30px;            /* высота списка */ 
    list-style:none;        /* отменяем маркер для списка */ 
    margin: 20px auto;       /* выравниваем меню на странице */ 
    padding:0px;            /* обнуление полей */ 
    width:750px;            /* задаем ширину меню */ 
    position:absolute;  
    top:    220px;     /* здесь я его подгоняю под свой дизайн */  
    left:    200px; 
} 
 
ul#navbar li, 
ul#navbar li a{ 
    display:block; 
    float:left; 
    position:relative; 
} 
 
ul#navbar li a{ 
    background:url(bg.png) repeat-x 0 0; /* фон элемента меню */ 
    border:1px solid white; 
    border-left:0; 
    color:white;               /* цвет текста */ 
    font:normal 16px arial;    /* описываем шрифт */ 
    height:18px;               /* задаем высоту для элемента */ 
    margin:0px; 
    padding:5px 0; 
    text-align:center;         /* текст в ячейке "по центру" */ 
    text-decoration:none;      /* отмена декораций */ 
    width:99px;                    /* Ширина */ 
} 
ul#navbar li a:hover, 
ul#navbar li:hover a{ 
    background:url(bg.png) repeat-x  0px -30px; 
} 
ul#navbar li ul{ 
    display:none;                /* скрываем второй уровень */ 
    left:0px; 
    list-style:none; 
    position:absolute;          /* задаем абсолютное позиционирование */ 
    top:30px;                      /* отступ сверху */ 
    z-index:10;                    /* "подымаем" над остальными элементами*/ 
} 
ul#navbar li:hover ul{ 
    background:#1b64dc; 
    border:0px; 
    display:block; 
    float:none; 
    margin:0px auto; 
    padding:0px; 
    width:100px;                /* Ширина */ 
} 
ul#navbar li ul li, 
ul#navbar li:hover ul li a{ 
    display:block; 
    float:none; 
} 
ul#navbar li:hover ul li a{ 
    background:#1b64dc; 
    border:0; 
    color:white; 
    font-size:12px; 
    font-weight:normal; 
    height:20px; 
    line-height:20px; 
    padding:0px; 
    margin:0; 
    text-align:center; 
    white-space:nowrap; 
    width:100px;            /* Ширина */ 
} 
ul#navbar li:hover ul li a:hover{ 
    background:#ef007c; 
}

@borovik · 15.05.2012, 20:08

у тя на столько перегружен был CSS что меня чуть не вырвало вот про версия с резиной

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<ul id="navbar"> 
    <li><a href="/">Главная</a></li> 
    <li><a href="#">Миссия</a></li> 
    <li><a href="#">Услуги и цены</a></li> 
    
    <li><a href="#">Вопросы и ответы</a> 
        <ul> 
            <li><a href="#">Часть 1</a></li> 
            <li><a href="#">ШИРОКИЙ ТЕКСТ</a></li> 
            <li><a href="#">Часть 3</a></li>
        </ul> 
    </li> 
    
    <li><a href="#">Портфолио</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> 
        </ul> 
    </li> 
    
    <li><a href="#">Благодарности</a> 
        <ul> 
            <li><a href="#">Часть 1</a></li> 
            <li><a href="#">Часть 2</a></li> 
        </ul> 
    </li> 
    
    <li><a href="#">Контакты</a></li> 
</ul>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
#navbar a{
    text-decoration: none;
}
 
#navbar{ 
    list-style:none; 
    margin: 20px auto;
    position: absolute;
    left: 100px; 
    background-color: red;  //для дебага можно удалить
} 
 
#navbar li{
    border: 1px solid;   //для дебага можно удалить
    float:left;
    padding: 5px; 
} 
 
#navbar li ul{ 
    display:none;
    position:absolute;       
    top:31px;                  
} 
 
#navbar li:hover ul{ 
    background:#1b64dc; 
    display: block;
} 
 
#navbar li:hover ul li{
    float:none; 
} 
 
#navbar li:hover ul li a:hover{ 
    background:#ef007с; 
}

http://jsfiddle.net/CZQ84/

@vlad-55 · 15.05.2012, 22:52 **[ТС]**

Сообщение от borovik

у тя на столько перегружен был CSS что меня чуть не вырвало

Слабым утешением будет тот факт, что сей код взят из сборника типовых решений.
Кстати, я бы такого и не придумал. И не потому, что сильно умный, а потому, что просто не сумел бы - знаний не хватило.

А по делу - созданный Вами резиновый код, к моему великому сожалению, практически не работоспособен.

В приложении то, как это воспроизводит Мозилла. С другими браузерами другие фокусы, но суть та же - разваливается всё. И даже горизонтальное меню превращается в вертикальное.

@borovik · 15.05.2012, 23:12

в каком браузере не работает? проверил в chrome,FF,Opera,IE8 - везде работает, могу сделать скрины

@vlad-55 · 15.05.2012, 23:42 **[ТС]**

Создал тестовую страницу заново, взяв код не с форума, как в первый раз, а из макета.

Результат работы с ИЕ8 в Приложении - видите, воторой уровень от "Благодарности" улетел вправо?
Соответственно, второй уровень от "Портфолио" воспроизводится под "Благодарности". И т.п.

А так - замечательный код! Вот только бы дефекты поправить...

(Я, на всякий случай, приложил файл, с которым тестировал - вдруг у меня какая-то ошибка?)

@borovik · 16.05.2012, 10:47

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
ul{
      list-style:none; 
      padding:0;
}
 
#navbar a{
    text-decoration: none;
}
 
#navbar{ 
    margin: 20px auto;
    position: absolute;
    left: 100px; 
    background-color: red;
} 
 
#navbar li{
    border: 1px solid;  
    float:left;
    padding: 5px; 
} 
 
#navbar li ul{ 
    display:none;
    position:absolute;       
    top:31px;                 
} 
 
#navbar li:hover ul{ 
    background:#1b64dc; 
    display: block;
} 
 
#navbar li:hover ul li{
    float:none; 
} 
 
#navbar li:hover ul li a:hover{ 
    background:#ef007c; 
}

@vlad-55 · 16.05.2012, 11:02 **[ТС]**

Мне неловко об этом писать, но с этим кодом ничего не изменилось. То есть, абсолютно ничего - в ИЕ8 так и разваливается, даже нет смысла делать скриншот.

В Приложении файл, на котором тестировалось.

@borovik · 16.05.2012, 12:24

видно мы на разных планетах

@vlad-55 · 16.05.2012, 15:20 **[ТС]**

Где-то неучтенный нюанс. Может, в настройках сервера? Может, в браузере надо что-то обнулить?

Обратите внимание на скриншоты: у нас меню второго уровня разного цвета!

@vlad-55 · 16.05.2012, 16:18 **[ТС]**

Меню хорошее, интересное.

В скриншоте работа в ФФ - видите, специально дал длинные названия ссылок второго уровня и они автоматически пишутся в две строки, не выходя за пределы меню.

А с ИЕ8 дело иначе.
Прежде я проверял код на Денвере, а сейчас закачал на сервер. По идее, разницы быть не должно, но она есть: меню второго уровня Портфолио не уползает в Контакты, как это было на Денвере. Но оно не разворачивается в две строки, как это происходит в ФФ, и уходит вправо за пределю меню (а если меню во весь экран, то и за пределы экрана). Скриншот прилагается.

На всякий случай кладу и файл - он такой же, но с длинными ссылками.

Жаль, если победить ИЕ не удастся!

Новые блоги и статьи Все статьи Все блоги /
Вывод данных через динамический список в справочнике Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .
Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .

@borovik 210 / 204 / 52 Регистрация: 25.07.2010 Сообщений: 1,162
	15.05.2012, 23:12
	в каком браузере не работает? проверил в chrome,FF,Opera,IE8 - везде работает, могу сделать скрины 1

@borovik 210 / 204 / 52 Регистрация: 25.07.2010 Сообщений: 1,162
	16.05.2012, 12:24
	видно мы на разных планетах Миниатюры 1

@vlad-55 156 / 20 / 5 Регистрация: 21.02.2009 Сообщений: 2,792
	16.05.2012, 15:20 [ТС]
	Где-то неучтенный нюанс. Может, в настройках сервера? Может, в браузере надо что-то обнулить? Обратите внимание на скриншоты: у нас меню второго уровня разного цвета! 0