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">
<h1 class="align-center text-light">Menu principal</h1>
<h1 class="align-center text-light">Menu du site</h1>
<div class="mb-1">
<?php include(TEMPLATEPATH . '/components/searchform.php'); ?>
</div>
<ul>
<h2>Pages principal</h2>
<h2>Menu principal</h2>
<li>
<a href="<?php echo site_url(); ?>" class="menu-item">
<span><i class="fa fa-home" aria-hidden="true"></i> Accueil</span>
@ -33,6 +33,16 @@
<?php }
?>
</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>
<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>
</a>
</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
$listmenu = get_nav_menu_locations();
$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(
array(
'top-navbar' => __( 'Navbar (gauche)' ),
'top-navbar-2' => __( 'Navbar (droite)' ),
'top-navbar-2' => __( 'Navbar (secondaire)' ),
'link-menu' => __( 'Liste des liens' ),
'footer-pages' => __( 'Pages dans le footer' ),
'social' => __( 'Reseaux sociaux' ),

39
scss/components/_menus.scss
View file

@ -41,7 +41,8 @@
outline-color: $color-font-light;
&:hover,
&:active {
&:active,
&.submenu:focus {
background-color: transparentize($color-font-light, 0.7);
}
}
@ -58,7 +59,8 @@
outline-color: $color-font;
&:hover,
&:active {
&:active,
&.submenu:focus {
background-color: transparentize($color-font, 0.85);
}
}
@ -69,6 +71,12 @@
}
}
.submenu .fa-caret-down {
position: relative;
top: 2px;
font-size:0.8em;
}
.toolbar {
flex-direction: row;
padding: $lineheight_rel/4;
@ -82,6 +90,7 @@
li {
text-align: center;
position: relative;
a,
span,
@ -93,6 +102,32 @@
padding-left: $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;
transition: left 0.2s;
padding: 1rem;
overflow: scroll;
&.shown {
left:0;
}

36
style.css
View file

@ -1417,18 +1417,23 @@ ul.card-list, .card > ul {
.menu.fg-light a, .fg-light .menu a {
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); }
.menu.fg-light input, .fg-light .menu input {
outline-color: #fefefe; }
.menu.fg-dark a, .fg-dark .menu a {
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); }
.menu.fg-dark input, .fg-dark .menu input {
outline-color: #212529; }
.submenu .fa-caret-down {
position: relative;
top: 2px;
font-size: 0.8em; }
.toolbar {
flex-direction: row;
padding: 0.4em; }
@ -1437,7 +1442,8 @@ ul.card-list, .card > ul {
flex-direction: row;
flex-grow: 1; }
.toolbar li {
text-align: center; }
text-align: center;
position: relative; }
.toolbar li a,
.toolbar li span,
.toolbar li em,
@ -1446,6 +1452,27 @@ ul.card-list, .card > ul {
padding: 0.5333333333em;
padding-left: 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 ul h1,
@ -2525,7 +2552,8 @@ footer {
width: 100vw;
height: 100vh;
transition: left 0.2s;
padding: 1rem; }
padding: 1rem;
overflow: scroll; }
#mobile-sidebar.shown {
left: 0; }
@media (min-width: 576px) {