un menu pour les articles dans la page article seulement si plusieurs dans la rubrique

+ mécanisme masquer/montrer

.gitattributes

@@ -45,11 +45,13 @@ inclure/liste/articles.html -text
 inclure/nav.html -text
 inclure/resume/article.html -text
 inclure/rezo.html -text
+inclure/sousnav.html -text
 js/breakpoints.min.js -text
 js/browser.min.js -text
 js/jquery.scrollex.min.js -text
 js/jquery.scrolly.min.js -text
 js/main.js -text
+js/sousnav.js -text
 js/util.js -text
 lang/html5up_de.php -text
 lang/html5up_en.php -text

article.html

@@ -27,6 +27,14 @@
 			<!-- Main -->
 			<div id="main">
 				<section class="post">
+					
+					<BOUCLE_articles(ARTICLES){id_rubrique}{1,2}> </BOUCLE_articles>
+					<a href="#sousnav" id="sousnavToggle" class="btn_sousnav">Articles</a>
+					<div id="sousnav">
+						<INCLURE{fond=inclure/sousnav,env,ajax,id_rubrique} />
+					</div>
+					</B_articles>
+					
 					<header class="major">
 						[<p class="surtitre #EDIT{surtitre}">(#SURTITRE)</p>]
 						[<h1 class="#EDIT{titre}">(#TITRE)</h1>]

css/spip.css

@@ -5,7 +5,7 @@ input[type="submit"], input[type="reset"],
 input[type="button"], button, .button, 
 label, table th, .pagination a, .pagination span, 
 #header .logo, #nav ul.links, #copyright, 
-#navPanelToggle, #navPanel .links li a { font-family: "Open Sans", Helvetica, sans-serif; }
+#navPanelToggle, #sousnavToggle, #navPanel .links li a { font-family: "Open Sans", Helvetica, sans-serif; }
 
 
 html, body { height:100%; }
@@ -97,18 +97,21 @@ img { height: auto; }
 /* pagination */
 
 .pagination > strong { display:inline-block; border:2px solid #eeeeee; min-width:3rem; text-align:center; margin-left:-2px; background-color: #eeeeee;
-	font-family: "Source Sans Pro", Helvetica, sans-serif; font-size: 0.8rem; font-weight: 900; line-height:calc(3rem - 4px); }
+	font-family: "Open Sans", Helvetica, sans-serif; font-size: 0.8rem; font-weight: 900; line-height:calc(3rem - 4px); }
 .pagination > span.next, .pagination > span.prev { border:0; padding:0; margin-left:-2px; }
 .pagination > span.next a, .pagination > span.prev a { margin:0; }
 .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 { 
+	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; }
 
 
 

inclure/head.html

@@ -15,8 +15,9 @@
 	
 	#INSERT_HEAD
 	
+	[<script src="(#CHEMIN{js/sousnav.js})" type="text/javascript"></script>]
 	[(#REM) Vos scripts ]
-	[<script src="(#CHEMIN{javascript/perso.js})" type="text/javascript"></script>]
+	[<script src="(#CHEMIN{js/perso.js})" type="text/javascript"></script>]
 
 	[(#REM) Fierement fabrique avec SPIP ]
 	<meta name="generator" content="SPIP[ (#SPIP_VERSION)]" />

inclure/sousnav.html

@@ -0,0 +1,9 @@
+<B_sousnav>
+<nav class="fermer">
+	<ul>
+	<BOUCLE_sousnav(ARTICLES){id_rubrique}{par num titre}{!par date}>
+		<li><a href="#URL_ARTICLE">#TITRE</a></li>
+	</BOUCLE_sousnav>
+	</ul>
+</nav>
+</B_sousnav>

js/sousnav.js

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

paquet.xml

@@ -1,7 +1,7 @@
 <paquet
 	prefix="html5up_massively"
 	categorie="squelette"
-	version="0.1.2"
+	version="0.2.0"
 	schema="0.1.2" 
 	etat="dev"
 	compatibilite="[3.2.0;3.2.*]"