diff --git a/components/mobile-sidebar.php b/components/mobile-sidebar.php
index 1ba316e..e3f9bd9 100644
--- a/components/mobile-sidebar.php
+++ b/components/mobile-sidebar.php
@@ -1,10 +1,10 @@
\ No newline at end of file
diff --git a/components/navbar-pages.php b/components/navbar-pages.php
index c5741b4..200ef87 100644
--- a/components/navbar-pages.php
+++ b/components/navbar-pages.php
@@ -8,6 +8,20 @@
Accueil
+
+
+ ';
+ }
+ ?>
+
+
__( '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' ),
diff --git a/scss/components/_menus.scss b/scss/components/_menus.scss
index d7c969e..21ef078 100644
--- a/scss/components/_menus.scss
+++ b/scss/components/_menus.scss
@@ -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;
+ }
+ }
}
}
diff --git a/scss/custom/_mobile.scss b/scss/custom/_mobile.scss
index 552d046..8fd36dd 100644
--- a/scss/custom/_mobile.scss
+++ b/scss/custom/_mobile.scss
@@ -6,6 +6,7 @@
height:100vh;
transition: left 0.2s;
padding: 1rem;
+ overflow: scroll;
&.shown {
left:0;
}
diff --git a/style.css b/style.css
index fecbfd2..1fa367d 100644
--- a/style.css
+++ b/style.css
@@ -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) {