Changeset 70231 in spip-zone


Ignore:
Timestamp:
Feb 27, 2013, 11:17:27 AM (6 years ago)
Author:
real3t@…
Message:

Avec la participation de Benjamin, amélioration du mode RWD du menu haut du site en utilisant http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/

Attention, pour ceux qui ont personnalisé le menu RWD, il faudra enlever ces personnalisations pour ne pas avoir de problèmes d'apparence du menu RWD sur la gauche.

Location:
_squelettes_/soyezcreateurs_net/plugins_2.1/plugins/soyezcreateurs
Files:
7 added
8 edited

Legend:

Unmodified
Added
Removed
  • _squelettes_/soyezcreateurs_net/plugins_2.1/plugins/soyezcreateurs/lang/soyezcreateurs_fr.php

    r70095 r70231  
    354354        // M
    355355        'memerubrique' => 'Dans la même rubrique...',
     356        'menunavrwd' => 'Menu de navigation',
    356357        'mentions_legales_obligatoires' => 'Mention légales obligatoire ([CNIL|Commision Nationale Informatique et Liberté->http://www.cnil.fr/] et [LcEN|Loi sur la confiance en l\'économie Numérique->http://www.legifrance.gouv.fr/WAspad/UnTexteDeJorf?numjo=ECOX0200175L]). Tout ce qu\'[il faut savoir->http://www.juriblogsphere.net/2009/12/04/les-informations-legales-a-faire-figurer-sur-un-site-internet/]. [Décryptage des obligations légales->http://www.maitre-eolas.fr/post/2008/03/24/905-blogueurs-et-responsabilite-reloaded].',
    357358        'menu_deplier' => 'd\\351plier: ',
  • _squelettes_/soyezcreateurs_net/plugins_2.1/plugins/soyezcreateurs/noisettes/footer/footer.html

    r68505 r70231  
    2626</script>]
    2727[<h2 class="hidden">Catholique.fr</h2>(#INSERT_NAV_CEF)]
     28<script type="text/javascript" src="#CHEMIN{javascript/main.js}"></script>
    2829</body>
    2930</html>
  • _squelettes_/soyezcreateurs_net/plugins_2.1/plugins/soyezcreateurs/noisettes/header/header.html

    r69564 r70231  
    1212
    1313<meta http-equiv="content-type" content="text/html; charset=#CHARSET" />
    14 <meta name="viewport" content="width=device-width; initial-scale=1.0;" />
     14<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
     15<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    1516<BOUCLE_Icra(MOTS){type=_HTTP-EQUIV}{titre=pics-label}{texte!=}><link rel="meta" href="#URL_SITE_SPIP/labels.rdf" type="application/rdf+xml" title="ICRA labels" /></BOUCLE_Icra>
    1617<BOUCLE_http-equiv(MOTS){type=_HTTP-EQUIV}{par titre}>[<meta[ http-equiv='(#TITRE|attribut_html)'] content='(#TEXTE|attribut_html|sc_replace{&quot;,'"'})' />]</BOUCLE_http-equiv>
     
    9293<script type="text/javascript" src="#CHEMIN{javascript/ajaxCallback.js}"></script>   
    9394<script type="text/javascript" src="#CHEMIN{javascript/jquery.cookie.js}"></script>   
     95<script type="text/javascript" src="#CHEMIN{javascript/modernizr.js}"></script>
    9496#INSERT_HEAD
    9597[(#ENV{wdcalendar}|=={oui}|oui)
     
    126128<body[ id="(#ENV{idbody})"] class="[bodysecteur(#ENV{id_secteur}) ][bodyrubrique(#ENV{rubriqueencours}) ][bodyarticle(#ENV{id_article}) ]">
    127129<div id="container">
     130<a class="nav-btn" id="nav-open-btn" href="#nav"><:soyezcreateurs:menunavrwd:></a>
    128131#SET{noisetteheader,header_modeedito}
    129132[(#ENV{template}|=={'Sommaire'}|oui)
  • _squelettes_/soyezcreateurs_net/plugins_2.1/plugins/soyezcreateurs/noisettes/header/header_modecommuniquant.html

    r70082 r70231  
    11<div id="header">
    22        <div id="header_inner">
    3 <div id="escapelinks" class="escapelinks"><ul>
    4         <li><a href="#letexte"><:soyezcreateurs:accessibilite_texte:></a></li>
    5         <BOUCLE_MenuHaut(RUBRIQUES){titre_mot=MenuHaut}{par num titre}{!lang_select}{0,1}><li><a href="#menuh"><:soyezcreateurs:accessibilite_onglets:></a></li></BOUCLE_MenuHaut>
    6         <li><a href="#menusite"><:soyezcreateurs:accessibilite_menu:></a></li>
    7         <li><a href="#formulaire_recherche"><:soyezcreateurs:accessibilite_recherche:></a></li>
    8 <BOUCLE_AccesibiliteLien(ARTICLES){titre_mot=AccesibiliteLien}{0,1}{!par date}>
    9         <li><a href="#ARTICLE_URL"[ title="(#DESCRIPTIF|attribut_html)"]>[(#TITRE)]</a></li>
    10 </BOUCLE_AccesibiliteLien>
    11 </ul></div>
     3<div id="escapelinks" class="escapelinks"><ul><li><a href="#letexte"><:soyezcreateurs:accessibilite_texte:></a></li><BOUCLE_MenuHaut(RUBRIQUES){titre_mot=MenuHaut}{par num titre}{!lang_select}{0,1}><li><a href="#menuh"><:soyezcreateurs:accessibilite_onglets:></a></li></BOUCLE_MenuHaut><li><a href="#menusite"><:soyezcreateurs:accessibilite_menu:></a></li><li><a href="#formulaire_recherche"><:soyezcreateurs:accessibilite_recherche:></a></li><BOUCLE_AccesibiliteLien(ARTICLES){titre_mot=AccesibiliteLien}{0,1}{!par date}><li><a href="#ARTICLE_URL"[ title="(#DESCRIPTIF|attribut_html)"]>[(#TITRE)]</a></li></BOUCLE_AccesibiliteLien></ul></div>
    124<INCLURE{fond=noisettes/menus/menu_navhaute,env}>
    135<div id="datemajsite"><span><BOUCLE_datemajsite(ARTICLES){!par date_modif}{0,1}{lang}><:soyezcreateurs:dernieremaj:> [(#DATE_MODIF|nom_jour)] [(#DATE_MODIF|affdate)]</BOUCLE_datemajsite>[(#CONFIG{soyezcreateurs/positionfluxrss,bottom}|=={header}|oui)<INCLURE{fond=noisettes/liensnav/reseaux_sociaux}>]</span></div>
  • _squelettes_/soyezcreateurs_net/plugins_2.1/plugins/soyezcreateurs/noisettes/header/header_modeedito.html

    r70082 r70231  
    11        <div id="header">
    22        <div id="header_inner">
    3 <div id="escapelinks" class="escapelinks"><ul>
    4         <li><a href="#letexte"><:soyezcreateurs:accessibilite_texte:></a></li>
    5         <BOUCLE_MenuHaut(RUBRIQUES){titre_mot=MenuHaut}{par num titre}{!lang_select}{0,1}><li><a href="#menuhaut"><:soyezcreateurs:accessibilite_onglets:></a></li></BOUCLE_MenuHaut>
    6         <li><a href="#menusite"><:soyezcreateurs:accessibilite_menu:></a></li>
    7         <li><a href="#formulaire_recherche"><:soyezcreateurs:accessibilite_recherche:></a></li>
    8 <BOUCLE_AccesibiliteLien(ARTICLES){titre_mot=AccesibiliteLien}{0,1}{!par date}>
    9         <li><a href="#ARTICLE_URL"[ title="(#DESCRIPTIF|attribut_html)"]>[(#TITRE)]</a></li>
    10 </BOUCLE_AccesibiliteLien>
    11 </ul></div>
     3<div id="escapelinks" class="escapelinks"><ul><li><a href="#letexte"><:soyezcreateurs:accessibilite_texte:></a></li><BOUCLE_MenuHaut(RUBRIQUES){titre_mot=MenuHaut}{par num titre}{!lang_select}{0,1}><li><a href="#menuhaut"><:soyezcreateurs:accessibilite_onglets:></a></li></BOUCLE_MenuHaut><li><a href="#menusite"><:soyezcreateurs:accessibilite_menu:></a></li><li><a href="#formulaire_recherche"><:soyezcreateurs:accessibilite_recherche:></a></li><BOUCLE_AccesibiliteLien(ARTICLES){titre_mot=AccesibiliteLien}{0,1}{!par date}><li><a href="#ARTICLE_URL"[ title="(#DESCRIPTIF|attribut_html)"]>[(#TITRE)]</a></li></BOUCLE_AccesibiliteLien></ul></div>
    124<INCLURE{fond=noisettes/menus/menu_navhaute,env}>
    135<div id="datemajsite"><span><BOUCLE_datemajsite(ARTICLES){!par date_modif}{0,1}{lang}><:soyezcreateurs:dernieremaj:> [(#DATE_MODIF|nom_jour)] [(#DATE_MODIF|affdate)]</BOUCLE_datemajsite>[(#CONFIG{soyezcreateurs/positionfluxrss,bottom}|=={header}|oui)<INCLURE{fond=noisettes/liensnav/reseaux_sociaux}>]</span></div>
  • _squelettes_/soyezcreateurs_net/plugins_2.1/plugins/soyezcreateurs/noisettes/header/header_modeportail.html

    r69209 r70231  
    11<div id="header">
    22<div id="pre-header">
    3 <div id="escapelinks" class="escapelinks"><ul>
    4         <li><a href="#letexte"><:soyezcreateurs:accessibilite_texte:></a></li>
    5         <BOUCLE_MenuHaut(RUBRIQUES){titre_mot=MenuHaut}{par num titre}{!lang_select}{0,1}><li><a href="#menuhaut"><:soyezcreateurs:accessibilite_onglets:></a></li></BOUCLE_MenuHaut>
    6         <li><a href="#menusite"><:soyezcreateurs:accessibilite_menu:></a></li>
    7         <li><a href="#formulaire_recherche"><:soyezcreateurs:accessibilite_recherche:></a></li>
    8 <BOUCLE_AccesibiliteLien(ARTICLES){titre_mot=AccesibiliteLien}{0,1}{!par date}>
    9         <li><a href="#ARTICLE_URL"[ title="(#DESCRIPTIF|attribut_html)"]>[(#TITRE)]</a></li>
    10 </BOUCLE_AccesibiliteLien>
    11 </ul></div>
     3<div id="escapelinks" class="escapelinks"><ul><li><a href="#letexte"><:soyezcreateurs:accessibilite_texte:></a></li><BOUCLE_MenuHaut(RUBRIQUES){titre_mot=MenuHaut}{par num titre}{!lang_select}{0,1}><li><a href="#menuhaut"><:soyezcreateurs:accessibilite_onglets:></a></li></BOUCLE_MenuHaut><li><a href="#menusite"><:soyezcreateurs:accessibilite_menu:></a></li><li><a href="#formulaire_recherche"><:soyezcreateurs:accessibilite_recherche:></a></li><li><a href="#ARTICLE_URL"[ title="(#DESCRIPTIF|attribut_html)"]>[(#TITRE)]</a></li></BOUCLE_AccesibiliteLien></ul></div>
    124<INCLURE{fond=noisettes/menus/menu_navhaute,env}>
    135<div id="datemajsite"><span><BOUCLE_datemajsite(ARTICLES){!par date_modif}{0,1}{lang}><:soyezcreateurs:dernieremaj:> [(#DATE_MODIF|nom_jour)] [(#DATE_MODIF|affdate)]</BOUCLE_datemajsite></span></div>
  • _squelettes_/soyezcreateurs_net/plugins_2.1/plugins/soyezcreateurs/noisettes/menus/menuhaut.html

    r66801 r70231  
    11<B_MenuHaut>
    22<div id="menuhaut">
     3        <div class="block">
    34        <ul id="menuh">
    45                <BOUCLE_MenuHaut(RUBRIQUES){titre_mot=MenuHaut}{par num titre}{!lang_select}><li class="menuh#ID_RUBRIQUE"><INCLURE{fond=noisettes/menus/rubrique_li,
     
    6364                </li></BOUCLE_MenuHaut>
    6465        </ul>
     66        <a class="close-btn" id="nav-close-btn" href="#header">Return to Content</a>
     67    </div>
    6568</div>
    6669</B_MenuHaut>
  • _squelettes_/soyezcreateurs_net/plugins_2.1/plugins/soyezcreateurs/stylessoyezcreateurs.css.html

    r69599 r70231  
    254254#cita_bandeau #citations dl { margin: 0; }
    255255
    256 #escapelinks ul { display: inline; padding:0}
    257 #escapelinks li { display: inline; padding: 0; padding-left: 1em; background: #GET{c_header_bk}; list-style: none; list-style-image: none; }
     256#escapelinks { margin-left:2.625em; }
     257#escapelinks ul { display: inline; padding:0; margin:0; }
     258#escapelinks li { display: inline; padding: 0 .8em; background: #GET{c_header_bk}; list-style: none; list-style-image: none; }
    258259#escapelinks a { color:#GET{c_header}; }
    259260#escapelinks a:link, #escapelinks a:visited { color:#[(#GET{c_header}|couleur_inverserluminosite{20})]; }
     
    12431244#content .listesites li { clear: left; list-style: none; }
    12441245
     1246/***************** Menu hamburger ********************/*
     1247.block {
     1248  position: relative;
     1249  margin: 0 auto;
     1250}
     1251
     1252.close-btn {
     1253  display: block;
     1254  width: 2.625em;
     1255  height: 2.25em;
     1256  padding: 0;
     1257  border: 0;
     1258  outline: none;
     1259  background: #333333 url([(#CHEMIN{images/close-btn.svg}|url_absolue)]) left center no-repeat;
     1260  background-size: 1.875em 1.875em;
     1261  overflow: hidden;
     1262  white-space: nowrap;
     1263  text-indent: 100%;
     1264  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
     1265  opacity: 1;
     1266  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     1267}
     1268.no-svg .close-btn {
     1269  background-image: url([(#CHEMIN{images/close-btn.png}|url_absolue)]);
     1270}
     1271.close-btn:focus, .close-btn:hover {
     1272  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
     1273  opacity: 1;
     1274}
     1275.nav-btn {
     1276  display: none;
     1277}
     1278
     1279#menuhaut .close-btn {
     1280  display: none;
     1281}
     1282
    12451283/* Pour les mobiles, inspiré de http://www.alsacreations.com/astuce/lire/1177 */
    12461284@media (max-width: [(#GET{LargeurContaineur})]px) {
     
    13021340        top:0;
    13031341 }
     1342 
     1343 
     1344 /************ menu hamburger */
     1345
     1346body {overflow-x:hidden;}
     1347
     1348 .nav-btn {
     1349 z-index: 1;
     1350 position: absolute;
     1351  display: block;
     1352  width: 2.625em;
     1353  height: 2.25em;
     1354  padding: 0;
     1355  border: 0;
     1356  outline: none;
     1357  background: #333333 url([(#CHEMIN{images/nav-icon.svg}|url_absolue)]) center center no-repeat;
     1358  background-size: 1.875em 1.5em;
     1359  overflow: hidden;
     1360  white-space: nowrap;
     1361  text-indent: 100%;
     1362  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
     1363  opacity: 0.7;
     1364  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     1365}
     1366.no-svg .nav-btn {
     1367  background-image: url([(#CHEMIN{images/nav-icon.png}|url_absolue)]);
     1368}
     1369.nav-btn:hover, .nav-btn:focus {
     1370  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
     1371  opacity: 1;
     1372}
     1373
     1374#menuhaut .block {
     1375  z-index: 2;
     1376  position: relative;
     1377  padding: 1.5em 0 1.5em 1.25em;
     1378  background: #333333;
     1379  font-size: 1.2em;
     1380  margin-right: 20px;
     1381}
     1382#menuhaut ul {
     1383  zoom: 1;
     1384  display: block;
     1385  margin-top: 25px;
     1386}
     1387#menuhaut ul ul{
     1388        padding-left:15px;
     1389}
     1390#menuhaut ul:before, #menuhaut ul:after {
     1391  content: "";
     1392  display: table;
     1393}
     1394#menuhaut ul:after {
     1395  clear: both;
     1396}
     1397#menuhaut li {
     1398  display: block;
     1399  border-top:1px solid rgba(255, 255, 255, 0.1);
     1400  margin-top:0px;
     1401}
     1402#menuhaut li a {
     1403  display: block;
     1404  color: #fff;
     1405  font-size: 0.875em;
     1406  line-height: 1.28571em;
     1407  font-weight: bold;
     1408  outline: none;
     1409  background:none;
     1410}
     1411body #menuhaut li a:focus, body #menuhaut li a:hover, body #menuhaut li:hover, body #menuhaut li li:hover, body #menuhaut li li a:hover, body #menuhaut li.hover, body #menuh.drop li a:hover, body #menuh.drop li a:focus, body #menuh.drop > li.hover > a{
     1412  color: #fff;
     1413  background: rgba(255, 255, 255, 0.1);
     1414}
     1415#menuhaut li.is-active a {
     1416  color: #fff;
     1417}
     1418 
     1419 #menuhaut {
     1420    position: absolute;
     1421    top: 0;
     1422    overflow:hidden;
     1423  }
     1424  #menuhaut:not(:target) {
     1425    z-index: 1;
     1426    height: 0;
     1427  }
     1428  #menuhaut:target .close-btn {
     1429    display: block;
     1430  }
     1431  #menuhaut .close-btn {
     1432    position: absolute;
     1433    top: 0px;
     1434    left: 1.875em;
     1435  }
     1436  #menuhaut li {
     1437    position: relative;
     1438  }
     1439
     1440  .js-ready #menuhaut {
     1441    height: 100%;
     1442    width: 70%;
     1443    background: #333333;
     1444    -webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
     1445    -moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
     1446    box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
     1447  }
     1448  .js-ready #menuhaut .close-btn {
     1449        top: 10px;
     1450    display: block;
     1451    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
     1452    opacity: 0.7;
     1453  }
     1454  .js-ready #menuhaut .close-btn:focus, .js-ready #menuhaut .close-btn:hover {
     1455    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
     1456    opacity: 1;
     1457  }
     1458
     1459    .js-nav .nav-btn{display:none;}
     1460   
     1461  .js-ready #menuhaut {
     1462    left: -70%;
     1463  }
     1464  .js-ready #container {
     1465    left: 0;
     1466  }
     1467
     1468  .js-nav #container {
     1469    left: 70%;
     1470  }
     1471
     1472  .csstransforms3d.csstransitions.js-ready #menuhaut {
     1473    left: 0;
     1474    -webkit-transform: translate3d(-100%, 0, 0);
     1475    -moz-transform: translate3d(-100%, 0, 0);
     1476    -ms-transform: translate3d(-100%, 0, 0);
     1477    -o-transform: translate3d(-100%, 0, 0);
     1478    transform: translate3d(-100%, 0, 0);
     1479    -webkit-backface-visibility: hidden;
     1480    -moz-backface-visibility: hidden;
     1481    -ms-backface-visibility: hidden;
     1482    -o-backface-visibility: hidden;
     1483    backface-visibility: hidden;
     1484  }
     1485  .csstransforms3d.csstransitions.js-ready #container {
     1486    left: 0 !important;
     1487    -webkit-transform: translate3d(0, 0, 0);
     1488    -moz-transform: translate3d(0, 0, 0);
     1489    -ms-transform: translate3d(0, 0, 0);
     1490    -o-transform: translate3d(0, 0, 0);
     1491    transform: translate3d(0, 0, 0);
     1492    -webkit-transition: -webkit-transform 500ms ease;
     1493    -moz-transition: -moz-transform 500ms ease;
     1494    -o-transition: -o-transform 500ms ease;
     1495    transition: transform 500ms ease;
     1496    -webkit-backface-visibility: hidden;
     1497    -moz-backface-visibility: hidden;
     1498    -ms-backface-visibility: hidden;
     1499    -o-backface-visibility: hidden;
     1500    backface-visibility: hidden;
     1501  }
     1502
     1503  .csstransforms3d.csstransitions.js-nav #container {
     1504    -webkit-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
     1505    -moz-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
     1506    -ms-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
     1507    -o-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
     1508    transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
     1509  }
     1510
     1511  .csstransforms3d.csstransitions.js-ready #menuhaut .block {
     1512    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
     1513    opacity: 0.7;
     1514    -webkit-transition: opacity 300ms 100ms, -webkit-transform 500ms ease;
     1515    -webkit-transition-delay: ease, 0s;
     1516    -moz-transition: opacity 300ms 100ms ease, -moz-transform 500ms ease;
     1517    -o-transition: opacity 300ms 100ms ease, -o-transform 500ms ease;
     1518    transition: opacity 300ms 100ms ease, transform 500ms ease;
     1519    -webkit-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
     1520    -moz-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
     1521    -ms-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
     1522    -o-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
     1523    transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
     1524    -webkit-transform-origin: 50% 0%;
     1525    -moz-transform-origin: 50% 0%;
     1526    -ms-transform-origin: 50% 0%;
     1527    -o-transform-origin: 50% 0%;
     1528    transform-origin: 50% 0%;
     1529  }
     1530
     1531  .csstransforms3d.csstransitions.js-nav #menuhaut .block {
     1532    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
     1533    opacity: 1;
     1534    -webkit-transform: translate3d(0, 0, 0);
     1535    -moz-transform: translate3d(0, 0, 0);
     1536    -ms-transform: translate3d(0, 0, 0);
     1537    -o-transform: translate3d(0, 0, 0);
     1538    transform: translate3d(0, 0, 0);
     1539  }
     1540 
     1541 
     1542 
     1543 
    13041544}
    13051545@media (max-width: 640px) {
     
    13151555
    13161556 /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */
    1317  #wrapper, #navigation, #extra, #artrecents {
     1557 #wrapper, #navigation, #navHaute, #extra, #artrecents, #escapelinks {
    13181558   float: none !important;
    13191559   width: auto !important
     1560 }
     1561#escapelinks { margin-left:0; }
     1562#escapelinks ul, #navHaute ul { display: block; }
     1563#escapelinks li, #navHaute li, #menu_lang { display: block; text-align: center; }
     1564#escapelinks li a,#navHaute li a, #menu_lang a { display: block; padding: .6em 0; font-size: 1.5em; }
     1565
     1566 #header #logo {
     1567        height: auto;
     1568 }
     1569 #header h1 {
     1570    clear: both;
    13201571 }
    13211572
Note: See TracChangeset for help on using the changeset viewer.