quarante-douze/qdouze2-wordpress-theme
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: ajout submenu pages

Browse source 
Fixes #12
This commit is contained in:
Kazhnuz 2023-05-03 11:27:05 +02:00
parent a6ccd90dc9
commit 97c606dd67
6 changed files with 97 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
components/mobile-sidebar.php
View file

@ -1,10 +1,10 @@
<nav id="mobile-sidebar" class="bg-dark fg-light sidebar menu hidden"> <nav id="mobile-sidebar" class="bg-dark fg-light sidebar menu hidden">
<h1 class="align-center text-light">Menu principal</h1> <h1 class="align-center text-light">Menu du site</h1>
<div class="mb-1"> <div class="mb-1">
<?php include(TEMPLATEPATH . '/components/searchform.php'); ?> <?php include(TEMPLATEPATH . '/components/searchform.php'); ?>
</div> </div>
<ul> <ul>
<h2>Pages principal</h2> <h2>Menu principal</h2>
<li> <li>
<a href="<?php echo site_url(); ?>" class="menu-item"> <a href="<?php echo site_url(); ?>" class="menu-item">
<span><i class="fa fa-home" aria-hidden="true"></i> Accueil</span> <span><i class="fa fa-home" aria-hidden="true"></i> Accueil</span>
@ -33,6 +33,16 @@
<?php } <?php }
?> ?>
</ul> </ul>
<ul>
<h2>Pages</h2>
<?php
$listmenu = get_nav_menu_locations();
$menu = wp_get_nav_menu_items($listmenu['top-navbar-2']);
foreach ($menu as $menuElement) {
echo '<li><a href="' . $menuElement->url . '" class="menu-item">'. $menuElement->title . '</a></li>';
}
?>
</ul>
</nav> </nav>
<button id="mobile-button" class="menu-button"><i class="fa fa-navicon" aria-hidden="true"></i> <span class="sr-only">Afficher le menu</span></button> <button id="mobile-button" class="menu-button"><i class="fa fa-navicon" aria-hidden="true"></i> <span class="sr-only">Afficher le menu</span></button>

14
components/navbar-pages.php
View file

@ -8,6 +8,20 @@
<i class="fa fa-home" aria-hidden="true"></i><span class="sr-only">Accueil</span> <i class="fa fa-home" aria-hidden="true"></i><span class="sr-only">Accueil</span>
</a> </a>
</li> </li>
<li>
<a href="#" class="menu-item submenu">
Pages <i class="fa fa-caret-down"></i>
</a>
<ul class="bg-light menu fg-dark">
<?php
$listmenu = get_nav_menu_locations();
$menu = wp_get_nav_menu_items($listmenu['top-navbar-2']);
foreach ($menu as $menuElement) {
echo '<li><a href="' . $menuElement->url . '" class="menu-item">'. $menuElement->title . '</a></li>';
}
?>
</ul>
</li>
<?php <?php
$listmenu = get_nav_menu_locations(); $listmenu = get_nav_menu_locations();
$menu = wp_get_nav_menu_items($listmenu['top-navbar']); $menu = wp_get_nav_menu_items($listmenu['top-navbar']);

2
functions.php
View file

@ -338,7 +338,7 @@ register_taxonomy('roman', 'post',
register_nav_menus( register_nav_menus(
array( array(
'top-navbar' => __( 'Navbar (gauche)' ), 'top-navbar' => __( 'Navbar (gauche)' ),
'top-navbar-2' => __( 'Navbar (droite)' ), 'top-navbar-2' => __( 'Navbar (secondaire)' ),
'link-menu' => __( 'Liste des liens' ), 'link-menu' => __( 'Liste des liens' ),
'footer-pages' => __( 'Pages dans le footer' ), 'footer-pages' => __( 'Pages dans le footer' ),
'social' => __( 'Reseaux sociaux' ), 'social' => __( 'Reseaux sociaux' ),

39
scss/components/_menus.scss
View file

@ -41,7 +41,8 @@
outline-color: $color-font-light; outline-color: $color-font-light;
&:hover, &:hover,
&:active { &:active,
&.submenu:focus {
background-color: transparentize($color-font-light, 0.7); background-color: transparentize($color-font-light, 0.7);
} }
} }
@ -58,7 +59,8 @@
outline-color: $color-font; outline-color: $color-font;
&:hover, &:hover,
&:active { &:active,
&.submenu:focus {
background-color: transparentize($color-font, 0.85); background-color: transparentize($color-font, 0.85);
} }
} }
@ -69,6 +71,12 @@
} }
} }
.submenu .fa-caret-down {
position: relative;
top: 2px;
font-size:0.8em;
}
.toolbar { .toolbar {
flex-direction: row; flex-direction: row;
padding: $lineheight_rel/4; padding: $lineheight_rel/4;
@ -82,6 +90,7 @@
li { li {
text-align: center; text-align: center;
position: relative;
a, a,
span, span,
@ -93,6 +102,32 @@
padding-left: $lineheight_rel/2; padding-left: $lineheight_rel/2;
padding-right: $lineheight_rel/2; padding-right: $lineheight_rel/2;
} }
ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
margin-top: 0rem;
left: 0;
display: none;
padding:0.33rem;
}
&:hover ul,
ul:hover,
&:focus-within ul {
visibility: visible;
opacity: 1;
display: flex;
flex-direction: column;
border-radius: $card-radius;
box-shadow:0px 1px 1px rgba(0,0,0,0.2);
width: max-content;
li {
text-align:left;
}
}
} }
} }

