Скачет вертикальное меню

@suvolod · Регистрация: 23.12.2014

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

Сделал вертикальное меню, появилось два вопроса:
Первый, самый главный: хочу "подсвечивать" элемент по событию hover. Точнее, выделять его шрифтом большего размера ... но у меня при этом начинает прыгать меню, потому-что li меняет свою высоту. Как можно обойти этот косяк....? пробовал magrin-ы и паддинги во всех мыслимых и немыслимых комбинациях, и для li, и для роительского ul, но ничего не получилось....

2// Как-то можно выровнять меню по вертикали? Через position:absolute; top:0; bottom:0; у меня не получилось, т.к. я не знаю высоты блока

Пример кода здесь: http://jsfiddle.net/Lbrc1n94/

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
*{
    margin:0;
    padding:0;
    
}
 
html, body{
    height:100%;
    width:100%;
}
 
div.main{
    border:1px solid black;
    width:400px;
    height:80%;
    margin:auto auto;
    position:absolute;
    top:0px; bottom:0px; left:0px; right:0px;
    text-align:center;
 
}
 
ul.menu{
    list-style-type: none;
    text-align:center;
    display:inline-block;
    background:yellow;
 
}
 
ul.menu li{
    padding: 10px 0px;
    border-bottom:2px solid #c02222;
    
}
 
ul.menu li:last-child{
    border:none;
}
 
ul.menu li a{
    color:#C02222;
    text-decoration:none;
    font-family: Verdana, Geneva, sans-serif;
    font-weight:bold;
    font-size:14px;
    
}
 
