From f360a68b0d710de6bc46becc679385039fcd4cab Mon Sep 17 00:00:00 2001 From: Pierre Date: Sun, 8 Mar 2020 07:05:18 +0100 Subject: [PATCH] Menu plus propre avec dropdown --- content/mentions_legales.html | 7 +- css/_sq_balint.scss | 98 +++++++++++++++++--------- css/mon_site.css | 129 ++++++++++++++++++++-------------- footer/dist.html | 6 +- inclure/menu_principal.html | 18 +++-- 5 files changed, 166 insertions(+), 92 deletions(-) diff --git a/content/mentions_legales.html b/content/mentions_legales.html index 65795cc..e8a1877 100644 --- a/content/mentions_legales.html +++ b/content/mentions_legales.html @@ -1 +1,6 @@ - +
+
+ +
+
+ diff --git a/css/_sq_balint.scss b/css/_sq_balint.scss index e24cc0f..1d91236 100644 --- a/css/_sq_balint.scss +++ b/css/_sq_balint.scss @@ -132,12 +132,17 @@ body{ padding: 1rem 2rem; background-color: $fond-menu; transition: all 1s; - .nav-link{ + .nav-item:not(.active):hover{ + background: rgba(255,255,255,0.2); + } + .nav-link, .dropdown-item{ color: $light; font-weight: 500; font-family: 'Cabin', sans-serif; font-size: 1.2rem; - transition: all 1s ease; + text-align: center; + padding: 0.3rem 0; + transition: height 1s ease; } .navbar-brand{ width: 200px; @@ -146,7 +151,7 @@ body{ transition: all 1s ease; } } - .active a{ + .active a.nav-link{ color: $page-active; } .navbar-toggler { @@ -157,20 +162,64 @@ body{ color: $light; } &.reduit{ - padding: 0.2rem 2rem; - .nav-link{ - padding: 0.2rem 0.5rem; - } .navbar-brand{ width: 150px; } } + .dropdown-menu{ + background: $fond-menu; + border-radius: 0 0 0.2rem 0.2rem; + border: none; + border-top: solid 1px $light; + } + .dropdown-item:focus, .dropdown-item:hover{ + background: rgba(255,255,255,0.2); + color: white; + } + @include media-breakpoint-up(xl){ + padding: 0 2rem; + height: 5rem; + .container{ + height: 100%; + } + &.reduit{ + height: 3rem; + padding: 0 2rem; + .nav-link{ + padding: 0.2rem 0.5rem; + } + } + .nav-link{ + padding: 0.5rem; + height: 100%; + display: flex; + align-items: center; + } + .dropdown-menu{ + margin-top: 0; + } + } } -#liste-deroulante ul{ - list-style-type: none; +#liste-deroulante{ + ul{ + list-style-type: none; + } + @include media-breakpoint-up(xl){ + height: 100%; + ul{ + height: 100%; + align-items: center; + li{ + height: 100%; + display: flex; + align-items: center; + } + } + } } + /**********************************************************************/ /**************************** PAGE ACCUEIL ****************************/ /**********************************************************************/ @@ -508,21 +557,11 @@ body{ height: auto; } - .lien_cc svg { - width: 30px; - height: 30px; - vertical-align: middle; + .generator img:hover{ + opacity:0.6; } - .nav { padding-left: 0; } - .nav li { display: block; } - .nav li:not(.generator) a { display: block; } - - @include media-breakpoint-up(sm) { - .nav li { display: inline-block !important; } - .nav li:not(.generator) a { display: inline; } - .nav li.separ { border: none; } - //.nav li.separ:not(:first-of-type)::before { content: " | "; } - .generator { /*position: absolute; top: 1rem; right: 0; max-width: 200px;*/ float: right; } + .pages-footer li:hover a{ + color: $dark; } } @@ -535,7 +574,6 @@ body{ a, .grille a{ color: black; } - } /**********************************************************************/ @@ -685,20 +723,16 @@ body{ margin-left: 0; padding: 0.5rem; } - .btn_login{ - background-color: $couleur-liens; - color: #333; - &:hover{ - color: black; - background-color: rgb(255, 153, 0); - } - } } .btn.bouton-login{ background: $couleur-liens; border-radius: 0.2rem; color: #333 !important; + &:hover{ + color: black; + background-color: $page-active; + } } diff --git a/css/mon_site.css b/css/mon_site.css index c2ddbd4..2e4b659 100644 --- a/css/mon_site.css +++ b/css/mon_site.css @@ -12010,13 +12010,19 @@ body { transition: all 1s; } -#menu-principal .nav-link { +#menu-principal .nav-item:not(.active):hover { + background: rgba(255, 255, 255, 0.2); +} + +#menu-principal .nav-link, #menu-principal .dropdown-item { color: #f8f9fa; font-weight: 500; font-family: 'Cabin', sans-serif; font-size: 1.2rem; - -webkit-transition: all 1s ease; - transition: all 1s ease; + text-align: center; + padding: 0.3rem 0; + -webkit-transition: height 1s ease; + transition: height 1s ease; } #menu-principal .navbar-brand { @@ -12030,7 +12036,7 @@ body { transition: all 1s ease; } -#menu-principal .active a { +#menu-principal .active a.nav-link { color: #ffb284; } @@ -12043,22 +12049,72 @@ body { color: #f8f9fa; } -#menu-principal.reduit { - padding: 0.2rem 2rem; -} - -#menu-principal.reduit .nav-link { - padding: 0.2rem 0.5rem; -} - #menu-principal.reduit .navbar-brand { width: 150px; } +#menu-principal .dropdown-menu { + background: #087f52; + border-radius: 0 0 0.2rem 0.2rem; + border: none; + border-top: solid 1px #f8f9fa; +} + +#menu-principal .dropdown-item:focus, #menu-principal .dropdown-item:hover { + background: rgba(255, 255, 255, 0.2); + color: white; +} + +@media (min-width: 1200px) { + #menu-principal { + padding: 0 2rem; + height: 5rem; + } + #menu-principal .container { + height: 100%; + } + #menu-principal.reduit { + height: 3rem; + padding: 0 2rem; + } + #menu-principal.reduit .nav-link { + padding: 0.2rem 0.5rem; + } + #menu-principal .nav-link { + padding: 0.5rem; + height: 100%; + display: -webkit-box; + display: flex; + -webkit-box-align: center; + align-items: center; + } + #menu-principal .dropdown-menu { + margin-top: 0; + } +} + #liste-deroulante ul { list-style-type: none; } +@media (min-width: 1200px) { + #liste-deroulante { + height: 100%; + } + #liste-deroulante ul { + height: 100%; + -webkit-box-align: center; + align-items: center; + } + #liste-deroulante ul li { + height: 100%; + display: -webkit-box; + display: flex; + -webkit-box-align: center; + align-items: center; + } +} + /**********************************************************************/ /**************************** PAGE ACCUEIL ****************************/ /**********************************************************************/ @@ -12443,38 +12499,12 @@ body { height: auto; } -.footer .lien_cc svg { - width: 30px; - height: 30px; - vertical-align: middle; +.footer .generator img:hover { + opacity: 0.6; } -.footer .nav { - padding-left: 0; -} - -.footer .nav li { - display: block; -} - -.footer .nav li:not(.generator) a { - display: block; -} - -@media (min-width: 576px) { - .footer .nav li { - display: inline-block !important; - } - .footer .nav li:not(.generator) a { - display: inline; - } - .footer .nav li.separ { - border: none; - } - .footer .generator { - /*position: absolute; top: 1rem; right: 0; max-width: 200px;*/ - float: right; - } +.footer .pages-footer li:hover a { + color: #595959; } .page_sommaire .footer-options, .page_sommaire #footer-infos { @@ -12653,22 +12683,17 @@ body { padding: 0.5rem; } -.formulaire_spip .boutons .btn_login, .boutons .btn_login { - background-color: #dd7f51; - color: #333; -} - -.formulaire_spip .boutons .btn_login:hover, .boutons .btn_login:hover { - color: black; - background-color: #ff9900; -} - .btn.bouton-login { background: #dd7f51; border-radius: 0.2rem; color: #333 !important; } +.btn.bouton-login:hover { + color: black; + background-color: #ffb284; +} + .formulaire_spip fieldset legend { background: none; } diff --git a/footer/dist.html b/footer/dist.html index 0554681..8a9ea7a 100644 --- a/footer/dist.html +++ b/footer/dist.html @@ -22,7 +22,7 @@
-