Menú Lateral Fotoacces

fac_menulateral.php

<?php
/**
* 1. Guardar este documento en el directorio "templates" como "fac_menulateral.php" 
* 2. Guardar el siguiente codigo en functions.php 

* function fac_menulateral_code() { 
*     ob_start(); 
*     include_once('template/fac_menulateral.php'); 
*     return ob_get_clean(); 
*  } add_shortcode('fac_menulateral', 'fac_menulateral_code');

* 3. Abrir en Elementor el header y agregar un shotcode con -> [fac_menulateral] 
* 4. Cerciorarse que el menu esta asignado a "Menu Principal" 

* Ya con eso bastaria
*/
 ?>

<div class="fac_wrap">
    <div class="fac_close">
        <i class="fa fa-times"></i>
    </div>
    <ul class="fac_items">
        <?php $menuParameters = array (
            'theme_location'  => 'menu-principal',
            'container'       => '',
            'container_id'    => FALSE,
            'menu_class'      => '',
            'menu_id'         => FALSE,
            'items_wrap'      => '%3$s',
            'depth'           => 0,
            // 'echo' => false, //Elimina <li>
        );
        echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
        ?>
    </ul>
</div>
<style media="screen">
@media(min-width: 992px) {
    .fac_wrap {
        display: none;
    }
}
@media(max-width: 991px) {
    .fac_wrap {
        font-size: 12px;
        background: #1A202C;
        width: calc(100% - 40px);
        position: fixed;
        z-index: 9999;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        height: 100vh;
        overflow: auto;
        padding: 60px 0 0;
        transform: translateX(-100%);
        opacity: 0;
        transition: all 0.2s ease-in-out;
    }
    .fac_wrap.show {
        transform: translateX(0%);
        opacity: 1;
        /* transition: transform 0.2s ease-in-out; */
    }
    .fac_wrap a {
        color: #fff;
        text-transform: uppercase;
        display: block;
        padding: 8px 12px;
    }
    .fac_wrap * {
        list-style: none;
    }
    .fac_wrap .sub-menu {
        display: none;
    }
    .fac_wrap .fac_items {
        margin: 0;
    }
    .fac_wrap .fac_close {
        display: flex;
        justify-content: flex-end;
        padding: 0 20px;
        font-size: 20px;
        color: #fff;
    }
    .menu-item-has-children> a:after {
        content: '\f105';
        font-family: FontAwesome;
        transform: translateX(-10px);
    }
    .menu-item-has-children a {
        display: flex;
        justify-content: space-between;
    }
}
</style>




<script type="text/javascript">
jQuery ('#ha-megamenu-mobile-menu').hide().remove();
jQuery('.menu-item-has-children> a').click(function(){
    jQuery(this).attr('href','javascript:;');
    jQuery('+ .sub-menu', this).slideToggle();
});

jQuery('.ha-menu-hamburger i').click(function(){
    jQuery('.fac_wrap').addClass('show');
});
jQuery('.fac_close i').click(function(){
    jQuery('.fac_wrap').removeClass('show');
});
</script>