html - 相对于主侧边栏的父菜单项居中弹出菜单的块的中心化
问题描述
我有一个带有子菜单项的侧边栏。而且我需要构建一个带有弹出菜单的块,以便弹出菜单块相对于位于侧边栏中的父菜单项位于中心。就像在图片上一样。帮助,请。谢谢。
[![在此处输入图像描述][1]][1][1]:https ://i.stack.imgur.com/oEtuh.png
.main {
font-family: PT Sans;
position: relative;
display: flex;
flex-direction: row;
min-height: 100%;
}
.main_menu {
display: flex;
flex-direction: column;
width: auto;
background-color: #38618C;
padding: 50px 0 0 0;
z-index: 1;
user-select: none;
}
.main_menu_content {
display: flex;
flex-direction: column;
position: sticky;
top: 50px;
width: 100%;
}
.main_menu_content_list {
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: center;
height: 700px;
width: 250px;
}
.main_menu_content_list li {
list-style-type: none;
}
.main_menu_content_list a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 23px;
color: #D7DFE8;
text-decoration: none;
}
.content_list_submenu {
justify-content: center;
position: absolute;
padding: 0;
margin: 0;
left: 100%;
height: 100vh;
background-color: #F0F6F8;
box-shadow: 10px 0px 5px rgba(0, 0, 0, 0.25);
top: -50px;
pointer-events: none;
opacity: 0;
display: none;
transition: all linear 0.1s 0s;
width: 250px;
}
.main_menu_content_list_submenu_popup {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.main_menu_content_list > li.main_menu_content_list_arrow > a:after{
content: '';
position: absolute;
border: solid 10px;
border-color: transparent #F0F6F8 transparent transparent;
right: 0;
opacity: 0;
}
.main_menu_content_list > li.main_menu_content_list_arrow:hover > a:after{
opacity: 1;
}
.main_menu_content_list li:hover .content_list_submenu {
opacity: 1;
pointer-events: auto;
display: flex;
}
.main_menu_content_list_submenu_popup li:first-child {
margin: 50px 0 0 0;
}
.main_menu_content_list_submenu_popup li:not(:first-child) {
margin: 10px 0 0 0;
}
.main_menu_content_list li:hover > .content_list_submenu {
display: flex;
}
.main_menu_content_list_submenu_popup a {
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 21px;
color: #38618C;
}
.main_menu_content_list_submenu_popup a:hover {
color: #38618C;
text-decoration: underline;
}
.main_menu_content_list_submenu_popup a:active {
color: #FF5964;
}
.main_content {
display: flex;
align-items: center;
flex-direction: column;
width: 100%;
max-width: 100%;
min-height: 100%;
}
<div class="main">
<div class="main_menu">
<div class="main_menu_content">
<ul class="main_menu_content_list">
<li class="main_menu_content_list_arrow"><a href="">
<div class="main_menu_content_list_int"></div>Интернет
</a>
<div class="content_list_submenu">
<ul class="main_menu_content_list_submenu_popup">
<li><a class="" href="">Подключение</a></li>
<li><a href="">Дополнительные услуги</a></li>
<li><a href="">Настройка соединения</a></li>
<li><a href="">Подключенные дома</a></li>
<li><a href="">Документы</a></li>
</ul>
</div>
</li>
<li class="main_menu_content_list_arrow"><a href="">
<div class="main_menu_content_list_tv"></div>Телевидение
</a>
<div class="content_list_submenu">
<ul class="main_menu_content_list_submenu_popup">
<li><a class="" href="">Подключение</a></li>
<li><a href="">Новости</a></li>
<li><a href="">Акции</a></li>
<li><a href="">Аналоговое ТВ</a></li>
<li><a href="">Оборудование</a></li>
<li><a href="">Настройка каналов</a></li>
<li><a href="">Подключенные дома</a></li>
<li><a href="">Документы</a></li>
</ul>
</div>
</li>
<li class="main_menu_content_list_arrow"><a href="/content/video.html">
<div class="main_menu_content_list_video"></div>Видеонаблюдение,<br>домофон
</a>
<div class="content_list_submenu">
<ul class="main_menu_content_list_submenu_popup">
<li><a class="" href="">Подключение</a></li>
<li><a href="">Обслуживание</a></li>
<li><a href="">Установка</a></li>
<li><a href="">Заявка на ремонт</a></li>
</ul>
</div>
</li>
<li><a href="/content/rek.html">
<div class="main_menu_content_list_tvr"></div>ТВ Реклама
</a></li>
<li><a href="">
<div class="main_menu_content_list_intb"></div>Интернет для бизнеса
</a></li>
<div class="main_menu_content_list_sub_block">
<li><a href="">Оплата</a></li>
<li><a href="">О компании</a></li>
</div>
<li class="main_menu_content_list_arrow"><a href="">
<div class="main_menu_content_list_sub_account"></div>Личный кабинет
</a>
<div class="content_list_submenu">
<ul class="main_menu_content_list_submenu_popup">
<li><a href="">Интернет</a></li>
<li><a href="">Телевидение</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div class="main_content">
</div>
</div>
解决方案
您需要做的要点是拥有一个绝对定位的子元素和一个相对定位的父元素,然后使用顶部定位结合子元素的平移将其垂直居中于父元素。
我在代码中添加了一些注释来解释为了获得这种效果您需要进行的一些其他调整。
.main {
font-family: PT Sans;
position: relative;
display: flex;
flex-direction: row;
min-height: 100%;
}
.main_menu {
display: flex;
flex-direction: column;
width: auto;
background-color: #38618C;
padding: 50px 0 0 0;
z-index: 1;
user-select: none;
}
.main_menu_content {
display: flex;
flex-direction: column;
position: sticky;
top: 50px;
width: 100%;
}
.main_menu_content_list {
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: center;
height: 700px;
width: 250px;
}
.main_menu_content_list li {
list-style-type: none;
/*Make the parent item position relative*/
position: relative;
}
.main_menu_content_list a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 23px;
color: #D7DFE8;
text-decoration: none;
}
.content_list_submenu {
justify-content: center;
position: absolute;
padding: 0;
margin: 0;
left: 100%;
/*Remove height
height: 100vh;*/
background-color: #F0F6F8;
box-shadow: 10px 0px 5px rgba(0, 0, 0, 0.25);
/*Change top toi 50% with a counter active transform*/
top: 50%;
transform: translateY(-50%);
pointer-events: none;
opacity: 0;
display: none;
transition: all linear 0.1s 0s;
width: 250px;
}
.main_menu_content_list_submenu_popup {
display: flex;
flex-direction: column;
align-items: flex-start;
/*Add padding here instead of margin on the li*/
padding-top: 20px;
padding-bottom: 20px;
}
.main_menu_content_list > li.main_menu_content_list_arrow > a:after{
content: '';
position: absolute;
border: solid 10px;
border-color: transparent #F0F6F8 transparent transparent;
right: 0;
opacity: 0;
}
.main_menu_content_list > li.main_menu_content_list_arrow:hover > a:after{
opacity: 1;
}
.main_menu_content_list li:hover .content_list_submenu {
opacity: 1;
pointer-events: auto;
display: flex;
}
/* Remove this rule
.main_menu_content_list_submenu_popup li:first-child {
margin: 50px 0 0 0;
}
*/
.main_menu_content_list_submenu_popup li:not(:first-child) {
margin: 10px 0 0 0;
}
.main_menu_content_list li:hover > .content_list_submenu {
display: flex;
}
.main_menu_content_list_submenu_popup a {
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 21px;
color: #38618C;
}
.main_menu_content_list_submenu_popup a:hover {
color: #38618C;
text-decoration: underline;
}
.main_menu_content_list_submenu_popup a:active {
color: #FF5964;
}
.main_content {
display: flex;
align-items: center;
flex-direction: column;
width: 100%;
max-width: 100%;
min-height: 100%;
}
<div class="main">
<div class="main_menu">
<div class="main_menu_content">
<ul class="main_menu_content_list">
<li class="main_menu_content_list_arrow"><a href="">
<div class="main_menu_content_list_int"></div>Интернет
</a>
<div class="content_list_submenu">
<ul class="main_menu_content_list_submenu_popup">
<li><a class="" href="">Подключение</a></li>
<li><a href="">Дополнительные услуги</a></li>
<li><a href="">Настройка соединения</a></li>
<li><a href="">Подключенные дома</a></li>
<li><a href="">Документы</a></li>
</ul>
</div>
</li>
<li class="main_menu_content_list_arrow"><a href="">
<div class="main_menu_content_list_tv"></div>Телевидение
</a>
<div class="content_list_submenu">
<ul class="main_menu_content_list_submenu_popup">
<li><a class="" href="">Подключение</a></li>
<li><a href="">Новости</a></li>
<li><a href="">Акции</a></li>
<li><a href="">Аналоговое ТВ</a></li>
<li><a href="">Оборудование</a></li>
<li><a href="">Настройка каналов</a></li>
<li><a href="">Подключенные дома</a></li>
<li><a href="">Документы</a></li>
</ul>
</div>
</li>
<li class="main_menu_content_list_arrow"><a href="/content/video.html">
<div class="main_menu_content_list_video"></div>Видеонаблюдение,<br>домофон
</a>
<div class="content_list_submenu">
<ul class="main_menu_content_list_submenu_popup">
<li><a class="" href="">Подключение</a></li>
<li><a href="">Обслуживание</a></li>
<li><a href="">Установка</a></li>
<li><a href="">Заявка на ремонт</a></li>
</ul>
</div>
</li>
<li><a href="/content/rek.html">
<div class="main_menu_content_list_tvr"></div>ТВ Реклама
</a></li>
<li><a href="">
<div class="main_menu_content_list_intb"></div>Интернет для бизнеса
</a></li>
<div class="main_menu_content_list_sub_block">
<li><a href="">Оплата</a></li>
<li><a href="">О компании</a></li>
</div>
<li class="main_menu_content_list_arrow"><a href="">
<div class="main_menu_content_list_sub_account"></div>Личный кабинет
</a>
<div class="content_list_submenu">
<ul class="main_menu_content_list_submenu_popup">
<li><a href="">Интернет</a></li>
<li><a href="">Телевидение</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div class="main_content">
</div>
</div>
推荐阅读
- c++ - 如何使用类型特征和概念检测指向算术类型的指针?
- javascript - 从同一网页调用不同的模型图像
- javascript - 对集合MongoDB中的出现值进行分组和计数?
- r - 根据 R 中的名称索引重命名 data.frame/tible 中连续列的子集
- google-cloud-platform - 用于视频智能的 Google Cloud 语音转录
- azure - 是否有可能在 Azure DevOps 环境中获得所有可用的虚拟机?
- swift - 调度组不返回获取的数据
- ios - 使用 Xcode 中的 Swift 包管理器为 Flutter 项目添加依赖项时生成错误
- graph - 如何在 Cypher 中创建包含 2 个主键的索引?
- python - pandas to_datetime 格式说明符中的时间戳格式不匹配