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

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

@ -1,5 +1,12 @@
@media screen {
.hide-content {
display: block;
width: 0px;
height:0px;
margin: 0;
padding:0;
overflow:hidden;
}
.custom-logo {
min-width: 11rem;
margin: 1rem;
@ -82,10 +89,66 @@
}
.secondary-navigation {
padding: 1.5rem 0;
ul {
display: inherit;
}
a {
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. */
.menu-toggle,
.main-navigation.toggled ul {
@ -158,6 +221,11 @@
}
@media screen and (min-width: 80em) {
.main-navigation,.secondary-navigation {
.toogle-sidebar-segona .show-mobile,
.toogle-sidebar-segona .hide-not-mobile{
display:none;
}
a {
padding: 0 1rem;
}

67
style.css
View File

@ -777,6 +777,14 @@ textarea {
/* Navigation
--------------------------------------------- */
@media screen {
.hide-content {
display: block;
width: 0px;
height: 0px;
margin: 0;
padding: 0;
overflow: hidden;
}
.custom-logo {
min-width: 11rem;
margin: 1rem;
@ -837,9 +845,63 @@ textarea {
.secondary-navigation {
padding: 1.5rem 0;
}
.secondary-navigation ul {
display: inherit;
}
.secondary-navigation a {
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. */
.menu-toggle,
.main-navigation.toggled ul {
@ -912,6 +974,11 @@ textarea {
}
@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 {
padding: 0 1rem;
}

2
style.css.map
View File

File diff suppressed because one or more lines are too long