0

Всем здравствуйте, уже 4й день сижу и не могу сделать меню, есть сайт на котором есть это меню (ссылка http://vnukovskoe.ru/). При попытке перенести данное меню в мой сайт, то при нажатии на кнопку ничего не происходит ( меню либо всегда открытое, либо всегда закрытое) Вот код самого меню html

<div class=" evp-header_top-panel 222">
      <div class="evp-header_top-panel_cnt">
       <div class="evp-header_navigation_lnk">
        <div class="evp-header_navigation" id="evp-header_navigator">
            <div class="evp-header_navigation-main">
                <div class="evp-header_navigation-menu tabContent" id="tabs">
                    <div class="evp-header_navigation_rubric selected" id="tab0">Навигатор</div>
                        <div class="evp-header_navigation_rubric " id="tab1">Услуги</div>




                 <a class="evp-header_navigation_list-item" href="https://www.mos.ru/obrazovanie?" target="_blank">
                        <img src="/bitrix/templates/books/images/icons/icn_obrazovanie.svg" alt="Образование " class="evp-header_navigation_list-item_img">
        <span class="evp-header_navigation_list-item_title">Образование </span>
                    </a>
                        <a class="evp-header_navigation_list-item" href="https://www.mos.ru/tehnologii-moskvi/?" target="_blank">
                        <img src="/bitrix/templates/books/images/icons/icn_tehnologii_moskvi.svg" alt="Технологии Москвы" class="evp-header_navigation_list-item_img">
                            <span class="evp-header_navigation_list-item_title">Технологии Москвы</span>
                            </a>
                <a class="evp-header_navigation_list-item" href="https://www.mos.ru/transport?" target="_blank">
                        <img src="/bitrix/templates/books/images/icons/icn_transport.svg" alt="Транспорт" class="evp-header_navigation_list-item_img">
                        <span class="evp-header_navigation_list-item_title">Транспорт</span>
                    </a>
                    <a class="evp-header_navigation_list-item" href=" https://www.mos.ru/stroitelstvo?" target="_blank">
                        <img src="/bitrix/templates/books/images/icons/icn_stroitelstvo.svg" alt="Строительство" class="evp-header_navigation_list-item_img">
                        <span class="evp-header_navigation_list-item_title">Строительство</span>
                        </a>
                    <a class="evp-header_navigation_list-item" href="https://www.mos.ru/socpodderjka?" target="_blank">
                        <img src="/bitrix/templates/books/images/icons/icn_socialnaya_podderjka.svg" alt="Социальная поддержка" class="evp-header_navigation_list-item_img">
                        <span class="evp-header_navigation_list-item_title">Социальная поддержка</span>
                        </a>
                    <a class="evp-header_navigation_list-item" href="https://www.mos.ru/cult/?" target="_blank">
                        <img src="/bitrix/templates/books/images/icons/icn_kultura.svg" alt="Культура" class="evp-header_navigation_list-item_img">
                        <span class="evp-header_navigation_list-item_title">Культура</span>
                        </a>
                    <a class="evp-header_navigation_list-item" href="https://www.mos.ru/turizm?" target="_blank">
                        <img src="/bitrix/templates/books/images/icons/icn_turism.svg" alt="Туризм" class="evp-header_navigation_list-item_img">
                        <span class="evp-header_navigation_list-item_title">Туризм</span>
                        </a>
                        <a class="evp-header_navigation_list-item" href="https://www.mos.ru/dom-i-dvor?" target="_blank">
                        <img src="/bitrix/templates/books/images/icons/icn_dom_i_dvor.svg" alt="Дом и двор" class="evp-header_navigation_list-item_img">
                            <span class="evp-header_navigation_list-item_title">Дом и двор</span>
                            </a>
                    <a class="evp-header_navigation_list-item" href="https://www.mos.ru/sport?" target="_blank">
                        <img src="/bitrix/templates/books/images/icons/icn_sport-_1_.svg" alt="Спорт" class="evp-header_navigation_list-item_img">
                        <span class="evp-header_navigation_list-item_title">Спорт</span>
                        </a>
                    <a class="evp-header_navigation_list-item" href="https://www.mos.ru/parki-i-zelenie-zoni?" target="_blank">
                        <img src="/bitrix/templates/books/images/icons/icn_parki_i_zelenie_zoni.svg" alt="Парки и зеленые зоны" class="evp-header_navigation_list-item_img">
                        <span class="evp-header_navigation_list-item_title">Парки и зеленые зоны</span>
                        </a>
                    <a class="evp-header_navigation_list-item" href="https://www.mos.ru/nauka-i-innovacii?" target="_blank">
                        <img src="/bitrix/templates/books/images/icons/icn_nayka_i_innovacii.svg" alt="Наука и инновации" class="evp-header_navigation_list-item_img">
                        <span class="evp-header_navigation_list-item_title">Наука и инновации</span>
                        </a>
                    <a class="evp-header_navigation_list-item" href="https://www.mos.ru/ekonomika-i-biznes?" target="_blank">
                        <img src="/bitrix/templates/books/images/icons/icn_economika_i_biznes.svg" alt="Экономика и бизнес" class="evp-header_navigation_list-item_img">
                        <span class="evp-header_navigation_list-item_title">Экономика и бизнес</span>
                        </a>
                <a class="evp-header_navigation_list-item" href="https://www.mos.ru/upravlyaem-gorodom?" target="_blank">
                    <img src="/bitrix/templates/books/images/icons/icn_ypravlyaem_gorodom.svg" alt="Управляем городом" class="evp-header_navigation_list-item_img">
                        <span class="evp-header_navigation_list-item_title">Управляем городом</span>
                        </a>
                    <a class="evp-header_navigation_list-item" href="https://www.mos.ru/ekologiya?" target="_blank">
                        <img src="/bitrix/templates/books/images/icons/icn_ecologiya.svg" alt="Экология" class="evp-header_navigation_list-item_img">
                        <span class="evp-header_navigation_list-item_title">Экология</span>
    </a>
                    <a class="evp-header_navigation_list-item" href="https://www.mos.ru/blagoustroystvo-goroda?" target="_blank">
                        <img src="/bitrix/templates/books/images/icons/icn_blagoustroistvo_goroda.svg" alt="Благоустройство города" class="evp-header_navigation_list-item_img">
                        <span class="evp-header_navigation_list-item_title">Благоустройство города</span>
                        </a>
                    <a class="evp-header_navigation_list-item" href="https://www.mos.ru/zdravoohranenie/?" target="_blank">
                        <img src="/bitrix/templates/books/images/icons/icn_zdravoohranenie.svg" alt="Здравоохранение" class="evp-header_navigation_list-item_img">
                            <span class="evp-header_navigation_list-item_title">Здравоохранение</span>
                            </a>
                    <div class="evp-header_navigation_popular">Услуги</div>
                    <div class="evp-header_navigation_list-popular tabContent" id="tab12">
                    <a class="evp-header_navigation_list-item" href="https://www.mos.ru/pgu/ru/services/link/2022?" target="_blank"><span class="evp-header_navigation_list-item_title">Прием показаний приборов учёта воды </span></a><a class="evp-header_navigation_list-item" href="https://www.mos.ru/pgu/ru/services/link/2103?" target="_blank"><span class="evp-header_navigation_list-item_title">Электронный дневник</span></a><a class="evp-header_navigation_list-item" href="https://www.mos.ru/pgu/ru/services/link/2170?" target="_blank"><span class="evp-header_navigation_list-item_title">Получить и оплатить единый платежный документ (ЕПД) </span></a><a class="evp-header_navigation_list-item" href="https://www.mos.ru/pgu/ru/application/gibdd/fines?" target="_blank"><span class="evp-header_navigation_list-item_title">Поиск и оплата штрафов</span></a><a class="evp-header_navigation_list-item" href="https://www.mos.ru/pgu/ru/services/link/1881?" target="_blank"><span class="evp-header_navigation_list-item_title">Запись на приём к врачу, отмена и перенос записи </span></a><a class="evp-header_navigation_list-item" href="https://www.mos.ru/pgu/ru/services/link/2197?" target="_blank"><span class="evp-header_navigation_list-item_title">Посмотреть информацию о посещении и питании в школе </span></a><a class="evp-header_navigation_list-item" href="https://www.mos.ru/pgu/ru/services/link/2023?" target="_blank"><span class="evp-header_navigation_list-item_title">Приём показаний и оплата электроэнергии</span></a><a class="evp-header_navigation_list-item" href="https://www.mos.ru/pgu/ru/application/mgts/balance?" target="_blank"><span class="evp-header_navigation_list-item_title">Проверка и пополнение баланса домашнего телефона МГТС </span></a><a class="evp-header_navigation_list-item" href="https://www.mos.ru/services/catalog/popular/?" target="_blank"><span class="evp-header_navigation_list-item_title">Все услуги</span></a></div></div></div><a class="evp-header_mos-link" href="https://mos.ru" target="_blank">
          <img src="/bitrix/templates/newsd/images/icon/logo_mosru.svg?1.0.27">
          </a>

css

.evp-header_top-panel {
    background-color: #525558;
    font-family: MCW XX Regular Regular, Arial, sans-serif;
    color: #333;
    font-size: 16px;
    line-height: 24px;
    margin: 0;
    padding: 0;
    min-width: 320px;
    width: 100%;
    position: relative

}

.evp-header_top-panel_cnt {
    max-width: 1920px;
    min-width: 320px;
    margin: 0 auto
}

.evp-header_top-panel_cnt:after {
    display: table;
    clear: both;
    content: ""
}

.evp-header_navigation_lnk {
    height: 60px;
    width: 60px;
    margin-right: 25px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    position: relative;
    z-index: 4;
    -webkit-transition: all .3s ease-in;
    transition: all .3s ease-in;
    background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjIzcHgiIGhlaWdodD0iMjNweCIgdmlld0JveD0iMCAwIDIzIDIzIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNDIgKDM2NzgxKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4NCiAgICA8dGl0bGU+Q29tYmluZWQgU2hhcGU8L3RpdGxlPg0KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPg0KICAgIDxkZWZzPjwvZGVmcz4NCiAgICA8ZyBpZD0iTEFURVNUIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4NCiAgICAgICAgPGcgaWQ9IndlYi1lbGVtZW50cyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQyNS4wMDAwMDAsIC00MjAuMDAwMDAwKSIgZmlsbD0iI0ZGRkZGRiI+DQogICAgICAgICAgICA8ZyBpZD0iaGVhZGVyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNjEuMDAwMDAwLCA0MDEuMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgPHBhdGggZD0iTTE2NCwxOSBMMTY5LDE5IEwxNjksMjQgTDE2NCwyNCBMMTY0LDE5IFogTTE2NCwyOCBMMTY5LDI4IEwxNjksMzMgTDE2NCwzMyBMMTY0LDI4IFogTTE2NCwzNyBMMTY5LDM3IEwxNjksNDIgTDE2NCw0MiBMMTY0LDM3IFogTTE3MywxOSBMMTc4LDE5IEwxNzgsMjQgTDE3MywyNCBMMTczLDE5IFogTTE3MywyOCBMMTc4LDI4IEwxNzgsMzMgTDE3MywzMyBMMTczLDI4IFogTTE3MywzNyBMMTc4LDM3IEwxNzgsNDIgTDE3Myw0MiBMMTczLDM3IFogTTE4MiwxOSBMMTg3LDE5IEwxODcsMjQgTDE4MiwyNCBMMTgyLDE5IFogTTE4MiwyOCBMMTg3LDI4IEwxODcsMzMgTDE4MiwzMyBMMTgyLDI4IFogTTE4MiwzNyBMMTg3LDM3IEwxODcsNDIgTDE4Miw0MiBMMTgyLDM3IFoiIGlkPSJDb21iaW5lZC1TaGFwZSI+PC9wYXRoPg0KICAgICAgICAgICAgPC9nPg0KICAgICAgICA8L2c+DQogICAgPC9nPg0KPC9zdmc+") no-repeat 50%
}

@media (max-width:767px) {
    .evp-header_navigation_lnk {
        margin-right: 12px
    }
}

.evp-header_navigation_lnk:hover {
    background-color: #fff;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ItCh0LvQvtC5XzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjNweCIgaGVpZ2h0PSIyM3B4IiB2aWV3Qm94PSIwIDAgMjMgMjMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIzIDIzIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjx0aXRsZT5Db21iaW5lZCBTaGFwZTwvdGl0bGU+DQo8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4NCjxnIGlkPSJMQVRFU1QiPg0KCTxnIGlkPSJ3ZWItZWxlbWVudHMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00MjUuMDAwMDAwLCAtNDIwLjAwMDAwMCkiPg0KCQk8ZyBpZD0iaGVhZGVyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNjEuMDAwMDAwLCA0MDEuMDAwMDAwKSI+DQoJCQk8cGF0aCBpZD0iQ29tYmluZWQtU2hhcGUiIGZpbGw9IiNDOTI3MjMiIGQ9Ik0xNjQsMTloNXY1aC01VjE5eiBNMTY0LDI4aDV2NWgtNVYyOHogTTE2NCwzN2g1djVoLTVWMzd6IE0xNzMsMTloNXY1aC01VjE5eg0KCQkJCSBNMTczLDI4aDV2NWgtNVYyOHogTTE3MywzN2g1djVoLTVWMzd6IE0xODIsMTloNXY1aC01VjE5eiBNMTgyLDI4aDV2NWgtNVYyOHogTTE4MiwzN2g1djVoLTVWMzd6Ii8+DQoJCTwvZz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==")
}

@media (max-width:767px) {
    .evp-header_navigation_lnk:hover {
        background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjIzcHgiIGhlaWdodD0iMjNweCIgdmlld0JveD0iMCAwIDIzIDIzIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNDIgKDM2NzgxKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4NCiAgICA8dGl0bGU+Q29tYmluZWQgU2hhcGU8L3RpdGxlPg0KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPg0KICAgIDxkZWZzPjwvZGVmcz4NCiAgICA8ZyBpZD0iTEFURVNUIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4NCiAgICAgICAgPGcgaWQ9IndlYi1lbGVtZW50cyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQyNS4wMDAwMDAsIC00MjAuMDAwMDAwKSIgZmlsbD0iI0ZGRkZGRiI+DQogICAgICAgICAgICA8ZyBpZD0iaGVhZGVyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNjEuMDAwMDAwLCA0MDEuMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgPHBhdGggZD0iTTE2NCwxOSBMMTY5LDE5IEwxNjksMjQgTDE2NCwyNCBMMTY0LDE5IFogTTE2NCwyOCBMMTY5LDI4IEwxNjksMzMgTDE2NCwzMyBMMTY0LDI4IFogTTE2NCwzNyBMMTY5LDM3IEwxNjksNDIgTDE2NCw0MiBMMTY0LDM3IFogTTE3MywxOSBMMTc4LDE5IEwxNzgsMjQgTDE3MywyNCBMMTczLDE5IFogTTE3MywyOCBMMTc4LDI4IEwxNzgsMzMgTDE3MywzMyBMMTczLDI4IFogTTE3MywzNyBMMTc4LDM3IEwxNzgsNDIgTDE3Myw0MiBMMTczLDM3IFogTTE4MiwxOSBMMTg3LDE5IEwxODcsMjQgTDE4MiwyNCBMMTgyLDE5IFogTTE4MiwyOCBMMTg3LDI4IEwxODcsMzMgTDE4MiwzMyBMMTgyLDI4IFogTTE4MiwzNyBMMTg3LDM3IEwxODcsNDIgTDE4Miw0MiBMMTgyLDM3IFoiIGlkPSJDb21iaW5lZC1TaGFwZSI+PC9wYXRoPg0KICAgICAgICAgICAgPC9nPg0KICAgICAgICA8L2c+DQogICAgPC9nPg0KPC9zdmc+") no-repeat 50%
    }
}

.evp-header_navigation_lnk.active {
    background-color: #fff;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ItCh0LvQvtC5XzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjNweCIgaGVpZ2h0PSIyM3B4IiB2aWV3Qm94PSIwIDAgMjMgMjMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIzIDIzIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjx0aXRsZT5Db21iaW5lZCBTaGFwZTwvdGl0bGU+DQo8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4NCjxnIGlkPSJMQVRFU1QiPg0KCTxnIGlkPSJ3ZWItZWxlbWVudHMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00MjUuMDAwMDAwLCAtNDIwLjAwMDAwMCkiPg0KCQk8ZyBpZD0iaGVhZGVyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNjEuMDAwMDAwLCA0MDEuMDAwMDAwKSI+DQoJCQk8cGF0aCBpZD0iQ29tYmluZWQtU2hhcGUiIGZpbGw9IiNDOTI3MjMiIGQ9Ik0xNjQsMTloNXY1aC01VjE5eiBNMTY0LDI4aDV2NWgtNVYyOHogTTE2NCwzN2g1djVoLTVWMzd6IE0xNzMsMTloNXY1aC01VjE5eg0KCQkJCSBNMTczLDI4aDV2NWgtNVYyOHogTTE3MywzN2g1djVoLTVWMzd6IE0xODIsMTloNXY1aC01VjE5eiBNMTgyLDI4aDV2NWgtNVYyOHogTTE4MiwzN2g1djVoLTVWMzd6Ii8+DQoJCTwvZz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==")
}

.evp-header_navigation_lnk.active .evp-header_tooltip_navigation {
    display: block
}

.evp-header_navigation-hidden.evp-header_navigation {
    display: none
}

.evp-header_navigation {
    position: absolute;
    top: 60px;
    min-width: 320px;
    left: 0;
    width: 100%;
    height: auto;
    display: block;
    z-index: 3;
    white-space: nowrap;
    background-color: #fff;
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .4)
}

