Menu plus propre avec dropdown
This commit is contained in:
parent
43b39a61fb
commit
f360a68b0d
5 changed files with 166 additions and 92 deletions
|
|
@ -1 +1,6 @@
|
|||
<section class="container section-top section-bottom">
|
||||
<div class="cadre-blanc">
|
||||
<INCLURE{fond=inclure/mentions_legales}>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -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,19 +162,63 @@ 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{
|
||||
#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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
129
css/mon_site.css
129
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
<div class="footer-options">
|
||||
<div class="container bordure-top">
|
||||
<div class="grille">
|
||||
<ul class="nav">
|
||||
<ul class="nav pages-footer">
|
||||
<li class="separ">
|
||||
<a rel="contents" href="#URL_PAGE{plan}">
|
||||
<i class="fas fa-map"></i> <:plan_site:>
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
<ul class="nav boutons-footer">
|
||||
<li class="separ">
|
||||
<a class="btn bouton-footer" href="[(#URL_PAGE{modifier_auteur}|parametre_url{retour,#SELF})]" title="Gérer mon compte">
|
||||
<i class="fas fa-cog" aria-hidden="true"></i> #SESSION{nom}
|
||||
<i class="fas fa-user" aria-hidden="true"></i> #SESSION{nom}
|
||||
</a>
|
||||
</li>
|
||||
<li class="separ">
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
</li>
|
||||
<li class="separ">
|
||||
<a class="btn bouton-footer" href="[(#URL_PAGE{gerer_auteurs})]" title="Gérer les membres">
|
||||
<i class="fas fa-user"></i> Gérer les membres
|
||||
<i class="fas fa-users"></i> Gérer les membres
|
||||
</a>
|
||||
</li>
|
||||
<?php
|
||||
|
|
|
|||
|
|
@ -18,11 +18,21 @@
|
|||
<li class="nav-item [(#SI_PAGE{seminaires}|oui) active]">
|
||||
<a class="nav-link" href="[(#URL_PAGE{seminaires})]">Les séminaires</a>
|
||||
</li>
|
||||
<li class="nav-item [(#SI_PAGE{groupes}|oui) active]">
|
||||
<a class="nav-link" href="[(#URL_PAGE{groupes})]">Les groupes</a>
|
||||
<li class="nav-item dropdown [(#SI_PAGE{groupes}|oui) active]">
|
||||
<a class="nav-link dropdown-toggle" href="[(#URL_PAGE{groupes})]" id="groupesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Les groupes</a>
|
||||
<div class="dropdown-menu" aria-labelledby="groupesDropdown">
|
||||
<BOUCLE_menu_groupes(RUBRIQUES){id_parent = #CONFIG{balint/id_rub_groupes}}{tout}>
|
||||
<a class="dropdown-item" href="[(#URL_PAGE{groupes}|parametre_url{id_rubrique,#ID_RUBRIQUE})]">#TITRE</a>
|
||||
</BOUCLE_menu_groupes>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item [(#SI_PAGE{mediatheque}|oui) active]">
|
||||
<a class="nav-link" href="[(#URL_PAGE{mediatheque})]">Médiathèque</a>
|
||||
<li class="nav-item dropdown [(#SI_PAGE{mediatheque}|oui) active]">
|
||||
<a class="nav-link dropdown-toggle" href="[(#URL_PAGE{mediatheque})]" id="mediasDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Médiathèque</a>
|
||||
<div class="dropdown-menu" aria-labelledby="mediasDropdown">
|
||||
<BOUCLE_menu_medias(MOTS){id_groupe = #CONFIG{balint/id_mots_medias}}{par id_mot}{tout}>
|
||||
<a class="dropdown-item" href="[(#URL_PAGE{mediatheque}|parametre_url{id_mot,#ID_MOT})]">#TITRE</a>
|
||||
</BOUCLE_menu_medias>
|
||||
</div>
|
||||
</li>
|
||||
<?php
|
||||
if (isset($GLOBALS['visiteur_session']['id_auteur']) AND $GLOBALS['visiteur_session']['id_auteur']) {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue