sousnav des articles masquée ou pas au choix dans la config + styles en conséquence

article.html

@@ -28,11 +28,13 @@
 			<div id="main">
 				<section class="post">
 					
-					<BOUCLE_articles(ARTICLES){id_rubrique}{1,2}> </BOUCLE_articles>
-					<a href="#sousnav" id="sousnavToggle">Articles</a>
-					<div id="sousnav">
-						<INCLURE{fond=inclure/sousnav,env,ajax,id_rubrique} />
-					</div>
+					<BOUCLE_articles(ARTICLES){id_rubrique}{1,2}> </BOUCLE_articles>[(#CONFIG{html5up/sousnavmasquee}|=={on}|oui)
+					<a href="#sousnavmasquee" id="sousnavmasqueeToggle">Articles</a>
+					<div id="sousnavmasquee">
+						<INCLURE{fond=inclure/sousnav,env,ajax,id_rubrique,id_article,masquee=oui} />
+					</div>][(#CONFIG{html5up/sousnavmasquee}|=={on}|non)<div id="sousnav">
+						<INCLURE{fond=inclure/sousnav,env,ajax,id_rubrique,id_article} />
+					</div>]
 					</B_articles>
 					
 					<header class="major">

css/spip.css

@@ -14,8 +14,10 @@ img { height: auto; }
 #intro + #header .logo { opacity:0 !important; display:none; }
 #intro.hidden + #header .logo { opacity:1 !important; display:block; }
 
-
-/* on veut ajaxer la liste/articles donc on prend en compte une div de + dans les styles */
+#main > .post {
+    padding-top:4rem;
+}
+/* on veut ajaxer la liste/articles donc on prend en compte une div de + dans les styles "> div " */
 #main > * {
 
     padding:0;
@@ -31,63 +33,63 @@ img { height: auto; }
 
 }
 #main > div > #pagination_articles { padding:0; border:0; }
-		#main > div > .posts {
-			display: -moz-flex;
-			display: -webkit-flex;
-			display: -ms-flex;
-			display: flex;
-			-moz-flex-wrap: wrap;
-			-webkit-flex-wrap: wrap;
-			-ms-flex-wrap: wrap;
-			flex-wrap: wrap;
-			-moz-align-items: -moz-stretch;
-			-webkit-align-items: -webkit-stretch;
-			-ms-align-items: -ms-stretch;
-			align-items: stretch;
-			text-align: center;
-			width: 100%;
-			padding: 0;
-		}
-
-			#main > div > .posts > * {
-				-moz-flex-shrink: 1;
-				-webkit-flex-shrink: 1;
-				-ms-flex-shrink: 1;
-				flex-shrink: 1;
-				-moz-flex-grow: 0;
-				-webkit-flex-grow: 0;
-				-ms-flex-grow: 0;
-				flex-grow: 0;
-			}
-
-			#main > div > .posts > * {
-				width: 50%;
-			}
-
-			#main > div > .posts > * {
-				padding: 4rem;
-				width: 50%;
-			}
-
-			#main > div > .posts > article {
-				border-color: #eeeeee;
-				border-left-width: 2px;
-				border-style: solid;
-				border-top-width: 2px;
-				text-align: center;
-			}
-
-				#main > div > .posts > article > :last-child {
-					margin-bottom: 0;
-				}
-
-				#main > div > .posts > article:nth-child(2n - 1) {
-					border-left-width: 0;
-				}
-
-				#main > div > .posts > article:nth-child(-n + 2) {
-					border-top-width: 0;
-				}
+#main > div > .posts {
+	display: -moz-flex;
+	display: -webkit-flex;
+	display: -ms-flex;
+	display: flex;
+	-moz-flex-wrap: wrap;
+	-webkit-flex-wrap: wrap;
+	-ms-flex-wrap: wrap;
+	flex-wrap: wrap;
+	-moz-align-items: -moz-stretch;
+	-webkit-align-items: -webkit-stretch;
+	-ms-align-items: -ms-stretch;
+	align-items: stretch;
+	text-align: center;
+	width: 100%;
+	padding: 0;
+}
+
+#main > div > .posts > * {
+	-moz-flex-shrink: 1;
+	-webkit-flex-shrink: 1;
+	-ms-flex-shrink: 1;
+	flex-shrink: 1;
+	-moz-flex-grow: 0;
+	-webkit-flex-grow: 0;
+	-ms-flex-grow: 0;
+	flex-grow: 0;
+}
+
+#main > div > .posts > * {
+	width: 50%;
+}
+
+#main > div > .posts > * {
+	padding: 4rem;
+	width: 50%;
+}
+
+#main > div > .posts > article {
+	border-color: #eeeeee;
+	border-left-width: 2px;
+	border-style: solid;
+	border-top-width: 2px;
+	text-align: center;
+}
+
+#main > div > .posts > article > :last-child {
+	margin-bottom: 0;
+}
+
+#main > div > .posts > article:nth-child(2n - 1) {
+	border-left-width: 0;
+}
+
+#main > div > .posts > article:nth-child(-n + 2) {
+	border-top-width: 0;
+}
 
 .introduction { margin: 0 0 2rem 0; }
 
