Skip to content

Instantly share code, notes, and snippets.

@Ezekiel1349

Ezekiel1349/fac_menulateral.php

Last active March 8, 2023 08:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Ezekiel1349/87706add08f878468a0694350ccb55cb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Ezekiel1349/87706add08f878468a0694350ccb55cb to your computer and use it in GitHub Desktop.
Download ZIP
Menú Lateral Fotoacces
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment