Last active
December 25, 2015 21:49
-
-
Save abennouna/7045630 to your computer and use it in GitHub Desktop.
Bidaya, votre site Web adaptatif et optimisé - Troisième partie : navigation améliorée en JavaScript - http://tellibus.com/blog/102
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /* ************************************************************************** *\ | |
| * Code HTML et PHP du site monopage Bidaya * | |
| * Billet de blog : http://tellibus.com/blog/102 * | |
| * Démo : http://tellibus.com/bidaya/index-03.php * | |
| * CC-BY-SA tellibus.com * | |
| \* ************************************************************************** */ | |
| // DetectMobileBrowsers.com - Version du 09/09/2013 | |
| $userAgent = $_SERVER['HTTP_USER_AGENT']; | |
| if (preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i', $userAgent) || preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i', substr($userAgent, 0, 4))) { | |
| $isMobile = true; | |
| } else { | |
| $isMobile = false; | |
| } | |
| ?> | |
| <!doctype html> | |
| <html dir="ltr" lang="fr"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Site Web gratuit et optimisé | Bidaya</title> | |
| <link rel="stylesheet" type="text/css" href="css/bidaya.css"> | |
| <!-- Sur le site Bidaya optimisé, il est inutile de zoomer sur appareils tactiles --> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> | |
| <?php if ($isMobile) { ?> | |
| <!-- Optimisation du viewport mobile --> | |
| <meta name="HandheldFriendly" content="True"> | |
| <meta name="MobileOptimized" content="320"> | |
| <!-- Mobile IE : activation de la technologie ClearType pour plus de lisibilité --> | |
| <meta http-equiv="cleartype" content="on"> | |
| <?php } ?> | |
| </head> | |
| <body> | |
| <header> | |
| <a href="./index-03.php" id="logo"><img src="img/logo-bidaya.png" width="50" height="50" alt="Logo Bidaya"></a> | |
| <a href="#" id="nav_toggle">Menu</a> | |
| <nav id="header_nav"> | |
| <a href="#section_bidaya" class="nav-item nav-item-active">Bidaya</a> | |
| <a href="#section_responsive" class="nav-item">Base adaptative</a> | |
| <a href="#section_optimized" class="nav-item">Structure optimisée</a> | |
| <a href="#section_license" class="nav-item">Licence</a> | |
| </nav> | |
| </header> | |
| <section id="section_bidaya" class="hero"> | |
| <?php if (!$isMobile) { ?> | |
| <aside id="hero_image"> | |
| <img src="img/hero-image.png" width="346" height="277" alt="Logo Bidaya"> | |
| </aside> | |
| <?php } ?> | |
| <h1>Bidaya : votre site adaptatif performant</h1> | |
| <h2>Concevez votre site Web sur une base gratuite et optimisée</h2> | |
| <a href="#section_responsive" id="cta">Commencez »</a> | |
| </section> | |
| <section id="section_responsive" class="main-section"> | |
| <h2>Un site monopage sur bureau et multi-écrans sur mobiles</h2> | |
| <div class="column"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> | |
| </div> | |
| <div class="column"> | |
| <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| </div> | |
| <div class="column"> | |
| <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> | |
| </div> | |
| </section> | |
| <section id="section_optimized" class="main-section"> | |
| <h2>Démarrez sur une base déjà optimisée sur Apache et PHP</h2> | |
| <div class="column"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> | |
| </div> | |
| <div class="column"> | |
| <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| </div> | |
| <div class="column"> | |
| <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> | |
| </div> | |
| </section> | |
| <section id="section_license" class="main-section"> | |
| <h2>Code gratuit, même à usage commercial (avec attribution)</h2> | |
| <div class="column"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> | |
| </div> | |
| <div class="column"> | |
| <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| </div> | |
| <div class="column"> | |
| <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> | |
| </div> | |
| </section> | |
| <footer> | |
| <p> | |
| <a href="http://twitter.com/tellibus"><img src="img/twitter.png" width="39" height="39" alt="Logo Twitter"></a> | |
| <a href="http://fb.com/tellibus"><img src="img/facebook.png" width="39" height="39" alt="Logo Facebook"></a> | |
| <a href="http://github.com/tellibus"><img src="img/github.png" width="39" height="39" alt="Logo Github"></a> | |
| </p> | |
| <p>Licence : CC-BY-SA 3.0 <a href="http://tellibus.com">tellibus.com</a></p> | |
| </footer> | |
| <script src="js/zepto-core.js"></script> | |
| <script src="js/zepto-event.js"></script> | |
| <script src="js/zepto-touch.js"></script> | |
| <script src="js/zepto-fx.js"></script> | |
| <script src="js/zepto-slide-transition.js"></script> | |
| <script> | |
| $(document).ready(function() { | |
| // 1. Initialisation de quelques variables DOM ; | |
| // 2. Définition de la largeur de passage mobile <-> bureau ; | |
| // 3. Détection si c’est un appareil tactile, | |
| // dans ce cas on utilisera plus tard l’événement "tap", | |
| // sinon on utilisera l’événement "click". | |
| var $window = $(window), | |
| breakingPoint = 480, | |
| $toggleNavigation = $("#nav_toggle"), | |
| $navigation = $("#header_nav"); | |
| $tabs = $("[id^=section_]"), | |
| $tabTriggers = $(".nav-item, #cta"), | |
| $sections = $(".main-section"), | |
| activate = ("createTouch" in document) ? "tap" : "click"; | |
| // Fonction d’initialisation du mode multi-écrans | |
| function initTabs() { | |
| $tabs.hide() | |
| .first().show(); | |
| } | |
| // Fonction d’initialisation du mode d’affichage progressif | |
| function initSections() { | |
| $sections.removeClass("main-section-disclosed") | |
| .each(function() { | |
| $(this).find("p").hide() | |
| .first().show(); | |
| }); | |
| } | |
| <?php /************* Début des codes JavaScript conditionnels **************/ ?> | |
| <?php if ($isMobile) { ?> | |
| <?php // Code JavaScript à inclure uniquement pour les mobiles ?> | |
| // Initialisation d’une variable supplémentaire | |
| var mobile = 1; | |
| // Initialisation du mode multi-écran et de l’affichage progressif | |
| initTabs(); | |
| initSections(); | |
| <?php } else { ?> | |
| <?php // Code JavaScript à inclure uniquement pour les navigateurs bureau ?> | |
| // Initialisation de variables supplémentaires | |
| var compactScreen = 0, | |
| mobile = 0; | |
| // Sur navigateurs bureau de largeur réduite, | |
| // initialisation du mode multi-écran et de l’affichage progressif | |
| if ($window.width() <= breakingPoint) { | |
| initTabs(); | |
| initSections(); | |
| compactScreen = 1; | |
| } | |
| // Sur navigateurs bureau, gestion du redimensionnement de la fenêtre | |
| $window.resize(function() { | |
| // Si la largeur devient réduite pour la première fois, | |
| // initialisation du mode multi-écran et de l’affichage progressif | |
| if (!compactScreen && $window.width() <= breakingPoint) { | |
| initTabs(); | |
| initSections(); | |
| compactScreen = 1; | |
| } | |
| if ($window.width() > breakingPoint) { | |
| // Le plugin Zepto Slide Transition ajoute des styles qu’il faut | |
| // supprimer en mode bureau pour être compatible avec notre CSS | |
| $navigation.removeAttr("style"); | |
| // Si la largeur devient pour la première fois suffisante, | |
| // annulation du mode multi-écran et de l’affichage progressif | |
| if (compactScreen) { | |
| compactScreen = 0; | |
| $tabs.show(); | |
| $toggleNavigation.css("background-position-y", "19px"); | |
| $sections.find("p").show(); | |
| } | |
| } | |
| }); | |
| <?php } ?> | |
| <?php /************** Fin des codes JavaScript conditionnels ***************/ ?> | |
| // Gestion de la touche / clic sur le lien "Menu" | |
| $toggleNavigation.live(activate, function(event) { | |
| event.preventDefault(); | |
| // Avec l’utilisation du plugin Zepto Slide Transition. | |
| // Sinon, les méthodes standard hide() et show() font l’affaire ! | |
| if ($navigation.height() == 0 || $navigation.css("display") == "none") { | |
| $toggleNavigation.css("background-position-y", "-32px"); | |
| $navigation.slideDown(); | |
| } else { | |
| $toggleNavigation.css("background-position-y", "19px"); | |
| $navigation.slideUp(); | |
| } | |
| }); | |
| // Gestion de la navigation sur tout type d’écran | |
| $tabTriggers.live(activate, function(event) { | |
| // Gestion générique des liens pointant sur les éléments du menu, | |
| // y compris le bouton "call-to-action" | |
| $wantedTab = $(".nav-item[href='" + $(this).attr("href") + "']"); | |
| // Mise en valeur de l’élément actuellement actif du menu | |
| if (!$wantedTab.hasClass("nav-item-active")) { | |
| $tabTriggers.removeClass("nav-item-active"); | |
| $wantedTab.addClass("nav-item-active"); | |
| // Navigation multi-écrans pour mobiles et petites largeurs | |
| if (mobile || compactScreen) { | |
| $tabs.hide(); | |
| $($wantedTab.attr("href")).show(); | |
| $toggleNavigation.css("background-position-y", "19px"); | |
| $navigation.slideUp(); | |
| } | |
| } | |
| }); | |
| // Gestion de l’affichage progressif pour mobiles et petites largeurs | |
| $sections.live(activate, function(event) { | |
| if (mobile || compactScreen) { | |
| event.preventDefault(); | |
| $section = $(this); | |
| if ($section.hasClass("main-section-disclosed")) { | |
| $(this).removeClass("main-section-disclosed") | |
| .find("p").hide() | |
| .first().show(); | |
| } else { | |
| $(this).addClass("main-section-disclosed") | |
| .find("p").show(); | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ************************************************************************** *\ | |
| * Styles adaptatifs du site monopage Bidaya * | |
| * Billet de blog : http://tellibus.com/blog/102 * | |
| * Démo : http://tellibus.com/bidaya/index-03.php * | |
| * CC-BY-SA tellibus.com * | |
| \* ************************************************************************** */ | |
| /************* Réinitialisation des styles des balises utilisées **************/ | |
| html, body, div, h1, h2, p, header, footer, nav, section { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| } | |
| header, nav, section, aside, footer { | |
| display: block; | |
| } | |
| ol, ul { | |
| list-style: none; | |
| } | |
| /************************** Fin de réinitialisation ***************************/ | |
| /******************************* Styles communs *******************************/ | |
| body { | |
| font: 16px/20px Helvetica, Arial, sans-serif; | |
| color: #666; | |
| } | |
| a { | |
| color: #333; | |
| } | |
| a:hover, a:active, a:focus { | |
| color: #000; | |
| } | |
| header { | |
| margin-bottom: 10px; | |
| border-bottom: solid 2px #000; | |
| overflow: hidden; | |
| } | |
| #logo { | |
| line-height: 0; | |
| } | |
| .nav-item { | |
| text-decoration: none; | |
| } | |
| .nav-item-active { | |
| font-weight: bold; | |
| } | |
| h1 { | |
| margin-top: 20px; | |
| font-size: 36px; | |
| line-height: 44px; | |
| } | |
| .main-section h2 { | |
| font-size: 20px; | |
| } | |
| .hero h2 { | |
| font-size: 24px; | |
| margin-top: 30px; | |
| line-height: 28px; | |
| font-weight: normal; | |
| } | |
| #cta { | |
| text-decoration: none; | |
| color: #fff; | |
| font-weight: bold; | |
| background: #444; | |
| padding: 10px 50px; | |
| margin: 20px auto; | |
| text-align: center; | |
| border-radius: 5px; | |
| border: solid 1px #000; | |
| display: inline-block; | |
| font-size: 20px; | |
| } | |
| .hero, .main-section { | |
| border-bottom: solid 2px #000; | |
| padding: 10px; | |
| overflow: hidden; | |
| } | |
| .column { | |
| margin-top: 20px; | |
| } | |
| footer { | |
| padding: 10px; | |
| text-align: center; | |
| } | |
| /*************************** Fin des styles communs ***************************/ | |
| /**************** Petits écrans : largeurs inférieures à 480 px ***************/ | |
| @media screen and (max-width: 480px) { | |
| body { | |
| text-align: center; | |
| } | |
| #logo { | |
| float: left; | |
| padding: 10px; | |
| } | |
| #nav_toggle { | |
| font-size: 20px; | |
| float: right; | |
| background: url(../img/dropdown.png) 100% 19px no-repeat; | |
| padding-right: 35px; | |
| text-decoration: none; | |
| line-height: 70px; | |
| margin-right: 10px; | |
| } | |
| #header_nav { | |
| display: none; | |
| clear: both; | |
| } | |
| .nav-item { | |
| display: block; | |
| padding: 10px 0; | |
| border-top: solid 2px #000; | |
| } | |
| .nav-item-active { | |
| background: #ddd; | |
| } | |
| .hero { | |
| text-align: center; | |
| } | |
| .main-section { | |
| text-align: center; | |
| background: url(../img/plus.png) 98% 98% no-repeat; | |
| padding-bottom: 40px; | |
| } | |
| #hero_image { | |
| display: none; | |
| } | |
| .main-section-disclosed { | |
| background-image: url(../img/minus.png); | |
| } | |
| } | |
| /********************* Fin des styles pour petits écrans **********************/ | |
| /********* Ecrans suffisamment larges : largeurs supérieures à 480 px *********/ | |
| @media screen and (min-width: 481px) { | |
| #nav_toggle { | |
| display: none; | |
| } | |
| .nav-item { | |
| display: inline-block; | |
| } | |
| .nav-item-active { | |
| text-decoration: underline; | |
| } | |
| } | |
| /*************** Fin des styles pour écrans suffisamment larges ***************/ | |
| /******** Ecrans de largeur moyenne : comprises entre 481 px et 768px *********/ | |
| @media screen and (min-width: 481px) and (max-width: 768px) { | |
| #logo { | |
| display: block; | |
| margin: 10px; | |
| } | |
| #header_nav { | |
| display: block; | |
| text-align: center; | |
| border-top: solid 2px #000; | |
| } | |
| .nav-item { | |
| padding: 15px 10px; | |
| } | |
| .hero, .main-section { | |
| text-align: center; | |
| } | |
| } | |
| /*************** Fin des styles pour écrans de largeur moyenne ****************/ | |
| /*************** Ecrans larges : largeurs supérieures à 768 px ****************/ | |
| @media screen and (min-width: 769px) { | |
| header { | |
| padding: 10px; | |
| } | |
| #logo { | |
| float: left; | |
| } | |
| #header_nav { | |
| float: right; | |
| } | |
| .nav-item { | |
| margin: 15px 10px; | |
| } | |
| #hero_image { | |
| float: right; | |
| margin-left: 40px; | |
| } | |
| .column { | |
| display: inline-block; | |
| width: 30%; | |
| margin-right: 3%; | |
| vertical-align: top; | |
| } | |
| } | |
| /********************* Fin des styles pour écrans larges **********************/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Post sur http://tellibus.com/blog/102-Bidaya-votre-site-Web-adaptatif-et-optimisé--Troisième-partie--navigation-améliorée-en-JavaScript