.evp-header_navigation-main {
    max-width: 990px;
    min-width: 320px;
    margin: 0 auto;
    white-space: normal
}

.evp-header_navigation_rubric {
    color: #333;
    font-family: MCW XX Regular Regular, Arial, sans-serif;
    font-size: 20px;
    margin: 21px 0 25px;
    line-height: 26px
}

@media (max-width:990px) {
    .evp-search_open .evp-header_search_btn-lupe {
    display: none;}
    .evp-header_navigation_rubric {
        padding: 0 20px
    }
}

@media (max-width:767px) {
    .evp-header_navigation_rubric {
        display: none
    }
}

.evp-header_navigation_popular {
    color: #333;
    font-family: MCW XX Regular Regular, Arial, sans-serif;
    font-size: 20px;
    padding: 16px 0 12px;
    border-top: 1px solid #e2e2e2;
    line-height: 26px
}

@media (max-width:990px) {
    .evp-header_navigation_popular {
        padding: 16px 20px 12px
    }
}

@media (max-width:767px) {
    .evp-header_navigation_popular {
        display: none
    }
}

.evp-header_navigation-menu {
    display: none
}

@media (max-width:767px) {
    .evp-header_navigation-menu {
        display: table;
        width: 100%;
        margin-bottom: 20px;
        height: 63px
    }
    .evp-header_navigation-menu .evp-header_navigation_rubric {
        display: table-cell;
        height: 100%;
        vertical-align: middle
    }
}

