Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг 5.00/13: Рейтинг темы: голосов - 13, средняя оценка - 5.00
3 / 3 / 4
Регистрация: 09.07.2018
Сообщений: 278
1

Как вычислить середину высоты пункта родительского меню для выравнивания дочернего пункта

01.07.2019, 01:00. Показов 2503. Ответов 21
Метки нет (Все метки)

Нужно расположить открывающийся дочерний пункт меню (третьего уровня) его верхней границей по середине высоты пункта родительского меню.
Как есть сейчас видно на сайте jurvrn.ru.
Как нужно покажу на скриншоте.
Сложность в том, что блоки меню второго уровня могут быть как однострочными, так и двухстрочными. Надо выравнивать по середине между двух строк (если две строки)
0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Миниатюры
Как вычислить середину высоты пункта родительского меню для выравнивания дочернего пункта   Как вычислить середину высоты пункта родительского меню для выравнивания дочернего пункта  
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
01.07.2019, 01:00
Ответы с готовыми решениями:

Выделение пункта меню при наведении - только текст или весь блок пункта
Всем привет.Есть меню, при наведении появляется hover но он идет строго по тексту... Можно ли его...

Укажите номер таблицы, для которой выполняется условие «Максимальная протяженность маршрута от пункта А до пункта С не больше 5
2) В таблицах приведена протяженность автомагистралей между соседними населенными пунктами. Если...

Как сделать картинку для каждого пункта меню?
Здравствуйте, есть меню: - Пункт 1 - Пункт 2 -Пункт 3 - .... Хочу менять для каждого пункта...

