baz_april/squelettes/scss/styles/_nav.scss

// ------------------------------------------
// Sous-navigation et autres menus
// ------------------------------------------ 

// Habillage general des menus de nav 
.menu { 
	clear: both; 
	margin-bottom: 1.5em; 
	text-align: left; 
	p {}
	ul { 
		margin-bottom: 1.5em;
	}
	ul li {}
	ul li ul { 
		margin-left: 1.5em; 
		list-style: circle;
	}
}

.nav { 
	ul {
		margin:0; 
		padding:0;
	}
	li {
		display:inline;
		line-height:1.2;
	}
	a {
		display: inline-block; 
		padding:0.3em 0 0.2em; 
		margin:0 0.5em 0.4em; 
		text-decoration: none; 
		line-height:1.4; 
		border-bottom:3px solid white;
		.header_initiatives & {
			font-weight:400;
			padding:0.5em;
			margin:0.1rem 0.4rem;
			color:white;
			border:0;
			@include media($bp-medium) {
				padding:0.8rem;
			}
		}
		.on &,
		&.on,
		&:focus,
		&:hover,
		&:active { 
			border-color:$couleurSecondaire;
			.header_initiatives & {
				border-color:$couleurPrincipaleOn;
			}
		}
	}
	
	.pagination { margin:0 0 1rem; }
}
.menucache {
	display: none;
	position: fixed;
	left: 0;
	top: 0px;
	width: 100%;
	height: 100%;
	background:transparent;
	z-index:8;
	cursor:pointer;
	&.cache { display:block;}
}
// menu smart cf js/script.js
// ---------------------------------------- 
.btn-nav {
	position:absolute;
	z-index:10;
	right:$spacer;
	top:0;
	padding:0.4rem;
	border:none;
	background:$couleurPrincipale;
	color:white;
	font-size:0.9em;
	outline:none !important;
	display:none;
	@media ($bp-medium) {
		display:block;
	}
	&.actif {
		color:$couleurPrincipaleDowner;
	}
}

/* header = nav-principale */
.page_header > .page_container {
	 .nav {
		padding-top:($spacer/2);
		font-size:0.95rem;
		@include media($bp-medium-up) {
			position:relative;
		}
		> ul { 
			text-align:right;
			@include vendor-prefix(transition,all 0.3s ease-in-out);
			@media ($bp-medium) {
				position:absolute;
				background:$couleurPrincipale;
				width:100%;
				top:36px;
				left:-100%;
				padding:$spacer/2 $spacer;
				text-align:center;
				z-index:10;
				&.ouvert{
					left:0;
				}
				a {
					color:white;
					border:0;
					display:block;
					margin:0;
					padding:0.5rem;
					&:hover, &:focus, &.on {
						background:$couleurSecondaire;
					}
				}
				li { 
					display:block;
				}
				.loupe {
					.fas {
						color:white;
					}
					.formulaire_recherche.vu {
						right:50%;
						margin-right:-160px;
						max-width:320px;
						form {
							padding:0.5rem;
							&:before {
								display:none;
							}
						}
					}
				}
			}
			
			.loupe {
				position:relative;
				display:inline-block !important;
/* 					width:           em(26px); */
/* 					height:          em(26px); */
				span {
					@include visuallyhidden;
				}
				a {
					display:inline;
					padding:0;
					border:0;
					background:none;
					&:hover i.fa-search, &:focus i.fa-search {
						background-color:$couleurSecondaire;
					}
				}
				i.fa-search {
					font-size:1rem;
					border-radius: 20px;
					background-color: $couleurPrincipale;
					padding:7px;
					color:white;
				}
				.formulaire_recherche {
					position:absolute;
					height:auto;
					width:em(350px);
					max-width:em(350px);
					top:-1000px;
					left:auto;
					right:0;
					border-radius: $spacer/2;
					z-index:2;
					@include vendor-prefix(transition,all 0.3s ease-in-out);
					form:before {
						left:0.5rem;
					}
					#recherche {
						width:100%;
					}
					&.vu {
						top:1rem;
					}
				}
			}
		}
		a { 
			font-weight:700;
		}
	}
}

// aside
// ------------------------------------ 
.page_aside {
	.nav { 
		padding:0;
		li {
			display:block;
		}
		a { 
			width:100%;
		}
		& .blog {
			a { 
				line-height:1; 
				padding:1em; 
				font-weight:700;
				p { 
					font-weight:400; 
					margin:0; 
					&.date { 
						font-size:90%; 
						margin:0 0 0.3em;
					}
					&.introduction { 
						font-size:0.8em;
						margin-top:0.5em;
					}
				}
/* 				&:hover, &:focus, &:active, &.on { background:darken($grayLighter,10); color:$couleurPrincipaleDowner; } */
			}
		}
	}
}



// initiatives
.header_initiatives { 
	position:absolute; 
	top:0; 
	left:0; 
	right:0;
	background-color:$couleurPrincipale;
	color:white;
	z-index:9;
	.btn-initiatives {
		font-size:0.8rem;
		display:none;
		padding:0.5rem;
		margin-left:-$spacer;
		background:$couleurPrincipale;
		color:white;
		@media ($bp-medium) {
			display:block;
		}
	}
	.nav {
		font-size:0.8rem;
		background:$couleurPrincipale;
		@media ($bp-medium) {
			position:absolute;
			width:100%;
			top:36px;
			left:-100%;
			@include vendor-prefix(transition,all 0.3s ease-in-out);
			&.ouvert {
				left:0;
			}
			ul, .initiatives {
				display:inline;
			}
			li {
				margin:0;
			}
		}
		.menu-liste .menu-liste {
			li, a {
				margin:0;
			}
		}
	}
	.initiatives {
		font-size:0.8rem;
	}
	.titre_initiatives {
		float:right;
		padding:0.5em;
		@media ($bp-medium) {
			display:none;
		}
	}
	 .initiatives_april {
		float:right;
	}
	// un sous-menu dans initiatives :  .menu-entree.sousinitiatives > .menu-items__lien.sousinitiatives
	.menu-entree.sousinitiatives {
		position:relative;
		> ul {
			@include media($bp-medium-up) {
				position:absolute;
				top:-999em;
				left:0;
				width:150px;
				&.ouvert {
					top:23px;
					li {
						display:block;
						background:$couleurPrincipale;
						a {
							display:block;
						}
					}
				}
			}
		}
		@include media($bp-medium) {
			.menu-items__lien.sousinitiatives {
				display:none;
			}
		}
	}
}