.evp-header_navigation-menu .evp-header_navigation_rubric {
    color: #a9a9a9;
    font-family: MCW XX Regular Regular, Arial, sans-serif;
    font-size: 20px;
    line-height: 26px;
    text-align: center;
    width: 50%;
    margin: 0;
    cursor: pointer;
    border-bottom: 2px solid #fff
}

.evp-header_navigation-menu .evp-header_navigation_rubric.selected {
    color: #333;
    border-color: #ea221d
}
.evp-header_navigation_list-item:hover{    text-decoration: none;}
@media (max-width:990px) {
    .evp-header_navigation_list {
        padding: 0 20px
    }
}

.evp-header_navigation_list-item {
    width: 24%;
    display: inline-block;
    vertical-align: top;
    margin-bottom: 20px
}

@media (max-width:990px) {
    .evp-header_navigation_list-item {
        width: 33%
    }
}

@media (max-width:767px) {
    .evp-header_navigation_list-item {
        width: 100%
    }
}

.evp-header_navigation_list-item_img {
    display: inline-block;
    vertical-align: top;
    max-width: 30px;
    height: auto;
    margin-right: 10px
}

.evp-header_navigation_list-item:hover .evp-header_navigation_list-item_title {
    color: #ea221d
}

@media (max-width:767px) {
    .evp-header_navigation_list-item:hover .evp-header_navigation_list-item_title {
        color: #333
    }
}