@@ -100,17 +102,23 @@ img { height: auto; }
 .pagination > span strong { display:inline-block; padding: 0 1.75rem; border:2px solid #eeeeee; height:3rem; color:#ddd; }
 
 
-#sousnavToggle { position:absolute; top:1em; right:2em; }
-#sousnavToggle:before { 
+#sousnavmasqueeToggle { position:absolute; top:1em; right:2em; }
+#sousnavmasqueeToggle:before { 
 	content: '\f0c9';
 	margin-right: 0.5rem; 
 	-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;
 	font-family: FontAwesome; font-style: normal; font-weight: normal; text-transform: none !important;
 }
-#sousnav { overflow:hidden; position:relative; }
-#sousnav nav { margin-bottom:5em; margin-top:0; transition:margin 0.5s ease; }
-
-
+#sousnavmasquee { overflow:hidden; position:relative; }
+#sousnavmasquee nav { margin-bottom:5em; margin-top:0; transition:margin 0.5s ease; }
+#sousnavmasquee nav ul li a { display:inline-block; padding:0.4rem; border-bottom:0; }
+
+#sousnav { margin-top:-3rem; margin-bottom:3rem; }
+#sousnav nav ul { padding:0; margin:0; list-style:none; }
+#sousnav nav ul:after { display:block; content:''; width:100%; clear:both; }
+#sousnav nav ul li { float:left; padding:0; }
+#sousnav nav ul li a { display:inline-block; padding:0.8rem 1.2rem; border-bottom:1px solid; }
+#sousnav nav ul li a.active {  }
 
 
 /* footer */

formulaires/configurer_html5up.html

@@ -57,6 +57,14 @@
 			</div>
 		</fieldset>
 		<fieldset>
+		<legend><:html5up:menu:></legend>
+			<div class="editer-groupe">
+				[(#SAISIE{case, sousnavmasquee, 
+					label=<:massively:sousnavmasquee:>,
+					explication=<:massively:sousnavmasquee_explications:>})]
+			</div>
+		</fieldset>
+		<fieldset>
 		<legend><:zcore:accueil:></legend>
 			<div class="editer-groupe">
 				[(#SAISIE{input, titre_sommaire, 

inclure/sousnav.html

@@ -1,8 +1,8 @@
 <B_sousnav>
-<nav class="fermer">
+<nav class="[(#ENV{masquee}|=={oui}|oui)fermer][(#ENV{masquee}|=={oui}|non)onglets]">
 	<ul>
 	<BOUCLE_sousnav(ARTICLES){id_rubrique}{par num titre}{!par date}>
-		<li><a href="#URL_ARTICLE">#TITRE</a></li>
+		<li><a href="#URL_ARTICLE"[(#EXPOSE|oui) class="active"]>#TITRE</a></li>
 	</BOUCLE_sousnav>
 	</ul>
 </nav>

js/sousnav.js

@@ -1,12 +1,12 @@
 jQuery(function($){
 
 	// le menu des articles
-	var h = $('#sousnav').height();
-	$('body').prepend('<style>#sousnav nav.fermer { margin-top:-' + h + 'px; }</style>');
+	var h = $('#sousnavmasquee').height();
+	$('body').prepend('<style>#sousnavmasquee nav.fermer { margin-top:-' + h + 'px; }</style>');
 	// afficher/masquer le menu
-	$('#sousnavToggle').on('click', function(){
+	$('#sousnavmasqueeToggle').on('click', function(){
 		$(this).toggleClass('active');
-		$('#sousnav nav').toggleClass('fermer');
+		$('#sousnavmasquee nav').toggleClass('fermer');
 		return false;
 	});
 	

paquet.xml

@@ -1,7 +1,7 @@
 <paquet
 	prefix="html5up_massively"
 	categorie="squelette"
-	version="0.4.2"
+	version="0.4.3"
 	schema="0.1.3" 
 	etat="test"
 	compatibilite="[3.2.0;3.2.*]"

styles_config.css.html

@@ -23,7 +23,8 @@ a:hover, a:active, a:focus, a.on, .formulaire_contact form > fieldset.previsu >
 button:hover, .button:hover, #footer input[type="submit"]:hover, #footer input[type="reset"]:hover, 
 #footer input[type="button"]:hover, #footer button:hover, #footer .button:hover, #footer a:hover, .pagination a:hover,
 #footer ul.icons li a.icon:hover:before, #nav ul.icons li a.icon:hover:before, #nav a:hover, #header .logo:hover,
-#copyright a:hover, ul.icons li a.icon:hover::before, .reponse_formulaire_erreur, .erreur_message {[ color:(#CONFIG{html5up/couleur_accent}) !important; ]}
+#copyright a:hover, ul.icons li a.icon:hover::before, .reponse_formulaire_erreur, .erreur_message#nav ul.links li a:hover,
+#nav .icons a,  #nav ul.links li.active a, #sousnav nav ul li a.active {[ color:(#CONFIG{html5up/couleur_accent}) !important; ]}
 
 /* box-shadow */
 #intro input[type="submit"]:hover, #intro input[type="reset"]:hover, #intro input[type="button"]:hover, #intro button:hover, #intro .button:hover,