Ignore:
Timestamp:
Feb 27, 2013, 11:17:27 AM (7 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.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • _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.