.evp-header_navigation_list-item_title {
    display: inline-block;
    vertical-align: top;
    color: #333;
    font-family: MCW XX Regular Regular, Arial, sans-serif;
    font-size: 14px;
    width: calc(100% - 56px);
    line-height: 30px;
    -webkit-transition: color .3s ease-in;
    transition: color .3s ease-in
}

@media (max-width:767px) {
    .evp-header_navigation_list.hide {
        display: none
    }
}

.evp-header_navigation_list-popular {
    padding-bottom: 30px
}

@media (max-width:990px) {
    .evp-header_navigation_list-popular {
        padding: 0 20px 30px
    }
}

.evp-header_navigation_list-popular .evp-header_navigation_list-item {
    width: auto;
    position: relative;
    padding-left: 30px;
    margin-bottom: 0
}

@media (max-width:767px) {
    .evp-header_navigation_list-popular .evp-header_navigation_list-item {
        width: 100%
    }
}

.evp-header_navigation_list-popular .evp-header_navigation_list-item:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 19px;
    width: 30px;
    background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ItCh0LvQvtC5XzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNHB4IiBoZWlnaHQ9IjRweCIgdmlld0JveD0iMCAwIDQgNCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNCA0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxnPg0KCQk8ZGVmcz4NCgkJCTxyZWN0IGlkPSJTVkdJRF8xXyIgd2lkdGg9IjQiIGhlaWdodD0iNCIvPg0KCQk8L2RlZnM+DQoJCTxkZWZzPg0KCQkJPHBhdGggaWQ9IlNWR0lEXzJfIiBkPSJNMiw0YzEuMTA1LDAsMi0wLjg5NiwyLTJTMy4xMDUsMCwyLDBDMC44OTYsMCwwLDAuODk2LDAsMlMwLjg5Niw0LDIsNEwyLDR6Ii8+DQoJCTwvZGVmcz4NCgkJPGNsaXBQYXRoIGlkPSJTVkdJRF8zXyI+DQoJCQk8dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF8xXyIgIG92ZXJmbG93PSJ2aXNpYmxlIi8+DQoJCTwvY2xpcFBhdGg+DQoJCTxjbGlwUGF0aCBpZD0iU1ZHSURfNF8iIGNsaXAtcGF0aD0idXJsKCNTVkdJRF8zXykiPg0KCQkJPHVzZSB4bGluazpocmVmPSIjU1ZHSURfMl8iICBvdmVyZmxvdz0idmlzaWJsZSIvPg0KCQk8L2NsaXBQYXRoPg0KCQk8cmVjdCB4PSItNSIgeT0iLTUiIGNsaXAtcGF0aD0idXJsKCNTVkdJRF80XykiIGZpbGw9IiNDNDI3MjYiIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIvPg0KCTwvZz4NCjwvZz4NCjwvc3ZnPg0K") no-repeat 50%
}

