replaced mobile menu toogle from js to pure css
This commit is contained in:
parent
345ac82885
commit
cba8d81a46
14
header.php
14
header.php
|
|
@ -60,8 +60,14 @@
|
|||
</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>
|
||||
<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(
|
||||
|
|
@ -70,6 +76,8 @@
|
|||
)
|
||||
);
|
||||
?>
|
||||
</div><!--toogled-menu-->
|
||||
</nav><!--secondary #site-navigation -->
|
||||
</div>
|
||||
|
||||
</div><!--secondary-->
|
||||
</header><!-- #masthead -->
|
||||
|
|
|
|||
|
|
@ -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
67
style.css
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue