xarxaprod
/
oficinasuport-wp-theme
3
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

replaced mobile menu toogle from js to pure css

This commit is contained in:
jorge 2022-12-02 18:56:11 +01:00
parent 345ac82885
commit cba8d81a46
4 changed files with 157 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
header.php
View File

@ -60,16 +60,24 @@
</div> </div>
<div class="secondary"> <div class="secondary">
<?php the_header_image_tag(); ?> <?php the_header_image_tag(); ?>
<nav id="site-navigation-secondary" class="site-navigation secondary-navigation"> <nav id="site-navigation-secondary" class="site-navigation secondary-navigation toogle-secondary-navigation">
<button class="menu-toggle" aria-controls="secondary-menu" aria-expanded="false"><?php esc_html_e( 'Secondary Menu', 'ofisuport' ); ?></button> <legend class="hide-content">menu</legend>
<?php <input id="hide-menu-mobile" class="hide-not-mobile toogle" name="toogle" type="radio">
wp_nav_menu( <label for="show-menu-mobile" class="toogle-show"><span class="hide-content">open</span></label>
array( <input id="show-menu-mobile" class="hide-not-mobile toogle" name="toogle" type="radio">
'theme_location' => 'menu-2', <div class="toogled-menu">
'menu_id' => 'secondary-menu', <label for="hide-menu-mobile" class="toogle-hide"><span class="hide-content">close</span></label>
) <?php // here content to hide or show ?>
); <?php
?> wp_nav_menu(
</nav><!--secondary #site-navigation --> array(
</div> 'theme_location' => 'menu-2',
'menu_id' => 'secondary-menu',
)
);
?>
</div><!--toogled-menu-->
</nav><!--secondary #site-navigation -->
</div><!--secondary-->
</header><!-- #masthead --> </header><!-- #masthead -->

70
sass/components/navigation/_navigation.scss
View File

@ -1,5 +1,12 @@
@media screen { @media screen {
.hide-content {
display: block;
width: 0px;
height:0px;
margin: 0;
padding:0;
overflow:hidden;
}
.custom-logo { .custom-logo {
min-width: 11rem; min-width: 11rem;
margin: 1rem; margin: 1rem;
@ -82,10 +89,66 @@
} }
.secondary-navigation { .secondary-navigation {
padding: 1.5rem 0; padding: 1.5rem 0;
ul {
display: inherit;
}
a { a {
text-transform: uppercase; text-transform: uppercase;
} }
} }
/* begin of menu-hidden */
.toogle-secondary-navigation .show-mobile{
display:inherit;
}
.toogle,
.toogled-menu {
display: none;
}
.toogle:checked+.toogled-menu{
display: block;
position: absolute;
left:0;
top:0;
width: 100%;
height: 100%;
margin-top: 0;
padding-top: 3em;
background-color: rgba(250,250,250,0.9);
}
.toogle-show {
position: relative;
display: inline-block;
width: 1.8em;
height: 1.4em;
margin-right: 0.3em;
border-top: 0.3em solid #000;
border-bottom: 0.3em solid #000;
}
.toogle-show::before {
content: "";
position: absolute;
top: 0.3em;
left: 0;
width: 100%;
border-top: 0.3em solid #000;
}
.toogle-hide::after{
content: "x";
display: block;
position:absolute;
top:0;
left:50%;
width: 1.8em;
height: 1.4em;
//margin-top: -1.4em;
padding: 0.2em;
font-size: 2rem;
font-weight: bold;
background-color: $color__white;
color: $color__black;
}
/* end of menu hidden*/
/* Small menu. */ /* Small menu. */
.menu-toggle, .menu-toggle,
.main-navigation.toggled ul { .main-navigation.toggled ul {
@ -158,6 +221,11 @@
} }
@media screen and (min-width: 80em) { @media screen and (min-width: 80em) {
.main-navigation,.secondary-navigation { .main-navigation,.secondary-navigation {
.toogle-sidebar-segona .show-mobile,
.toogle-sidebar-segona .hide-not-mobile{
display:none;
}
a { a {
padding: 0 1rem; padding: 0 1rem;
} }

67
style.css
View File

@ -777,6 +777,14 @@ textarea {
/* Navigation /* Navigation
--------------------------------------------- */ --------------------------------------------- */
@media screen { @media screen {
.hide-content {
display: block;
width: 0px;
height: 0px;
margin: 0;
padding: 0;
overflow: hidden;
}
.custom-logo { .custom-logo {
min-width: 11rem; min-width: 11rem;
margin: 1rem; margin: 1rem;
@ -837,9 +845,63 @@ textarea {
.secondary-navigation { .secondary-navigation {
padding: 1.5rem 0; padding: 1.5rem 0;
} }
.secondary-navigation ul {
display: inherit;
}
.secondary-navigation a { .secondary-navigation a {
text-transform: uppercase; text-transform: uppercase;
} }
/* begin of menu-hidden */
.toogle-secondary-navigation .show-mobile {
display: inherit;
}
.toogle,
.toogled-menu {
display: none;
}
.toogle:checked + .toogled-menu {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
margin-top: 0;
padding-top: 3em;
background-color: rgba(250, 250, 250, 0.9);
}
.toogle-show {
position: relative;
display: inline-block;
width: 1.8em;
height: 1.4em;
margin-right: 0.3em;
border-top: 0.3em solid #000;
border-bottom: 0.3em solid #000;
}
.toogle-show::before {
content: "";
position: absolute;
top: 0.3em;
left: 0;
width: 100%;
border-top: 0.3em solid #000;
}
.toogle-hide::after {
content: "x";
display: block;
position: absolute;
top: 0;
left: 50%;
width: 1.8em;
height: 1.4em;
padding: 0.2em;
font-size: 2rem;
font-weight: bold;
background-color: #fff;
color: #000;
}
/* end of menu hidden*/
/* Small menu. */ /* Small menu. */
.menu-toggle, .menu-toggle,
.main-navigation.toggled ul { .main-navigation.toggled ul {
@ -912,6 +974,11 @@ textarea {
} }
@media screen and (min-width: 80em) { @media screen and (min-width: 80em) {
.main-navigation .toogle-sidebar-segona .show-mobile,
.main-navigation .toogle-sidebar-segona .hide-not-mobile, .secondary-navigation .toogle-sidebar-segona .show-mobile,
.secondary-navigation .toogle-sidebar-segona .hide-not-mobile {
display: none;
}
.main-navigation a, .secondary-navigation a { .main-navigation a, .secondary-navigation a {
padding: 0 1rem; padding: 0 1rem;
} }

2
style.css.map
View File

File diff suppressed because one or more lines are too long