боковой сайдбар в мобильное меню

Question

Задача не простая. У меня есть боковой сайдбар, с выпадающим блоком подменю. И его необходимо сделать адаптивным для мобильных устройств, например, бургер-меню. Я пытался сделать это, но безрезультатно. Может кто даст идею, или подскажет, как это можно сделать. При наведении на некоторые пункты меню, появляется popup. Приношу извинения за то, что не мало кода. Старался все сделать компактно. Надеюсь на помощь. Буду очень признателен. Спасибо.

.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_submenu {
  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;
  transition: all linear 0.1s 0s;
  width: auto;
  white-space: nowrap;
  padding: 0 40px 0 40px;
}

.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 .main_menu_content_list_submenu {
  opacity: 1;
  pointer-events: auto;
}

.main_menu_content_list .main_menu_content_list_arrow:nth-child(2) .main_menu_content_list_submenu_popup {
  margin: 2.9em 0 0 0;
}

.main_menu_content_list .main_menu_content_list_arrow:nth-child(3) .main_menu_content_list_submenu_popup {
  margin: 6.7em 0 0 0;
}

.main_menu_content_list .main_menu_content_list_arrow:nth-child(4) .main_menu_content_list_submenu_popup {
  margin: 19.1em 0 0 0;
}

.main_menu_content_list .main_menu_content_list_arrow:nth-child(8) .main_menu_content_list_submenu_popup {
  margin: 43.5em 0 0 0;
}

.main_menu_content_list_submenu_popup li:not(:first-child) {
  margin: 15px 0 0 0;
}

.main_menu_content_list_submenu_popup a {
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  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;
}

<div class="main">

<div class="main_menu">
            <div class="main_menu_content">
                <ul class="main_menu_content_list">
                    <li><a href="">11111111</a></li>
                    <li class="main_menu_content_list_arrow"><a href="/content/internet.html">
                            <div class="main_menu_content_list_int"></div>222222
                        </a>
                        <div class="main_menu_content_list_submenu">
                            <ul class="main_menu_content_list_submenu_popup">
                                <li>
                                    <p class="opendinamicmodal_internet">test</p>
                                </li>
                                <li><a href="/content/internet_additionalservices.html">test</a></li>
                                <li><a href="">test</a></li>
                                <li><a href="">test</a></li>
                                <li><a href="">test</a></li>
                                <li>
                                    <p class="opendinamicmodal_fastpayment_internet">test</p>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="main_menu_content_list_arrow"><a href="">
                            <div class="main_menu_content_list_tv"></div>333333
                        </a>
                        <div class="main_menu_content_list_submenu">
                            <ul class="main_menu_content_list_submenu_popup">
                                <li>
                                    <p class="opendinamicmodal_tv">test</p>
                                </li>
                                <li><a href="">test</a></li>
                                <li><a href="">test</a></li>
                                <li><a href="">test</a></li>
                                <li><a href="">test</a></li>
                                <li><a href="">test</a></li>
                                <li><a href="">test</a></li>
                                <li><a href="">test</a></li>
                                <li>
                                    <p class="opendinamicmodal_fastpayment_tv">test</p>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="main_menu_content_list_arrow"><a href="">
                            <div class="main_menu_content_list_video"></div>444444
                        </a>
                        <div class="main_menu_content_list_submenu">
                            <ul class="main_menu_content_list_submenu_popup">
                                <li><a href="">test</a></li>
                                <li><a href="">test</a></li>
                                <li>
                                    <p class="opendinamicmodal_video">test</p>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="/content/rek.html">
                            <div class="main_menu_content_list_tvr"></div>555555
                        </a></li>
                    <li><a href="content/intb.html">
                            <div class="main_menu_content_list_intb"></div>6666666
                        </a></li>

                    <li><a href="">77777</a></li>

                    <li class="main_menu_content_list_arrow"><a href="">
                            <div class="main_menu_content_list_sub_account"></div>888888
                        </a>
                        <div class="main_menu_content_list_submenu">
                            <ul class="main_menu_content_list_submenu_popup">
                                <li>
                                    <p class="entertoaccount_internet">test</p>
                                </li>
                                <li>
                                    <p class="entertoaccount_tv">test</p>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        
<div class="main_content">
</div>

</div>

БЛОГ НА HUSL

боковой сайдбар в мобильное меню

Ответы (0 шт):