首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >相对于主侧边栏中的父菜单项,将弹出菜单居中的块集中起来

相对于主侧边栏中的父菜单项,将弹出菜单居中的块集中起来
EN

Stack Overflow用户
提问于 2020-06-13 11:55:09
回答 1查看 32关注 0票数 0

我有一个侧边栏,带有子菜单项。我还需要构建一个带有弹出菜单的块,以便弹出菜单块相对于侧边栏中的父菜单项处于中心位置。就像在照片上一样。请帮帮我。谢谢。

1:https://i.stack.imgur.com/oEtuh.png

代码语言:javascript
运行
复制
.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%;
}
代码语言:javascript
运行
复制
<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>

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-06-13 12:15:21

您需要做的要点是拥有一个绝对定位的子元素和一个相对定位的父元素,然后使用top定位与对子元素的平移相结合,使其垂直居中于父元素的中心。

我在代码中添加了一些注释,以解释为获得此效果而需要进行的其他一些调整。

代码语言:javascript
运行
复制
.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%;
}
代码语言:javascript
运行
复制
<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>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62355335

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档