.evp-header_navigation_list-popular .evp-header_navigation_list-item:first-child {
    padding-left: 0
}

@media (max-width:767px) {
    .evp-header_navigation_list-popular .evp-header_navigation_list-item:first-child {
        padding-left: 30px
    }
}

.evp-header_navigation_list-popular .evp-header_navigation_list-item:first-child:before {
    display: none
}

@media (max-width:767px) {
    .evp-header_navigation_list-popular .evp-header_navigation_list-item:first-child:before {
        display: block
    }
}

.evp-header_navigation_list-popular .evp-header_navigation_list-item_title {
    display: inline-block;
    vertical-align: top;
    color: #333;
    font-family: MCW XX Regular Regular, Arial, sans-serif;
    font-size: 14px;
    width: auto;
    -webkit-transition: color .3s ease-in;
    transition: color .3s ease-in;
    line-height: 19px
}

@media (max-width:767px) {
    .evp-header_navigation_list-popular .evp-header_navigation_list-item_title {
        line-height: 19px
    }
}

.evp-header_navigation_list-popular .evp-header_navigation_list-item:hover .evp-header_navigation_list-item_title {
    color: #ea221d
}

@media (max-width:767px) {
    .evp-header_navigation_list-popular .evp-header_navigation_list-item:hover .evp-header_navigation_list-item_title {
        color: #333
    }
}