ul.menu li a:hover{
    font-size:16px;
    
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
    <div class="main">
 
        <ul class="menu">        
            <li><a href="#"> ГЛАВНАЯ</a></li>
            <li><a href="#">МЕБЕЛЬ</a></li>
            <li><a href="#">БЫТОВАЯ<br/>ТЕХНИКА</a></li>
            <li><a href="#">КАТАЛОГ</a></li>
            <li><a href="#">КОНТАКТЫ</a></li>
            <li><a href="#">ОБРАТНАЯ<br/>СВЯЗЬ</a></li>                    
        </ul>    
 
    </div>

@Many · 25.12.2014, 18:03

Задай у ul.menu ширину - width:100px;

CSS
1
2
3
4
5
6
7
8
ul.menu{
    list-style-type: none;
    width:100px;
    text-align:center;
    display:inline-block;
    background:yellow;
 
}

@suvolod · 25.12.2014, 19:41 **[ТС]**

через фикс. ширину не хотелось бы.... С таким способом придется помнить и постоянно "подгонять" css-стиль под html-содержимое (например, при добавлении нового пункта меню с бОльшим размером текста). Может, все-таки есть более универсальное решение?

Добавлено через 4 минуты
и кстати, все-равно скачет, только теперь уже по высоте. А задать фикс. высоту я не могу. Ее нужно задавать для li, но у меня в li может быть одна, а может быть и две строки, т.е. задавать фикс. высоту смысла нет - полетит верстка.

@Many · 25.12.2014, 19:56

Честно говоря не вижу чтобы по высоте что-то прыгало кроме букв
http://jsfiddle.net/Lbrc1n94/14/

@suvolod · 25.12.2014, 20:49 **[ТС]**

скорее всего, у вас google chrome. В этом браузере у меня тоже не прыгает. А в firefox - прыгает (меняется высота li-элементов)

@Many · 25.12.2014, 21:00

Я пробовал, и в crome, и в ff, и в опере - по высоте неподвижно. У кого нибудь еще http://jsfiddle.net/Lbrc1n94/14/ прыгает по высоте ?

Добавлено через 3 минуты
А когда сделал

CSS
1
2
3
4
ul.menu li a:hover{
    font-size:18px;
    
}

стало прыгать по высоте

http://jsfiddle.net/Lbrc1n94/17/

@Fedor92 · 25.12.2014, 21:51

suvolod, как-то так что ли

Кликните здесь для просмотра всего текста

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
*{
    margin:0;
    padding:0;
    
}
 
html, body{
    height:100%;
    width:100%;
}
 
div.main{
    border:1px solid black;
    width:400px;
    height:80%;
    margin:auto auto;
    position:absolute;
    top:0px; bottom:0px; left:0px; right:0px;
    text-align:center;
 
}
 
ul.menu{
    list-style-type: none;
    text-align:center;
    display:inline-block;
    background:yellow;
    width:120px;
    border:solid 1px black;
}
 
ul.menu li{
    width:inherit;
    height:50px;
    display:table;
    border-bottom:2px solid;
    
}
 
ul.menu li:last-child{
    border:none;
}
 
ul.menu li a{
        width:inherit;
        display:table-cell;
        vertical-align:middle;
        text-align:center;
        color:#C02222;
    text-decoration:none;
    font-family: Verdana, Geneva, sans-serif;
    font-weight:bold;
    font-size:14px;
        outline:1px solid red
    
}
 
ul.menu li a:hover{
    font-size:18px;
    
}

@suvolod · 26.12.2014, 07:46 **[ТС]**

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

Добавлено через 1 час 1 минуту

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

Я пробовал, и в crome, и в ff, и в опере - по высоте неподвижно. У кого нибудь еще http://jsfiddle.net/Lbrc1n94/14/ прыгает по высоте ?

К сожалению, прыгает. Вот видеоскрин выполнения вашего кода в ff: http://www.screencast.com/t/IXt4bOcDcmk

@Fedor92 · 26.12.2014, 11:59

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

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

Я чего-то не понимаю либо, а что Вам мешает задать пунктам меню разную высоту?

Для пунктов 3 и 6 своя высота - для пунктов 1,2, 4,5 - своя... Будете задавать отступы - меню будет прыгать... Единственное лекарство задать размер ячеек с учётом отступов... Все пункты меню будут автоматически выравниваться по вертикали и горизонтали...

@suvolod · 26.12.2014, 14:15 **[ТС]**

Над "задать пунктам меню разную высоту" я уже думал... Конечно, можно было-бы сделать нечто вроде class="one_word", class="two_word", и задать соответствующий класс "одинарному" или "двойному" li. Но в реальности это мало применимо, т.к. моя верстка будет затем натянута на CRM Bitrix, где само меню будет генерироваться автоматически, а я лишь применю к нему свои стили. Кастомизировать его шаблоны, дописывать на php функционал расчета количества строк в выводимом элементе меню для добавления того или иного класса не хотелось бы... Хочется реализовать свое задание на чистом CSS

@Al_lord · 26.12.2014, 14:52

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

Новые блоги и статьи Все статьи Все блоги /
Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка SDL3 и Box2D из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»

@suvolod 0 / 0 / 0 Регистрация: 23.12.2014 Сообщений: 8
	25.12.2014, 19:41 [ТС]
	через фикс. ширину не хотелось бы.... С таким способом придется помнить и постоянно "подгонять" css-стиль под html-содержимое (например, при добавлении нового пункта меню с бОльшим размером текста). Может, все-таки есть более универсальное решение? Добавлено через 4 минуты и кстати, все-равно скачет, только теперь уже по высоте. А задать фикс. высоту я не могу. Ее нужно задавать для li, но у меня в li может быть одна, а может быть и две строки, т.е. задавать фикс. высоту смысла нет - полетит верстка. 0

@Many 1 / 1 / 0 Регистрация: 02.10.2014 Сообщений: 25
	25.12.2014, 19:56
	Честно говоря не вижу чтобы по высоте что-то прыгало кроме букв http://jsfiddle.net/Lbrc1n94/14/ 0

@suvolod 0 / 0 / 0 Регистрация: 23.12.2014 Сообщений: 8
	25.12.2014, 20:49 [ТС]
	скорее всего, у вас google chrome. В этом браузере у меня тоже не прыгает. А в firefox - прыгает (меняется высота li-элементов) 0

@suvolod 0 / 0 / 0 Регистрация: 23.12.2014 Сообщений: 8
	26.12.2014, 14:15 [ТС]
	Над "задать пунктам меню разную высоту" я уже думал... Конечно, можно было-бы сделать нечто вроде class="one_word", class="two_word", и задать соответствующий класс "одинарному" или "двойному" li. Но в реальности это мало применимо, т.к. моя верстка будет затем натянута на CRM Bitrix, где само меню будет генерироваться автоматически, а я лишь применю к нему свои стили. Кастомизировать его шаблоны, дописывать на php функционал расчета количества строк в выводимом элементе меню для добавления того или иного класса не хотелось бы... Хочется реализовать свое задание на чистом CSS 0

@Al_lord 39 / 39 / 26 Регистрация: 11.01.2014 Сообщений: 343
	26.12.2014, 14:52
	можно сделать саму текстовую часть меню как position:absolute, тогда прыгать не будет, но размеры под меню придется подгонять в ручную.... 0