1
scss/custom/_mobile.scss
View file

@ -6,6 +6,7 @@
height:100vh; height:100vh;
transition: left 0.2s; transition: left 0.2s;
padding: 1rem; padding: 1rem;
overflow: scroll;
&.shown { &.shown {
left:0; left:0;
} }

36
style.css
View file

@ -1417,18 +1417,23 @@ ul.card-list, .card > ul {
.menu.fg-light a, .fg-light .menu a { .menu.fg-light a, .fg-light .menu a {
color: #fefefe; color: #fefefe;
outline-color: #fefefe; } outline-color: #fefefe; }
.menu.fg-light a:hover, .menu.fg-light a:active, .fg-light .menu a:hover, .fg-light .menu a:active { .menu.fg-light a:hover, .menu.fg-light a:active, .menu.fg-light a.submenu:focus, .fg-light .menu a:hover, .fg-light .menu a:active, .fg-light .menu a.submenu:focus {
background-color: rgba(254, 254, 254, 0.3); } background-color: rgba(254, 254, 254, 0.3); }
.menu.fg-light input, .fg-light .menu input { .menu.fg-light input, .fg-light .menu input {
outline-color: #fefefe; } outline-color: #fefefe; }
.menu.fg-dark a, .fg-dark .menu a { .menu.fg-dark a, .fg-dark .menu a {
color: #212529; color: #212529;
outline-color: #212529; } outline-color: #212529; }
.menu.fg-dark a:hover, .menu.fg-dark a:active, .fg-dark .menu a:hover, .fg-dark .menu a:active { .menu.fg-dark a:hover, .menu.fg-dark a:active, .menu.fg-dark a.submenu:focus, .fg-dark .menu a:hover, .fg-dark .menu a:active, .fg-dark .menu a.submenu:focus {
background-color: rgba(33, 37, 41, 0.15); } background-color: rgba(33, 37, 41, 0.15); }
.menu.fg-dark input, .fg-dark .menu input { .menu.fg-dark input, .fg-dark .menu input {
outline-color: #212529; } outline-color: #212529; }
.submenu .fa-caret-down {
position: relative;
top: 2px;
font-size: 0.8em; }
.toolbar { .toolbar {
flex-direction: row; flex-direction: row;
padding: 0.4em; } padding: 0.4em; }
@ -1437,7 +1442,8 @@ ul.card-list, .card > ul {
flex-direction: row; flex-direction: row;
flex-grow: 1; } flex-grow: 1; }
.toolbar li { .toolbar li {
text-align: center; } text-align: center;
position: relative; }
.toolbar li a, .toolbar li a,
.toolbar li span, .toolbar li span,
.toolbar li em, .toolbar li em,
@ -1446,6 +1452,27 @@ ul.card-list, .card > ul {
padding: 0.5333333333em; padding: 0.5333333333em;
padding-left: 0.8em; padding-left: 0.8em;
padding-right: 0.8em; } padding-right: 0.8em; }
.toolbar li ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
margin-top: 0rem;
left: 0;
display: none;
padding: 0.33rem; }
.toolbar li:hover ul,
.toolbar li ul:hover, .toolbar li:focus-within ul {
visibility: visible;
opacity: 1;
display: flex;
flex-direction: column;
border-radius: 8px;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
width: max-content; }
.toolbar li:hover ul li,
.toolbar li ul:hover li, .toolbar li:focus-within ul li {
text-align: left; }
.menu-divider, .menu-divider,
.menu ul h1, .menu ul h1,
@ -2525,7 +2552,8 @@ footer {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
transition: left 0.2s; transition: left 0.2s;
padding: 1rem; } padding: 1rem;
overflow: scroll; }
#mobile-sidebar.shown { #mobile-sidebar.shown {
left: 0; } left: 0; }
@media (min-width: 576px) { @media (min-width: 576px) {