@media (max-width:767px) {
    .evp-header_navigation_list-popular.hide {
        display: none
    }
}

.evp-header_navigation_list#tab1 {
    margin-bottom: 20px
}

.evp-header_navigation_list#tab1 .evp-header_navigation_list-item {
    width: auto;
    padding-left: 30px;
    position: relative;
    margin-bottom: 0
}

@media (max-width:767px) {
    .evp-header_navigation_list#tab1 .evp-header_navigation_list-item {
        width: 100%;
        padding-left: 12px;
        margin-bottom: 20px
    }
}

.evp-header_navigation_list#tab1 .evp-header_navigation_list-item:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 19px;
    width: 30px;
    background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ItCh0LvQvtC5XzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNHB4IiBoZWlnaHQ9IjRweCIgdmlld0JveD0iMCAwIDQgNCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNCA0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxnPg0KCQk8ZGVmcz4NCgkJCTxyZWN0IGlkPSJTVkdJRF8xXyIgd2lkdGg9IjQiIGhlaWdodD0iNCIvPg0KCQk8L2RlZnM+DQoJCTxkZWZzPg0KCQkJPHBhdGggaWQ9IlNWR0lEXzJfIiBkPSJNMiw0YzEuMTA1LDAsMi0wLjg5NiwyLTJTMy4xMDUsMCwyLDBDMC44OTYsMCwwLDAuODk2LDAsMlMwLjg5Niw0LDIsNEwyLDR6Ii8+DQoJCTwvZGVmcz4NCgkJPGNsaXBQYXRoIGlkPSJTVkdJRF8zXyI+DQoJCQk8dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF8xXyIgIG92ZXJmbG93PSJ2aXNpYmxlIi8+DQoJCTwvY2xpcFBhdGg+DQoJCTxjbGlwUGF0aCBpZD0iU1ZHSURfNF8iIGNsaXAtcGF0aD0idXJsKCNTVkdJRF8zXykiPg0KCQkJPHVzZSB4bGluazpocmVmPSIjU1ZHSURfMl8iICBvdmVyZmxvdz0idmlzaWJsZSIvPg0KCQk8L2NsaXBQYXRoPg0KCQk8cmVjdCB4PSItNSIgeT0iLTUiIGNsaXAtcGF0aD0idXJsKCNTVkdJRF80XykiIGZpbGw9IiNDNDI3MjYiIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIvPg0KCTwvZz4NCjwvZz4NCjwvc3ZnPg0K") no-repeat 50%
}