Как сделать фон для текущего пункта меню?
Как сделать фон для текущего пункта меню, т.е. для пункта, на странице которого я нахожусь (не...

21
61 / 46 / 20
Регистрация: 13.06.2019
Сообщений: 101
01.07.2019, 01:10 2
Лучший ответ Сообщение было отмечено jurvrn как решение

Решение

Так вы этот код пробовали?
CSS
1
2
3
4
5
6
7
8
.easywp-nav-primary ul ul ul {
    margin: 0;
    position:absolute;
    top: 50%;
    transform: translateX(90%);
}
 
 .easywp-nav-primary li:hover { position: relative }
1
3 / 3 / 4
Регистрация: 09.07.2018
Сообщений: 278
01.07.2019, 01:25  [ТС] 3
Your_Euphoria, сработало изменение top.
Но стало понятно что проблему сформулировал не правильно.
Нужно чтобы середина дочернего меню располагалась по середине родительского меню независимо от количества строк в них.
(Если первые блоки (пункты) и подменю и подподменю одинаковые по размеру они просто будут равняться по верхней границе...)
То есть надо выравнивать по центру строк.
0
Миниатюры
Как вычислить середину высоты пункта родительского меню для выравнивания дочернего пункта  
61 / 46 / 20
Регистрация: 13.06.2019
Сообщений: 101
01.07.2019, 01:40 4
Что-то я вас плохо понимаю... Вам нужно так как на скрине, или наоборот так не нужно?

Добавлено через 6 минут
Все, поняла.
Помоему средствами CSS тут не обойтись. Как вариант JSом вычислять середины подпунктов, но как то слишком усложненно это все.
1
3 / 3 / 4
Регистрация: 09.07.2018
Сообщений: 278
01.07.2019, 01:53  [ТС] 5
Your_Euphoria, прошу прощения за сумбур...надо как на скрине - показано стрелкой как выравнивать. Значит мне надо или делать все "лишки" одинаковыми по высоте, или упростить меню, например только 1 строку использовать....... Хотелось бы средствами css.
Может есть в css какое-то относительное позиционирование блоков, по отношению к друг другу... Может что-то вроде flex нужно?
наверно flex не подойдет, он выровняет всё по высоте одинаково где 1 строка и где три строки...
display: flex у контейнера, все дочерние элементы становятся flex элементами, выстроенными в ряд. Все они по вертикали примут размер самого высокого элемента, который станет определяющим вертикального размера.
0
61 / 46 / 20
Регистрация: 13.06.2019
Сообщений: 101
01.07.2019, 02:00 6
Флекс здесь никак не поможет. Мы итак позиционируем относительно родительской лишки, ее середину определить легко, независимо от количества строк. А вот середина первой лишки третьего меню заранее неизвестна.
1
3 / 3 / 4
Регистрация: 09.07.2018
Сообщений: 278
01.07.2019, 02:11  [ТС] 7
Цитата Сообщение от Your_Euphoria Посмотреть сообщение
А вот середина первой лишки третьего меню заранее неизвестна.
Нужна какая-то функция или переменная, которая бы вы высчитала и указала на высоту первой лишки третьего меню...
Это уже не css? Что тогда нужно - php, java, jquery...?
0
61 / 46 / 20
Регистрация: 13.06.2019
Сообщений: 101
01.07.2019, 02:22 8
JavaScript.
Может зайдут сюда люди поопытней, вариант получше подскажут.
1
Эксперт HTML/CSS
1473 / 1222 / 516
Регистрация: 07.08.2016
Сообщений: 3,178
01.07.2019, 07:59 9
jurvrn, так?
CSS
1
2
3
4
5
6
.easywp-nav-primary ul ul ul {
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translate(90%, -50%);
}
1
3 / 3 / 4
Регистрация: 09.07.2018
Сообщений: 278
01.07.2019, 10:45  [ТС] 10
Цитата Сообщение от AlexZaw Посмотреть сообщение
jurvrn, так?
CSS
1
2
3
4
5
6
.easywp-nav-primary ul ul ul {
 margin: 0;
 position: absolute;
 top: 50%;
 transform: translate(90%, -50%);
}
интересный эффект получается, но не то что мне бы хотелось...
Нужно чтобы центрировался первый пункт меню третьего уровня с родительским пунктом
Сейчас вот так:
И как хотелось бы:
0
Миниатюры
Как вычислить середину высоты пункта родительского меню для выравнивания дочернего пункта   Как вычислить середину высоты пункта родительского меню для выравнивания дочернего пункта  
Эксперт HTML/CSS
1473 / 1222 / 516
Регистрация: 07.08.2016
Сообщений: 3,178
01.07.2019, 11:50 11
Цитата Сообщение от jurvrn Посмотреть сообщение
Нужно чтобы центрировался первый пункт меню третьего уровня с родительским пунктом
Тогда только JS. А вообще, зачем такие ухищрения? Обычно подменю выравнивается по верхнему края родительского меню.
1
3 / 3 / 4
Регистрация: 09.07.2018
Сообщений: 278
01.07.2019, 11:59  [ТС] 12
Цитата Сообщение от AlexZaw Посмотреть сообщение
Тогда только JS. А вообще, зачем такие ухищрения? Обычно подменю выравнивается по верхнему края родительского меню.
пойду в тему JS...если не передумаю
потому что количество строк разное в пунктах.... без такого выравнивания будет плохо смотреться на мой взгляд... и мышкой водить легче
создал аналогичную тему, так как эта в принципе, в этой теме на изначальный вопрос - ответ получен
0
Эксперт HTML/CSS
1473 / 1222 / 516
Регистрация: 07.08.2016
Сообщений: 3,178
01.07.2019, 12:34 13
Цитата Сообщение от jurvrn Посмотреть сообщение
без такого выравнивания будет плохо смотреться на мой взгляд.
По вашему когда пункты разных под под меню будут находится то выше, то ниже, то на одном уровне верхней границы родителя, это будет лучше смотреться? Наоборот логично когда они выровнены по верхнему краю, и, следовательно, весь дизайн меню будет в одном стиле. Впрочем дело ваше.
0
3 / 3 / 4
Регистрация: 09.07.2018
Сообщений: 278
01.07.2019, 12:40  [ТС] 14
AlexZaw, вы конечно правы - дизайн должен быть равномерным, если по другому не получится наверно решу это так - сделаю все блоки меню высотой под 2 строки (для маленького текста пусть будет с запасом, а длинный текст сокращу.)
Моё желание просто связано с перемещением мышки
0
3 / 3 / 4
Регистрация: 09.07.2018
Сообщений: 278
01.07.2019, 12:58  [ТС] 15
Уточню свой вопрос:

Нужно что бы первый дочерний пункт меню третьего уровня центрировался по центру родительского пункта (независимо от количества строк, так как количество строк в разных пунктах может быть разным)
На скриншоте как надо. Можно ли это решить силами css ?
0
Миниатюры
Как вычислить середину высоты пункта родительского меню для выравнивания дочернего пункта  
Эксперт HTML/CSS
1473 / 1222 / 516
Регистрация: 07.08.2016
Сообщений: 3,178
01.07.2019, 13:18 16
Цитата Сообщение от jurvrn Посмотреть сообщение
если по другому не получится
С js получится так как вы хотите. Если использовать только css то придется фиксировать размеры пунктов меню

Цитата Сообщение от jurvrn Посмотреть сообщение
сделаю все блоки меню высотой под 2 строки (для маленького текста пусть будет с запасом, а длинный текст сокращу.)
А если потом появится пункт меню с тремя строками? Будете переделывать? Такой пункт у вас и сейчас, кстати, есть, и если в нем сократить текст то читать становится не очень удобно

Цитата Сообщение от jurvrn Посмотреть сообщение
Моё желание просто связано с перемещением мышки
Смотрите, если вы сделаете как хотите, то представьте ситуацию - в меню второго уровня 2 строки, в меню третьего уровня в первом пункте одна строка. В итоге у вас верхняя граница меню третьего уровня находится ниже верхней границы меню второго уровня. Т.е. примерно как у вас сейчас, только будет чуть повыше. Если пользователь наведет курсор на самый верх меню и на этом же уровне поведет мышку на первый пункт подменю, то меню просто полностью закроется, так как курсор выйдет из области в которой срабатывает hover. Это не есть хорошо.

Добавлено через 3 минуты
Цитата Сообщение от jurvrn Посмотреть сообщение
Можно ли это решить силами css ?
Да, если высота всех пунктов меню будет фиксированной.
1
3 / 3 / 4
Регистрация: 09.07.2018
Сообщений: 278
01.07.2019, 15:10  [ТС] 17
Цитата Сообщение от AlexZaw Посмотреть сообщение
С js получится так как вы хотите.
не устраивает javascript, так как может не работать у тех, у кого он будет выключен. И всеми ли браузерами он поддерживается? а мобильными браузерами? Это лишняя нагрузка на сервер?
Цитата Сообщение от AlexZaw Посмотреть сообщение
если потом появится пункт меню с тремя строками? Будете переделывать? Такой пункт у вас и сейчас, кстати, есть, и если в нем сократить текст то читать становится не очень удобно
не буду делать таким большим - сокращу не слова, и их количество (пока это всего лишь примерный контент сайта, сайт в стадии черновика). И увеличу длину самих пунктов меню второго и третьего уровня, чтобы строка была длиннее.
Цитата Сообщение от AlexZaw Посмотреть сообщение
Если пользователь наведет курсор на самый верх меню и на этом же уровне поведет мышку на первый пункт подменю, то меню просто полностью закроется, так как курсор выйдет из области в которой срабатывает hover.
предполагаю что разница по высоте не будет значительной, а значит не будут сильно различаться границы подменю и его подподменю... Главное чего добиваюсь визуально будет отделено меню и суб-меню для лучшего восприятия структуры информации.

Ну значит силами css мою задачу не решить?
Тогда делаю так: две строки во всех выпадающих меню, увеличиваю длину блока подменю, выравниваю меню третьего уровня по верхней границе выпадающего меню.

P.S. Если две строки будет смотреться не очень - оставлю одну, сокращу количество слов. Пока не хочу на JS переходить, причины написал выше
0
Эксперт HTML/CSS
1473 / 1222 / 516
Регистрация: 07.08.2016
Сообщений: 3,178
01.07.2019, 15:26 18
Цитата Сообщение от jurvrn Посмотреть сообщение
не устраивает javascript, так как может не работать у тех, у кого он будет выключен. И всеми ли браузерами он поддерживается? а мобильными браузерами? Это лишняя нагрузка на сервер?
Вряд ли вы сегодня найдете такого человека который выключает js. Поддерживается всеми браузерами включая мобильные, ну разве что кроме тех, что из времен динозавров. Нагрузка на сервер конечно будет выше, так как сервером будет обработан запрос на js файл и, соответственно, этот файл отправится клиенту. Но этим можно пренебречь, так как, чтобы нагрузить сервер на сколь-нибудь значимую величину таким образом нужно постараться. Если конечно сервер сам не из времен динозавров и не подключен к диалапу. После того как js файл отправлен, он будет обрабатываться на стороне клиента и серверу будет глубоко плевать что он с ним делает
Цитата Сообщение от jurvrn Посмотреть сообщение
Ну значит силами css мою задачу не решить?
Если не фиксировать размеры пунктов меню, то нет, не решить.
Ну либо быть на 1000% уверенным что текст пунктов меню и шрифты не будут меняться. В этом случае можно задать смещения для каждого конкретного меню третьего уровня, так, чтобы получился нужный вам результат. Правда при адаптации придется опять же подбирать смещения для каждого под под меню для каждого размера экрана. А их и так немало, да плюс ретина экраны...
Цитата Сообщение от jurvrn Посмотреть сообщение
Пока не хочу на JS перейти
Если выравнивать меню по верхнему краю родителя, то js не нужен
1
3 / 3 / 4
Регистрация: 09.07.2018
Сообщений: 278
01.07.2019, 15:49  [ТС] 19
AlexZaw, я всё понял, спасибо, буду думать
У меня есть любительский вопрос -
в теме есть два стиля: .easywp-nav-primary и .easywp-nav-menu. Не могу разобраться что за что отвечает? к чему относятся? То есть не знаю что править для фоматирования
0
Эксперт HTML/CSS
1473 / 1222 / 516
Регистрация: 07.08.2016
Сообщений: 3,178
01.07.2019, 17:00 20
jurvrn, .easywp-nav-primary это общий блок обертка для меню, тот который на всю ширину сайта, в нем же меню выравнивается по горизонтали по центру.
.easywp-nav-menu это уже собственно само меню, в котором и находятся всё главное меню и все подменю.
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
01.07.2019, 17:00

Как прописать стиль для активного пункта меню?
Ув. юзеры, подскажите, какой командой прописать стиль для активного пункта меню?

Как сделать подсветку для активного пункта меню?
есть несколько функций-получение массива и вывод полученного с помощью рекурсивной функции..вот код...

Как для каждого пункта меню создать свой шаблон?
подскажите как для каждого пункта меню создать свой шаблон? чтобы не нагружать один модулями?

Как создать тип пункта меню для своего компонента
Добрый день. Я создала свой компонент. Теперь пытаюсь сделать пункт меню с ссылкой на него....


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.