Ver Fonte

Menu ok

olivier.massot há 7 anos atrás
pai
commit
8da03dd143
2 ficheiros alterados com 87 adições e 2 exclusões
  1. 70 1
      MobiParc/assets/js/main.js
  2. 17 1
      MobiParc/index.html

+ 70 - 1
MobiParc/assets/js/main.js

@@ -210,6 +210,7 @@ load();
 
 // Recharge dynamiquement le contenu HTML à chaque changement d'url
 $(window).on('hashchange', function () {
+    if (window.location.hash == "#menu") { return; }
     load();
 });
 
@@ -501,4 +502,72 @@ var formToJSON = function formToJSON(elements) {
 
         return data;
     }, {});
-};
+};
+
+
+
+/*
+	Intensify by TEMPLATED
+	templated.co @templatedco
+	Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
+*/
+
+(function ($) {
+
+    skel.breakpoints({
+        xlarge: '(max-width: 1680px)',
+        large: '(max-width: 1280px)',
+        medium: '(max-width: 980px)',
+        small: '(max-width: 736px)',
+        xsmall: '(max-width: 480px)'
+    });
+
+    $(function () {
+
+        var $window = $(window),
+			$body = $('body'),
+			$header = $('#header');
+
+        // Disable animations/transitions until the page has loaded.
+        $body.addClass('is-loading');
+
+        $window.on('load', function () {
+            window.setTimeout(function () {
+                $body.removeClass('is-loading');
+            }, 100);
+        });
+
+        // Fix: Placeholder polyfill.
+        $('form').placeholder();
+
+        // Prioritize "important" elements on medium.
+        skel.on('+medium -medium', function () {
+            $.prioritize(
+                '.important\\28 medium\\29',
+                skel.breakpoint('medium').active
+            );
+        });
+
+        // Scrolly.
+        $('.scrolly').scrolly({
+            offset: function () {
+                return $header.height();
+            }
+        });
+
+        // Menu.
+        $('#menu')
+            .append('<a href="#menu" class="close"></a>')
+            .appendTo($body)
+            .panel({
+                delay: 500,
+                hideOnClick: true,
+                hideOnSwipe: true,
+                resetScroll: true,
+                resetForms: true,
+                side: 'right'
+            });
+
+    });
+
+})(jQuery);

+ 17 - 1
MobiParc/index.html

@@ -13,9 +13,11 @@
     <script src="assets/js/jquery-3.2.1.min.js" defer></script> 
     <script src="assets/js/jquery-ui.min.js" defer></script> 
     <script src="assets/js/jquery.redirect.js" defer></script> 
+    <script src="assets/js/jquery.scrolly.min.js" defer></script> 
     <script src="assets/js/handlebars.min.js" defer></script>
+    <script src="assets/js/skel.min.js" defer></script>
+    <script src="assets/js/util.js" defer></script>
     <script src="assets/js/main.js" defer></script>
-   
 </head>
 <body class="nojs wrapper">
 	<!-- Header -->
@@ -31,12 +33,26 @@
 		</nav>
 	</header>
 
+    <!-- Menu -->
+	<nav id="menu">
+		<ul class="links">
+			<li><a href="#index">Accueil</a></li>
+			<li><a href="">Lien 2</a></li>
+			<li><a href="">Lien 3</a></li>
+		</ul>
+		<ul class="actions vertical">
+			<li><a href="#" class="button fit">Login</a></li>
+		</ul>
+	</nav>
+
+    <!-- Synchronisation -->
     <div id="sync" class="align-center">
         <h3>Synchronisation des données</h3>
         <div class="status"></div>
         <button class="end-sync" style="display: none;">Retour</button>
     </div>
 
+    <!-- Main section -->
     <section id="main" class="inner">
         <noscript>
             <h1>Suivi mobile d'Activités</h1>