@media (max-width:767px) {
    .evp-header_navigation_list#tab1 .evp-header_navigation_list-item:before {
        width: 12px;
        background-position: 0
    }
}

.evp-header_navigation_list#tab1 .evp-header_navigation_list-item:first-child {
    padding-left: 0
}

@media (max-width:767px) {
    .evp-header_navigation_list#tab1 .evp-header_navigation_list-item:first-child {
        padding-left: 12px
    }
}

.evp-header_navigation_list#tab1 .evp-header_navigation_list-item:first-child:before {
    display: none
}

@media (max-width:767px) {
    .evp-header_navigation_list#tab1 .evp-header_navigation_list-item:first-child:before {
        display: block
    }
}

.evp-header_navigation_list#tab1 .evp-header_navigation_list-item_title {
    color: #333;
    font-family: MCW XX Regular Regular, Arial, sans-serif;
    font-size: 14px;
    width: auto;
    line-height: 19px
}

@media (max-width:767px) {
    .evp-header_navigation_list#tab1 {
        margin-bottom: 0
    }
}

.evp-header_mos-link {
    display: inline-block;
    vertical-align: top;
    margin-top: 13px;
    text-decoration: none;
    margin-right: 25px
}

}


1
  • нужно сделать так, что бы при первом нажатии на кнопку, к evp-header_navigation_lnk добавлялся класс action , а при повторном нажатии, класс action убирался, а к evp-header_navigation добавлялся класс evp-header_navigation-hidden 17 ноя 2021 в 21:15

1 ответ 1

1

За открытие/закрытие меню отвечает логика, описанная в js файле. Html и css это просто внешний вид, поэтому вы и видите только открытое или закрытое состояние. Само переключение реализуется так в файле .js:

const HIDDEN_CLASS = 'evp-header_navigation-hidden'
const MENU_ACTIVE_CLASS = 'active'

const menuBtn = document.querySelector('.evp-header_navigation_lnk')
const nav = document.querySelector('.evp-header_navigation')

menuBtn.addEventListener('click', () => {
  menuBtn.classList.toggle(MENU_ACTIVE_CLASS)
  nav.classList.toggle(HIDDEN_CLASS)
})
7
  • Мне нужно сделать так, что при первом нажатии убирался класс evp-header_navigation-hidden из evp-header_navigation и к evp-header_navigation_lnk добавлялся action, а при следующем active из evp-header_navigation_дтл убирался, а evp-header_navigation-hidden добавлялся к evp-header_navigation, а так спасибо за вариант ответа 18 ноя 2021 в 16:33
  • это можно сделать так: const HIDDEN_CLASS = 'evp-header_navigation-hidden'; const MENU_ACTIVE_CLASS = 'active'; const menuBtn = document.querySelector('.evp-header_navigation_lnk'); const nav = document.querySelector('.evp-header_navigation'); const isMenuOpened = false; menuBtn.addEventListener('click', () => { if (isMenuOpened) { menuBtn.classList.add(MENU_ACTIVE_CLASS); nav.classList.remove(HIDDEN_CLASS); } else { menuBtn.classList.remove(MENU_ACTIVE_CLASS); nav.classList.add(HIDDEN_CLASS); } }); 18 ноя 2021 в 18:55
  • блин, не работает, класс hidden добавляется, но актив нет, меню появляется сразу открытым, и при нажатии кнопки оно исчезает и больше не открывается 18 ноя 2021 в 19:08
  • по коду всё должно добавляться. Проверьте, действительно ли всё должно работать так, как вы описали. 18 ноя 2021 в 19:43
  • да, всё верно, в общем ошибка в том, что нужно добавлять не "active", а "action". Поменяйте сверху в переменной и всё заработает :) 18 ноя 2021 в 19:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.