Mois : juillet 2017

[CSS] Un background off-container

17/07/2017 / admin

Pas totalement valide car ajoute un léger scroll horizontal

Source: Full Width Containers in Limited Width Parents et le CodePen. Attention à la compatibilité.

width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;

1
2
3
4
5
6

width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;

Un *tain d’exemple qui marche:

Regardez bien la structure HTML. L’ajout d’une DIV .full-width joue un rôle important ici.

<div class="staticBlock staticBlock-oad"> <div class="full-width"> <div class="container"> <div class="row"> <div class="col"> <h2 class="h2"><?= __('Find out about our tools to help you make the right decision !'); ?></h2> </div> </div> <div class="row"> <div class="col-md-4 text-center"> <a href="<?php echo $block->getBaseUrl(); ?>/<?= __('Opti url'); ?>"> <img src='<?php echo $this->getViewFileUrl('images/logo-opti.jpg'); ?>' alt="<?= __('Access Opti'); ?>" /> </a> <p><?= __('Opti tagline'); ?></p> <a class="btn btn-lg btn-oad" href="<?php echo $block->getBaseUrl(); ?>/<?= __('Opti url'); ?>"> <?= __('Access Opti'); ?> </a> </div> <div class="col-md-4"></div> <div class="col-md-4"></div> </div> </div> </div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<div class="staticBlock staticBlock-oad">
    <div class="full-width">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h2 class="h2"><?= __('Find out about our tools to help you make the right decision !'); ?></h2>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 text-center">
                    <a href="<?php echo $block->getBaseUrl(); ?>/<?= __('Opti url'); ?>">
                        <img src='<?php echo $this->getViewFileUrl('images/logo-opti.jpg'); ?>' alt="<?= __('Access Opti'); ?>" />
                    </a>
                    <p><?= __('Opti tagline'); ?></p>
                    <a class="btn btn-lg btn-oad" href="<?php echo $block->getBaseUrl(); ?>/<?= __('Opti url'); ?>">
                        <?= __('Access Opti'); ?>
                    </a>
                </div>
                <div class="col-md-4"></div>
                <div class="col-md-4"></div>
            </div>
        </div>
    </div>
</div>

.staticBlock { &-oad { background-color: #eee; .full-width { position: relative; padding-top: 15px; padding-bottom: 15px; &:before, &:after { z-index: -1; top: 0; display: block; content: ""; position: absolute; width: 50%; height: 100%; background-color: #eee; } &:before { left: -50%; } &:after { right: -50%; } } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

.staticBlock {
  &-oad {
    background-color: #eee;
    .full-width {
      position: relative;
      padding-top: 15px;
      padding-bottom: 15px;
      &:before,
      &:after {
        z-index: -1;
        top: 0;
        display: block;
        content: "";
        position: absolute;
        width: 50%;
        height: 100%;
        background-color: #eee;
      }
      &:before {
        left: -50%;
      }
      &:after {
        right: -50%;
      }
    }
  }
}

Une alternative intéressante

Notamment si l’élément doit se retrouver en sticky à un moment donné.

@media screen and (min-width: @screen-lg-min) { .refinement-facets-list.affix { width: 1200px; z-index: 1000; border-bottom: 1px solid #ededed; background: @page-background-color; &:before, &:after { content: ""; display: block; position: fixed; width: 50%; height: 51px; border-bottom: 1px solid #ededed; background: @page-background-color; } &:before { left: -50%; } &:after { right: -50%; } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

@media screen and (min-width: @screen-lg-min) {
  .refinement-facets-list.affix {
    width: 1200px;
    z-index: 1000;
    border-bottom: 1px solid #ededed;
    background: @page-background-color;
    &:before,
    &:after {
      content: "";
      display: block;
      position: fixed;
      width: 50%;
      height: 51px;
      border-bottom: 1px solid #ededed;
      background: @page-background-color;
    }
    &:before {
      left: -50%;
    }
    &:after {
      right: -50%;
    }
  }
}

[CSS] Des cercles responsive dont les dimensions s’adaptent de manière homothétique

17/07/2017 / admin

Source : https://codepen.io/CrocoDillon/pen/trFam.

A noter: par rapport au Codepen où .circle à les propriétés width: 10%; et padding: 5% 0;, mettre width: 100%; et padding: 50% 0; (comme dans le code ci-dessous) rend les cercles parfaitement fluides. Ils s’adaptent au container.

<div class="responsive-circle"> <div class="responsive-circle-content"> <i class="iconfont">[P]</i> </div> </div>

1
2
3
4
5

<div class="responsive-circle">
  <div class="responsive-circle-content">
    <i class="iconfont">[P]</i>
  </div>
</div>

.responsive-circle { position: relative; width: 100%; height: 0; padding: 50% 0; margin: 0 auto; border-radius: 50%; background: pink; &-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; &:before { content: ""; vertical-align: middle; display: inline-block; width: 0; height: 100%; } // span { // vertical-align: middle; // display: inline-block; // } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

.responsive-circle {
  position: relative;
  width: 100%;
  height: 0;
  padding: 50% 0;
  margin: 0 auto;
  border-radius: 50%;
  background: pink;
  &-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    &:before {
      content: "";
      vertical-align: middle;
      display: inline-block;
      width: 0;
      height: 100%;
    }
    // span {
    //   vertical-align: middle;
    //   display: inline-block;
    // }
  }
}

[CSS] Des bordures en dégradé

17/07/2017 / admin

Source : CSS Tricks – Gradient borders.

/* * gradient border */ @mixin gradient-border( $border-width: 10px, $gradient-top-color: $white, $gradient-bottom-color: $black) { position: relative; border-top: $border-width solid $gradient-top-color; border-bottom: $border-width solid $gradient-bottom-color; &:before, &:after { content: ""; position: absolute; background-image: -webkit-gradient(linear, 0 0, 0 100%, from($gradient-top-color), to($gradient-bottom-color)); background-image: -webkit-linear-gradient($gradient-top-color, $gradient-bottom-color); background-image: -moz-linear-gradient($gradient-top-color, $gradient-bottom-color); background-image: -o-linear-gradient($gradient-top-color, $gradient-bottom-color); background-image: linear-gradient($gradient-top-color, $gradient-bottom-color); top: -$border-width; bottom: -$border-width; width: $border-width; } &:before { left: -$border-width; left: 0; //foundation 6 } &:after { right: -$border-width; right: 0; //foundation 6 } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

/*
* gradient border
*/
@mixin gradient-border(
  $border-width: 10px,
  $gradient-top-color: $white,
  $gradient-bottom-color: $black) {
  position: relative;
  border-top: $border-width solid $gradient-top-color;
  border-bottom: $border-width solid $gradient-bottom-color;
  &:before,
  &:after {
    content: "";
    position: absolute;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from($gradient-top-color), to($gradient-bottom-color));
    background-image: -webkit-linear-gradient($gradient-top-color, $gradient-bottom-color);
    background-image: -moz-linear-gradient($gradient-top-color, $gradient-bottom-color);
    background-image: -o-linear-gradient($gradient-top-color, $gradient-bottom-color);
    background-image: linear-gradient($gradient-top-color, $gradient-bottom-color);
    top: -$border-width;
    bottom: -$border-width;
    width: $border-width;
  }
  &:before {
    left: -$border-width;
    left: 0; //foundation 6
  }
  &:after {
    right: -$border-width;
    right: 0; //foundation 6
  }
}

border-image and linear-gradient

.top-to-bottom { border-width: 3px; border-style: solid; -webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%; -webkit-border-image: -webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%; -moz-border-image: -moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%; -o-border-image: -o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%; border-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0)) 1 100%; } .bottom-to-top { border-width: 3px; border-style: solid; -webkit-border-image: -webkit-gradient(linear, 0 100%, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%; -webkit-border-image: -webkit-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%; -moz-border-image: -moz-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%; -o-border-image: -o-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%; border-image: linear-gradient(to top, black, rgba(0, 0, 0, 0)) 1 100%; } .left-to-right { border-width: 3px 0 3px 3px; border-style: solid; -webkit-border-image: -webkit-gradient(linear, 100% 0, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%; -webkit-border-image: -webkit-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%; -moz-border-image: -moz-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%; -o-border-image: -o-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%; border-image: linear-gradient(to right, black, rgba(0, 0, 0, 0)) 1 100%; } .right-to-left { border-width: 3px 3px 3px 0; border-style: solid; -webkit-border-image: -webkit-gradient(linear, 0 0, 100% 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%; -webkit-border-image: -webkit-linear-gradient(left, black, rgba(0, 0, 0, 0)) 1 100%; -moz-border-image: -moz-linear-gradient(left, black, rgba(0, 0, 0, 0)) 1 100%; -o-border-image: -o-linear-gradient(left, black, rgba(0, 0, 0, 0)) 1 100%; border-image: linear-gradient(to left, black, rgba(0, 0, 0, 0)) 1 100%; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

.top-to-bottom {
    border-width: 3px;
    border-style: solid;
    -webkit-border-image:
      -webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
    -webkit-border-image:
      -webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    -moz-border-image:
      -moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    -o-border-image:
      -o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    border-image:
      linear-gradient(to bottom, black, rgba(0, 0, 0, 0)) 1 100%;
}

.bottom-to-top {
    border-width: 3px;
    border-style: solid;
    -webkit-border-image:
      -webkit-gradient(linear, 0 100%, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
    -webkit-border-image:
      -webkit-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
    -moz-border-image:
      -moz-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
    -o-border-image:
      -o-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
    border-image:
      linear-gradient(to top, black, rgba(0, 0, 0, 0)) 1 100%;
}

.left-to-right {
    border-width: 3px 0 3px 3px;
    border-style: solid;
    -webkit-border-image:
      -webkit-gradient(linear, 100% 0, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
    -webkit-border-image:
      -webkit-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;
    -moz-border-image:
      -moz-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;
    -o-border-image:
      -o-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;
    border-image:
      linear-gradient(to right, black, rgba(0, 0, 0, 0)) 1 100%;
}

.right-to-left {
    border-width: 3px 3px 3px 0;
    border-style: solid;
    -webkit-border-image:
      -webkit-gradient(linear, 0 0, 100% 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
    -webkit-border-image:
      -webkit-linear-gradient(left, black, rgba(0, 0, 0, 0)) 1 100%;
    -moz-border-image:
      -moz-linear-gradient(left, black, rgba(0, 0, 0, 0)) 1 100%;
    -o-border-image:
      -o-linear-gradient(left, black, rgba(0, 0, 0, 0)) 1 100%;
    border-image:
      linear-gradient(to left, black, rgba(0, 0, 0, 0)) 1 100%;
}

Pseudo Element Edges

.ps-top-to-bottom { position: relative; border-top: 3px solid black; } .ps-top-to-bottom:before, .ps-top-to-bottom:after { content: ""; position: absolute; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent)); background-image: -webkit-linear-gradient(#000, transparent); background-image: -moz-linear-gradient(#000, transparent); background-image: -o-linear-gradient(#000, transparent); background-image: linear-gradient(#000, transparent); top: -3px; bottom: -3px; width: 3px; } .ps-top-to-bottom:before { left: -3px; } .ps-top-to-bottom:after { right: -3px; } .bot-left { position: relative; } .bot-left:before, .bot-left:after { content: ""; position: absolute; bottom: -3px; left: -3px; } .bot-left:before { top: -3px; width: 3px; background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000), to(transparent)); background-image: -webkit-linear-gradient(transparent, #000); background-image: -moz-linear-gradient(transparent, #000); background-image: -o-linear-gradient(transparent, #000); } .bot-left:after { right: -3px; height: 3px; background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#000), to(transparent)); background-image: -webkit-linear-gradient(left, #000, transparent); background-image: -moz-linear-gradient(left, #000, transparent); background-image: -o-linear-gradient(left, #000, transparent); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

.ps-top-to-bottom {
  position: relative;
  border-top: 3px solid black;
}
.ps-top-to-bottom:before, .ps-top-to-bottom:after {
  content: "";
  position: absolute;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(#000, transparent);
  background-image: -moz-linear-gradient(#000, transparent);
  background-image: -o-linear-gradient(#000, transparent);
  background-image: linear-gradient(#000, transparent);
  top: -3px;
  bottom: -3px;
  width: 3px;
}
.ps-top-to-bottom:before {
  left: -3px;
}
.ps-top-to-bottom:after {
  right: -3px;
}

.bot-left {
  position: relative;
}
.bot-left:before, .bot-left:after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: -3px;

}
.bot-left:before {
  top: -3px;
  width: 3px;
  background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(transparent, #000);
  background-image: -moz-linear-gradient(transparent, #000);
  background-image: -o-linear-gradient(transparent, #000);
}
.bot-left:after {
  right: -3px;
  height: 3px;
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(left, #000, transparent);
  background-image: -moz-linear-gradient(left, #000, transparent);
  background-image: -o-linear-gradient(left, #000, transparent);
}

Pseudo Element Block Knockout

.knockout-top-to-bottom { position: relative; } .knockout-top-to-bottom:before, .knockout-top-to-bottom:after { content: ""; position: absolute; } .knockout-top-to-bottom:before { top: -3px; left: -3px; bottom: 0; right: -3px; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent)); background-image: -webkit-linear-gradient(#000, transparent); background-image: -moz-linear-gradient(#000, transparent); background-image: -o-linear-gradient(#000, transparent); z-index: -2; } .knockout-top-to-bottom:after { z-index: -1; top: 0; left: 0; bottom: 0; right: 0; background: #a4b9ff; } .knockout-around { position: relative; } .knockout-around:before, .knockout-around:after { content: ""; position: absolute; } .knockout-around:before { top: -3px; left: -3px; right: -3px; bottom: -3px; background-image: -webkit-gradient(radial, right top, 10, 90% 0%, 150, from(#000), to(transparent)); background-image: -webkit-radial-gradient(right top, 150px 230px, #000, transparent); background-image: -moz-radial-gradient(right top, farthest-corner, #000 0%, transparent 72%); z-index: -2; } .knockout-around:after { top: 0; left: 0; bottom: 0; right: 0; background: #a4b9ff; z-index: -1; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

.knockout-top-to-bottom {
  position: relative;
}
.knockout-top-to-bottom:before, .knockout-top-to-bottom:after {
  content: "";
  position: absolute;
}
.knockout-top-to-bottom:before {
  top: -3px;
  left: -3px;
  bottom: 0;
  right: -3px;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(#000, transparent);
  background-image: -moz-linear-gradient(#000, transparent);
  background-image: -o-linear-gradient(#000, transparent);
  z-index: -2;
}
.knockout-top-to-bottom:after {
  z-index: -1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #a4b9ff;
}

.knockout-around {
  position: relative;
}
.knockout-around:before, .knockout-around:after {
  content: "";
  position: absolute;
}
.knockout-around:before {
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background-image: -webkit-gradient(radial, right top, 10, 90% 0%, 150, from(#000), to(transparent));
  background-image: -webkit-radial-gradient(right top, 150px 230px, #000, transparent);
  background-image: -moz-radial-gradient(right top, farthest-corner, #000 0%, transparent 72%);
  z-index: -2;
}
.knockout-around:after {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #a4b9ff;
  z-index: -1;
}

Multiple (Sized) Gradient Backgrounds

.multbg-top-to-bottom { border-top: 3px solid black; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent)); background-image: -webkit-linear-gradient(#000, transparent); background-image: -moz-linear-gradient(#000, transparent), -moz-linear-gradient(#000, transparent); background-image: -o-linear-gradient(#000, transparent), -o-linear-gradient(#000, transparent); background-image: linear-gradient(#000, transparent), linear-gradient(#000, transparent); -moz-background-size: 3px 100%; background-size: 3px 100%; background-position: 0 0, 100% 0; background-repeat: no-repeat; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.multbg-top-to-bottom {
  border-top: 3px solid black;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(#000, transparent);
  background-image:
      -moz-linear-gradient(#000, transparent),
      -moz-linear-gradient(#000, transparent);
  background-image:
      -o-linear-gradient(#000, transparent),
      -o-linear-gradient(#000, transparent);
  background-image:
      linear-gradient(#000, transparent),
      linear-gradient(#000, transparent);
  -moz-background-size: 3px 100%;
  background-size: 3px 100%;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
}

[Foundation 6] Un menu Foundation en vue Mobile et un menu full-custom en vue Desktop

11/07/2017 / admin

Foundation 6 permet de switcher facilement d’un type de menu à un autre par le biais de son composant Responsive Navigation. L’intérêt de se composant réside notamment dans le fait qu’on utilise le même code pour afficher son menu sur les supports Mobile/Desktop (il arrive souvent qu’un menu soit doublé pour ce type de besoin).

Cependant, Foundation 6 ne couvre pas l’ensemble des menus existants et il peut arriver qu’on ait besoin d’utiliser un menu Foundation pour une vue donnée, et qu’on soit obligé de développer un menu full-custom (un mega-menu dans notre cas) pour une autre vue.

Dans notre exemple, nous aurons un Drilldown en vue Mobile et un mega-menu en vue Desktop. Nous n’allons pas utiliser le composant Responsive Navigation, mais uniquement le Drilldown (voir lien plus haut) et exploiter les possibilités offertes par l’util Media Queries de Foundation 6.

L’astuce consiste à:

Désactiver les inclusions de « foundation-menu » et « foundation-drilldown-menu » dans le mixin « foundation-everything ». On ne va pas inclure ces mixins de manière globale, mais seulement lorsqu’on en a besoin.

Englober le markup HTML de notre menu dans une <div class="menu-corporate"></div> et lancer les inclusions de « foundation-menu » et « foundation-drilldown-menu » depuis cette classe…

…et ce en fonction d’un breakpoint (ce qui nous permettra de dire: « je veux mon menu Drilldown pour mon .menu-corporate et le breakpoint medium down uniquement.

ATTENTION: j’en ai chié avec ça, mais il faut s’assurer que la méthode _destroy ne soit déclenchée que si le markup du menu Drilldown est actif. Déclencher le destroy une première fois en vue Desktop va bien supprimer le markup du Drilldown, mais le déclencher une seconde fois va supprimer le markup nécessaire au off-canvas (<div class="off-canvas in-canvas-for-large position-left" id="headerMainNav" data-off-canvas>) !!!

/* * Drilldown menu (Mobile) */ function buildDrilldownMenuCorporate(){ new Foundation.Drilldown($menuCorporate); } function destroyDrilldownMenuCorporate(){ // Trigger _destroy event ONLY if Drilldown exists if($('.menu-corporate .is-drilldown').length == 1) { $menuCorporate.foundation('_destroy'); } } // end: Drilldown menu (Mobile)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/*
* Drilldown menu (Mobile)
*/
function buildDrilldownMenuCorporate(){
  new Foundation.Drilldown($menuCorporate);
}

function destroyDrilldownMenuCorporate(){
  // Trigger _destroy event ONLY if Drilldown exists
  if($('.menu-corporate .is-drilldown').length == 1) {
    $menuCorporate.foundation('_destroy');
  }
}
// end: Drilldown menu (Mobile)

Notez que c’est la fonctionnalité nested-off-canvas qui nous offre la possibilité d’utiliser le même code pour afficher son menu sur les supports Mobile/Desktop.

Markup HTML

<button type="button" class="button hide-for-medium" data-toggle="headerMainNav"> headerMainNav </button> <div class="menu-corporate"> <div class="off-canvas in-canvas-for-large position-left" id="headerMainNav" data-off-canvas> <ul id="menu-corporate" class="vertical menu drilldown level0" data-drilldown> <li class="section0"><a href="#">Entreprises</a> <ul class="vertical menu nested level1 menu-corporate-hidden"> <li class="section0"> <a href="#">Nos solutions selon votre taille</a> <ul class="vertical menu nested level2"> <li><a href="#">TPE</a></li> <li><a href="#">PME-PMI-ETI</a></li> <li><a href="#">Grands comptes</a></li> <li><a href="#">TNS indépendants</a></li> <li><a href="#">Cabinets comptables</a></li> <li><a href="#">Comités d'entreprises</a></li> <li><a href="#">Associations</a></li> </ul> </li> <li class="section1"> <a href="#">Nos solutions selon votre métier</a> <ul class="vertical menu nested level2"> <li><a href="#">Complémentaire santé collective</a></li> <li><a href="#">Prévoyance collective</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">dolor</a></li> <li><a href="#">sit amet ...</a></li> </ul> </li> <li class="section2"> <a href="#">Nos solutions selon vos besoins</a> <ul class="vertical menu nested level2"> <li><a href="#">Complémentaire santé collective</a></li> <li><a href="#">Prévoyance collective</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">dolor</a></li> <li><a href="#">sit amet ...</a></li> <li><a href="#">Lorem ipsum dolor sit amet ...</a></li> <li><a href="#">Toto</a></li> </ul> </li> </ul> </li> <li class="section1"><a href="#">Particuliers</a> <ul class="vertical menu nested level1 menu-corporate-hidden"> <li class="section0"> <a href="#">Complémentaire santé</a> <ul class="vertical menu nested level2"> <li><a href="#">Célibataire ou jeune couple</a></li> <li><a href="#">Maternité</a></li> <li><a href="#">Famille</a></li> <li><a href="#">50 ans et +</a></li> <li><a href="#">Frontalier</a></li> <li><a href="#">Surcomplémentaire</a></li> </ul> </li> <li class="section1"> <a href="#">Epargne - Retraite</a> <ul class="vertical menu nested level2"> <li><a href="#">Fiscalité des produits</a></li> <li><a href="#">Préparation retraite</a></li> <li><a href="#">Faire fructifier son épargne</a></li> <li><a href="#">Compléter ses revenus</a></li> <li><a href="#">Transmission de patrimoine</a></li> <li><a href="#">Assurance vie</a></li> </ul> </li> <li class="section2"> <a href="#">Prévoyance - Dépendance</a> <ul class="vertical menu nested level2"> <li><a href="#">Complémentaire santé collective</a></li> <li><a href="#">Prévoyance collective</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">dolor</a></li> <li><a href="#">sit amet ...</a></li> <li><a href="#">Lorem ipsum dolor sit amet ...</a></li> <li><a href="#">Toto</a></li> </ul> </li> <li class="section3"> <a href="#">Accédez à nos solutions selon votre situation</a> <ul class="vertical menu nested level2"> <li><a href="#">Complémentaire santé collective</a></li> <li><a href="#">Prévoyance collective</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">dolor</a></li> <li><a href="#">sit amet ...</a></li> <li><a href="#">Lorem ipsum dolor sit amet ...</a></li> <li><a href="#">Toto</a></li> </ul> </li> </ul> </li> <li class="section2"><a href="#">Groupe</a> <ul class="vertical menu nested level1 menu-corporate-hidden"> <li class="section0"> <a href="#">A propos de nous</a> <ul class="vertical menu nested level2"> <li><a href="#">Notre métier</a></li> <li><a href="#">Secteurs d'expertise</a></li> <li><a href="#">Partenaires</a></li> <li><a href="#">Certifications et démarche qualité</a></li> <li><a href="#">Nos implantations</a></li> <li><a href="#">Réseau international</a></li> <li><a href="#">Actualités</a></li> <li><a href="#">Ressources humaines</a></li> </ul> </li> <li class="section1"> <a href="#">Pour nous contacter</a> <ul class="vertical menu nested level2"> <li><a href="#">Support</a></li> <li><a href="#">Réclamations</a></li> <li><a href="#">Suggestions</a></li> <li><a href="#">Contact</a></li> </ul> </li> </ul> </li> </ul> </div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

<button type="button" class="button hide-for-medium" data-toggle="headerMainNav">
  headerMainNav
</button>

<div class="menu-corporate">

  <div class="off-canvas in-canvas-for-large position-left" id="headerMainNav" data-off-canvas>

      <ul id="menu-corporate" class="vertical menu drilldown level0" data-drilldown>
        <li class="section0"><a href="#">Entreprises</a>
          <ul class="vertical menu nested level1 menu-corporate-hidden">
            <li class="section0">
              <a href="#">Nos solutions selon votre taille</a>
              <ul class="vertical menu nested level2">
                <li><a href="#">TPE</a></li>
                <li><a href="#">PME-PMI-ETI</a></li>
                <li><a href="#">Grands comptes</a></li>
                <li><a href="#">TNS indépendants</a></li>
                <li><a href="#">Cabinets comptables</a></li>
                <li><a href="#">Comités d'entreprises</a></li>
                <li><a href="#">Associations</a></li>
              </ul>
            </li>
            <li class="section1">
              <a href="#">Nos solutions selon votre métier</a>
              <ul class="vertical menu nested level2">
                <li><a href="#">Complémentaire santé collective</a></li>
                <li><a href="#">Prévoyance collective</a></li>
                <li><a href="#">Lorem ipsum</a></li>
                <li><a href="#">dolor</a></li>
                <li><a href="#">sit amet ...</a></li>
              </ul>
            </li>
            <li class="section2">
              <a href="#">Nos solutions selon vos besoins</a>
              <ul class="vertical menu nested level2">
                <li><a href="#">Complémentaire santé collective</a></li>
                <li><a href="#">Prévoyance collective</a></li>
                <li><a href="#">Lorem ipsum</a></li>
                <li><a href="#">dolor</a></li>
                <li><a href="#">sit amet ...</a></li>
                <li><a href="#">Lorem ipsum dolor sit amet ...</a></li>
                <li><a href="#">Toto</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="section1"><a href="#">Particuliers</a>
          <ul class="vertical menu nested level1 menu-corporate-hidden">
            <li class="section0">
              <a href="#">Complémentaire santé</a>
              <ul class="vertical menu nested level2">
                <li><a href="#">Célibataire ou jeune couple</a></li>
                <li><a href="#">Maternité</a></li>
                <li><a href="#">Famille</a></li>
                <li><a href="#">50 ans et +</a></li>
                <li><a href="#">Frontalier</a></li>
                <li><a href="#">Surcomplémentaire</a></li>
              </ul>
            </li>
            <li class="section1">
              <a href="#">Epargne - Retraite</a>
              <ul class="vertical menu nested level2">
                <li><a href="#">Fiscalité des produits</a></li>
                <li><a href="#">Préparation retraite</a></li>
                <li><a href="#">Faire fructifier son épargne</a></li>
                <li><a href="#">Compléter ses revenus</a></li>
                <li><a href="#">Transmission de patrimoine</a></li>
                <li><a href="#">Assurance vie</a></li>
              </ul>
            </li>
            <li class="section2">
              <a href="#">Prévoyance - Dépendance</a>
              <ul class="vertical menu nested level2">
                <li><a href="#">Complémentaire santé collective</a></li>
                <li><a href="#">Prévoyance collective</a></li>
                <li><a href="#">Lorem ipsum</a></li>
                <li><a href="#">dolor</a></li>
                <li><a href="#">sit amet ...</a></li>
                <li><a href="#">Lorem ipsum dolor sit amet ...</a></li>
                <li><a href="#">Toto</a></li>
              </ul>
            </li>
            <li class="section3">
              <a href="#">Accédez à nos solutions selon votre situation</a>
              <ul class="vertical menu nested level2">
                <li><a href="#">Complémentaire santé collective</a></li>
                <li><a href="#">Prévoyance collective</a></li>
                <li><a href="#">Lorem ipsum</a></li>
                <li><a href="#">dolor</a></li>
                <li><a href="#">sit amet ...</a></li>
                <li><a href="#">Lorem ipsum dolor sit amet ...</a></li>
                <li><a href="#">Toto</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="section2"><a href="#">Groupe</a>
          <ul class="vertical menu nested level1 menu-corporate-hidden">
            <li class="section0">
              <a href="#">A propos de nous</a>
              <ul class="vertical menu nested level2">
                <li><a href="#">Notre métier</a></li>
                <li><a href="#">Secteurs d'expertise</a></li>
                <li><a href="#">Partenaires</a></li>
                <li><a href="#">Certifications et démarche qualité</a></li>
                <li><a href="#">Nos implantations</a></li>
                <li><a href="#">Réseau international</a></li>
                <li><a href="#">Actualités</a></li>
                <li><a href="#">Ressources humaines</a></li>
              </ul>
            </li>
            <li class="section1">
              <a href="#">Pour nous contacter</a>
              <ul class="vertical menu nested level2">
                <li><a href="#">Support</a></li>
                <li><a href="#">Réclamations</a></li>
                <li><a href="#">Suggestions</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>

  </div>
</div>

Code SASS

// Dans le mixin "foundation-everything" (extrait), on COMMENTE les inclusions de "foundation-menu" et "foundation-drilldown-menu". // Il faudra les appeler au cas par cas (voir juste en dessous). @mixin foundation-everything( $flex: false, $prototype: false ) { // @include foundation-menu; // @include foundation-drilldown-menu; }

1
2
3
4
5
6
7
8
9

// Dans le mixin "foundation-everything" (extrait), on COMMENTE les inclusions de "foundation-menu" et "foundation-drilldown-menu".
// Il faudra les appeler au cas par cas (voir juste en dessous).
@mixin foundation-everything(
  $flex: false,
  $prototype: false
) {
  // @include foundation-menu;
  // @include foundation-drilldown-menu;
}

// @include breakpoint(medium down) { .menu-corporate { @include foundation-menu; @include foundation-drilldown-menu; } } @include breakpoint(large) { // ici code pour mon mega menu full-custom qui n'hérite d'aucun style de "foundation-menu" et "foundation-drilldown-menu". .menu-corporate { // core &-outer { width: 100%; height: 100%; position: fixed; z-index: 1; top: 0; left: 0; background: navy; } &-hidden { display: none !important; } .menu { > li { z-index: 2; } } // skin .menu { // reset margin: 0; padding: 0; list-style-type: none; } .level0 { position: relative; @include flex-grid-row( $behavior: collapse); @include flex-align( $x: center, $y: stretch); > li { @include flex-grid-column( $columns: shrink, $gutters: 0); > a { line-height: 1; text-decoration: none; white-space: nowrap; display: block; padding: $menu-items-padding; background: pink; } } } .level1 { position: absolute; left: 0; @include flex-grid-row( $behavior: collapse); margin-left: 0; margin-right: 0; background: tomato; } .level2 {} [class*="section"] { border: 1px solid #000; } .section0 { .section0, .section1 { @include flex-grid-column( $columns: 6, $gutters: 0); } .section2 { @include flex-grid-column( $columns: 12, $gutters: 0); } } .section1 { .section0, .section1, .section2 { @include flex-grid-column( $columns: 4, $gutters: 0); } .section3 { @include flex-grid-column( $columns: 12, $gutters: 0); } } .section2 { .section0, .section1 { @include flex-grid-column( $columns: 6, $gutters: 0); } } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

//
@include breakpoint(medium down) {
  .menu-corporate {
    @include foundation-menu;
    @include foundation-drilldown-menu;
  }
}

@include breakpoint(large) {
  // ici code pour mon mega menu full-custom qui n'hérite d'aucun style de "foundation-menu" et "foundation-drilldown-menu".
  .menu-corporate {
    // core
    &-outer {
      width: 100%;
      height: 100%;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;

      background: navy;
    }
    &-hidden {
      display: none !important;
    }
    .menu {
      > li {
        z-index: 2;
      }
    }

    // skin
    .menu {
      // reset
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    .level0 {
      position: relative;
      @include flex-grid-row(
        $behavior: collapse);
      @include flex-align(
        $x: center,
        $y: stretch);
      > li {
        @include flex-grid-column(
          $columns: shrink,
          $gutters: 0);
        > a {
          line-height: 1;
          text-decoration: none;
          white-space: nowrap;
          display: block;
          padding: $menu-items-padding;

          background: pink;
        }
      }
    }
    .level1 {
      position: absolute;
      left: 0;
      @include flex-grid-row(
        $behavior: collapse);
      margin-left: 0;
      margin-right: 0;

      background: tomato;
    }
    .level2 {}

    [class*="section"] {
      border: 1px solid #000;
    }

    .section0 {
      .section0,
      .section1 {
        @include flex-grid-column(
          $columns: 6,
          $gutters: 0);
      }
      .section2 {
        @include flex-grid-column(
          $columns: 12,
          $gutters: 0);
      }
    }
    .section1 {
      .section0,
      .section1,
      .section2 {
        @include flex-grid-column(
          $columns: 4,
          $gutters: 0);
      }
      .section3 {
        @include flex-grid-column(
          $columns: 12,
          $gutters: 0);
      }
    }
    .section2 {
      .section0,
      .section1 {
        @include flex-grid-column(
          $columns: 6,
          $gutters: 0);
      }
    }
  }
}

Code jQuery

/* * Global variables */ var bpMobile = ['small', 'medium']; var bpDesktop = ['large', 'xlarge', 'xxlarge']; /* * Corporate menu * - mobile: Foundation 6 Drilldown; * - desktop: custom Dropdown (mega menu) */ var $menuCorporate = $('#menu-corporate'); // On page load, if Mobile if($.inArray(Foundation.MediaQuery.current, bpMobile) != -1) { buildDrilldownMenuCorporate(); } // On page load, if Desktop else if($.inArray(Foundation.MediaQuery.current, bpDesktop) != -1) { destroyDrilldownMenuCorporate(); $('.menu-corporate .level0 > li[class*="section"]').on('mouseenter', openMegaMenuCorporate); $(document).on('mouseover','.menu-corporate-outer', closeMegaMenuCorporate); } $(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) { // if enters any Mobile if(newSize == 'small' || newSize == 'medium') { $('.menu-corporate .level0 > li[class*="section"]').on('mouseenter', closeMegaMenuCorporate); buildDrilldownMenuCorporate(); } // if enters any Desktop else if(newSize == 'large' || newSize == 'xlarge' || newSize == 'xxlarge') { destroyDrilldownMenuCorporate(); $('.menu-corporate .level0 > li[class*="section"]').on('mouseenter', openMegaMenuCorporate); $(document).on('mouseover','.menu-corporate-outer', closeMegaMenuCorporate); } }); /* * Drilldown menu (Mobile) */ function buildDrilldownMenuCorporate(){ new Foundation.Drilldown($menuCorporate); } function destroyDrilldownMenuCorporate(){ // Trigger _destroy event ONLY if Drilldown exists if($('.menu-corporate .is-drilldown').length == 1) { $menuCorporate.foundation('_destroy'); } } // end: Drilldown menu (Mobile) /* * Mega menu (Desktop) */ function openMegaMenuCorporate() { var $this = $(this); if($('.menu-corporate-outer').length <= 0){ $('<div class="menu-corporate-outer" />').insertBefore('.menu-corporate'); } $('.level1:not(.menu-corporate-hidden)').addClass('menu-corporate-hidden').removeAttr('style'); if(!$this.hasClass('in-path')){ $this.addClass('in-path').siblings('li[class*="section"]').removeClass('in-path'); $('.menu-corporate .level1').find('li[class*="section"]').removeClass('in-path'); } $this.children('.menu-corporate .level1').removeClass('menu-corporate-hidden'); // Center-align sublevel function centerAlignSubLevel() { var hoveredElementPosition = $this.position().left; var hoveredElementWidth = $this.width(); var activeSubLevelWidth = $this.children('.level1').width(); var hoveredElementMiddlePosition = hoveredElementPosition + (hoveredElementWidth / 2); $this.children('.menu-corporate .level1').css('left', hoveredElementMiddlePosition - (activeSubLevelWidth / 2)); } centerAlignSubLevel(); $(window).on('resize', centerAlignSubLevel()); } function closeMegaMenuCorporate() { $('.menu-corporate .level1').removeAttr('style'); $('.menu-corporate .level1:not(.menu-corporate-hidden)').addClass('menu-corporate-hidden'); $('.menu-corporate li[class*="section"]').removeClass('in-path'); $('.menu-corporate-outer').detach(); } // end: Mega menu (Desktop) // end: Corporate menu

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

/*
* Global variables
*/
var bpMobile = ['small', 'medium'];
var bpDesktop = ['large', 'xlarge', 'xxlarge'];

/*
* Corporate menu
* - mobile: Foundation 6 Drilldown;
* - desktop: custom Dropdown (mega menu)
*/

var $menuCorporate = $('#menu-corporate');

// On page load, if Mobile
if($.inArray(Foundation.MediaQuery.current, bpMobile) != -1) {
  buildDrilldownMenuCorporate();
}
// On page load, if Desktop
else if($.inArray(Foundation.MediaQuery.current, bpDesktop) != -1) {
  destroyDrilldownMenuCorporate();
  $('.menu-corporate .level0 > li[class*="section"]').on('mouseenter', openMegaMenuCorporate);
  $(document).on('mouseover','.menu-corporate-outer', closeMegaMenuCorporate);
}

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) {
  // if enters any Mobile
  if(newSize == 'small' || newSize == 'medium') {
    $('.menu-corporate .level0 > li[class*="section"]').on('mouseenter', closeMegaMenuCorporate);
    buildDrilldownMenuCorporate();
  }
  // if enters any Desktop
  else if(newSize == 'large' || newSize == 'xlarge' || newSize == 'xxlarge') {
    destroyDrilldownMenuCorporate();
    $('.menu-corporate .level0 > li[class*="section"]').on('mouseenter', openMegaMenuCorporate);
    $(document).on('mouseover','.menu-corporate-outer', closeMegaMenuCorporate);
  }
});

/*
* Drilldown menu (Mobile)
*/
function buildDrilldownMenuCorporate(){
  new Foundation.Drilldown($menuCorporate);
}

function destroyDrilldownMenuCorporate(){
  // Trigger _destroy event ONLY if Drilldown exists
  if($('.menu-corporate .is-drilldown').length == 1) {
    $menuCorporate.foundation('_destroy');
  }
}
// end: Drilldown menu (Mobile)

/*
* Mega menu (Desktop)
*/
function openMegaMenuCorporate() {
  var $this = $(this);

  if($('.menu-corporate-outer').length <= 0){
    $('<div class="menu-corporate-outer" />').insertBefore('.menu-corporate');
  }

  $('.level1:not(.menu-corporate-hidden)').addClass('menu-corporate-hidden').removeAttr('style');

  if(!$this.hasClass('in-path')){
    $this.addClass('in-path').siblings('li[class*="section"]').removeClass('in-path');
    $('.menu-corporate .level1').find('li[class*="section"]').removeClass('in-path');
  }

  $this.children('.menu-corporate .level1').removeClass('menu-corporate-hidden');

  // Center-align sublevel
  function centerAlignSubLevel() {
    var hoveredElementPosition = $this.position().left;
    var hoveredElementWidth = $this.width();
    var activeSubLevelWidth = $this.children('.level1').width();
    var hoveredElementMiddlePosition = hoveredElementPosition + (hoveredElementWidth / 2);

    $this.children('.menu-corporate .level1').css('left', hoveredElementMiddlePosition - (activeSubLevelWidth / 2));
  }

  centerAlignSubLevel();
  $(window).on('resize', centerAlignSubLevel());
}

function closeMegaMenuCorporate() {
  $('.menu-corporate .level1').removeAttr('style');
  $('.menu-corporate .level1:not(.menu-corporate-hidden)').addClass('menu-corporate-hidden');
  $('.menu-corporate li[class*="section"]').removeClass('in-path');
  $('.menu-corporate-outer').detach();
}
// end: Mega menu (Desktop)

// end: Corporate menu

[jQuery] Stocker plusieurs données dans une variable sous forme de tableau et interroger la variable pour savoir si elle contient une donnée ou pas

11/07/2017 / admin

Source: https://stackoverflow.com/questions/13509669/find-out-if-a-variable-is-in-an-array

var bpMobile = ['small', 'medium']; var bpDesktop = ['large', 'xlarge', 'xxlarge'];

1
2

    var bpMobile = ['small', 'medium'];
    var bpDesktop = ['large', 'xlarge', 'xxlarge'];

if($.inArray(Foundation.MediaQuery.current, bpMobile) != -1){ alert('Mobile!'); } else { alert('Desktop!'); }

1
2
3
4
5

    if($.inArray(Foundation.MediaQuery.current, bpMobile) != -1){
      alert('Mobile!');
    } else {
      alert('Desktop!');
    }

[Foundation 6] Un off-canvas qui prend 50% de la largeur de la fenêtre

07/07/2017 / admin

Sources JS et SASS maintenues à jour ici : https://github.com/franklang/foundation-sites-plugins.

Dans notre example, le off-canvas de droite prend prend 50% de la largeur de la fenêtre pour les écrans medium et supérieurs.

Les plugins Foundation offcanvas, box (util), mediaquery (util) sont obligatoires.

HTML

http://foundation.zurb.com/sites/docs/off-canvas.html

SASS

#offCanvasRight.is-open { transform: translateX(0) !important; }

1
2
3

#offCanvasRight.is-open {
  transform: translateX(0) !important;
}

jQuery

;(function ($, window, undefined){ /** * foundation.widerOffcanvas.js plugin * * Extends "Foundation for Sites" v6.4.1 off-canvas plugin * to provide a wider than 250px-standard width off-canvas. * * [WARNING] Tested for right-positioned off-canvas only so far. * * Required third-party components: * - foundation.core.js * - foundation.offcanvas.js * - foundation.util.box.js * * Usage: * $(document).widerOffcanvas({ * triggeringBreakpoint: 'medium', * offCanvasID: '#offCanvasRight', * pageID: '#page-wrapper' * }); */ $.fn.widerOffcanvas = function(options){ var defaults = { triggeringBreakpoint: 'medium', // one of Foundation's breakpoint (small, medium, large, ...) offCanvasID: '#offCanvasRight', // target offcanvas element ID pageID: '#page-wrapper' // page ID } var settings = $.extend({}, defaults, options); /** * Destroy function (more of a DOM reset actually...) */ function destroyWiderOffCanvas() { $(settings.offCanvasID, settings.pageID).attr('style', ''); } /** * Set wider off-canvas specific width */ function setWiderOffCanvasWidth() { var globalWidth = Foundation.Box.GetDimensions(document.getElementById('globalWidth')); var pageSideMarginWidth = (globalWidth.parentDims.width - globalWidth.width)/2; var baseWiderOffCanvasWidth = globalWidth.parentDims.width/2.33333; var widerOffCanvasWidth = pageSideMarginWidth + baseWiderOffCanvasWidth; console.log(pageSideMarginWidth + ', ' + baseWiderOffCanvasWidth + ', ' + widerOffCanvasWidth); $(settings.offCanvasID).css({ 'width': widerOffCanvasWidth, '-webkit-transform': 'translateX(' + widerOffCanvasWidth + 'px)', '-ms-transform': 'translateX(' + widerOffCanvasWidth + 'px)', 'transform': 'translateX(' + widerOffCanvasWidth + 'px)' }); } /** * Set page indent value (page slides to the opposite side regarding where off-canvas opens) */ function setPageIndentValue() { var globalWidth = Foundation.Box.GetDimensions(document.getElementById('globalWidth')); var baseWiderOffCanvasWidth = globalWidth.parentDims.width/2.33333; $(settings.offCanvasID).on('opened.zf.offcanvas', function() { $(settings.pageID).css({ '-webkit-transform': 'translateX(-' + baseWiderOffCanvasWidth + 'px)', '-ms-transform': 'translateX(-' + baseWiderOffCanvasWidth + 'px)', 'transform': 'translateX(-' + baseWiderOffCanvasWidth + 'px)' }); }).on('closed.zf.offcanvas', function() { $(settings.pageID).attr('style', ' '); }); } /** * On document ready... */ if (Foundation.MediaQuery.atLeast(settings.triggeringBreakpoint)) { setWiderOffCanvasWidth(); setPageIndentValue(); } /** * On window resize... */ $(window).on('resize', function() { destroyWiderOffCanvas(); var globalWidth = Foundation.Box.GetDimensions(document.getElementById('globalWidth')); if (Foundation.MediaQuery.atLeast(settings.triggeringBreakpoint)) { setWiderOffCanvasWidth(); setPageIndentValue(); } }); }; }(jQuery, window));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

;(function ($, window, undefined){

  /**
   * foundation.widerOffcanvas.js plugin
   *
   * Extends "Foundation for Sites" v6.4.1 off-canvas plugin
   * to provide a wider than 250px-standard width off-canvas.
   *
   * [WARNING] Tested for right-positioned off-canvas only so far.
   *
   * Required third-party components:
   * - foundation.core.js
   * - foundation.offcanvas.js
   * - foundation.util.box.js
   *
   * Usage:
   * $(document).widerOffcanvas({
   *   triggeringBreakpoint: 'medium',
   *   offCanvasID: '#offCanvasRight',
   *   pageID: '#page-wrapper'
   * });
   */

  $.fn.widerOffcanvas = function(options){

    var defaults = {
      triggeringBreakpoint: 'medium', // one of Foundation's breakpoint (small, medium, large, ...)
      offCanvasID: '#offCanvasRight', // target offcanvas element ID
      pageID: '#page-wrapper' // page ID
    }

    var settings = $.extend({}, defaults, options);

    /**
     * Destroy function (more of a DOM reset actually...)
     */
    function destroyWiderOffCanvas() {
      $(settings.offCanvasID, settings.pageID).attr('style', '');
    }

    /**
     * Set wider off-canvas specific width
     */
    function setWiderOffCanvasWidth() {
      var globalWidth = Foundation.Box.GetDimensions(document.getElementById('globalWidth'));
      var pageSideMarginWidth = (globalWidth.parentDims.width - globalWidth.width)/2;
      var baseWiderOffCanvasWidth = globalWidth.parentDims.width/2.33333;
      var widerOffCanvasWidth = pageSideMarginWidth + baseWiderOffCanvasWidth;
      console.log(pageSideMarginWidth + ', ' + baseWiderOffCanvasWidth + ', ' + widerOffCanvasWidth);

      $(settings.offCanvasID).css({
        'width': widerOffCanvasWidth,
        '-webkit-transform': 'translateX(' + widerOffCanvasWidth + 'px)',
        '-ms-transform': 'translateX(' + widerOffCanvasWidth + 'px)',
        'transform': 'translateX(' + widerOffCanvasWidth + 'px)'
      });
    }

    /**
     * Set page indent value (page slides to the opposite side regarding where off-canvas opens)
     */
    function setPageIndentValue() {
      var globalWidth = Foundation.Box.GetDimensions(document.getElementById('globalWidth'));
      var baseWiderOffCanvasWidth = globalWidth.parentDims.width/2.33333;

      $(settings.offCanvasID).on('opened.zf.offcanvas', function() {
        $(settings.pageID).css({
          '-webkit-transform': 'translateX(-' + baseWiderOffCanvasWidth + 'px)',
          '-ms-transform': 'translateX(-' + baseWiderOffCanvasWidth + 'px)',
          'transform': 'translateX(-' + baseWiderOffCanvasWidth + 'px)'
        });
      }).on('closed.zf.offcanvas', function() {
        $(settings.pageID).attr('style', ' ');
      });
    }

    /**
     * On document ready...
     */
    if (Foundation.MediaQuery.atLeast(settings.triggeringBreakpoint)) {
      setWiderOffCanvasWidth();
      setPageIndentValue();
    }

    /**
     * On window resize...
     */
    $(window).on('resize', function() {
      destroyWiderOffCanvas();

      var globalWidth = Foundation.Box.GetDimensions(document.getElementById('globalWidth'));

      if (Foundation.MediaQuery.atLeast(settings.triggeringBreakpoint)) {
        setWiderOffCanvasWidth();
        setPageIndentValue();
      }
    });
  };

}(jQuery, window));

[Foundation 6] Une fonction pour récupérer les valeurs des breakpoints Current, From, To

07/07/2017 / admin

Code source maintenu ici : https://github.com/franklang/foundation-sites-js-utils/tree/master.

Cette fonction permet de récupérer, au chargement de la page :

la valeur (Current) du breakpoint en cours.

Puis chaque fois que la largeur de la fenêtre est modifiée (redimensionnement, passage portrait/paysage, autre…) :

la valeur (From) du breakpoint précédent,

la valeur (to) du nouveau breakpoint en cours.

// Foundation 6 MediaQuery info function function zfMediaQueryInfo() { var currentSize = Foundation.MediaQuery.current; console.log('Current: ' + currentSize); $(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) { console.log('From: ' + oldSize + ' to: ' + newSize); var medium2small = oldSize == 'medium' && newSize == 'small'; var medium2large = oldSize == 'medium' && newSize == 'large'; if(medium2small){ console.log('from MEDIUM to SMALL'); } if(medium2large){ console.log('from MEDIUM to LARGE'); } }); } zfMediaQueryInfo();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// Foundation 6 MediaQuery info function
function zfMediaQueryInfo() {
  var currentSize = Foundation.MediaQuery.current;
  console.log('Current: ' + currentSize);

  $(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) {
    console.log('From: ' + oldSize + ' to: ' + newSize);

    var medium2small = oldSize == 'medium' && newSize == 'small';
    var medium2large = oldSize == 'medium' && newSize == 'large';

    if(medium2small){
     console.log('from MEDIUM to SMALL');
    }
    if(medium2large){
     console.log('from MEDIUM to LARGE');
    }
  });
}
zfMediaQueryInfo();

[Foundation 6 for sites] L’erreur « Uncaught TypeError: t.getBoundingClientRect is not a function » à l’utilisation de Box (Javascript utilities)

07/07/2017 / admin

Lien vers la doc officielle de la fonction: http://foundation.zurb.com/sites/docs/javascript-utilities.html#box

Ticket décrivant l’erreur si mauvaise utilisation: Issue using javascript utilities

Codepen reproduisant l’erreur: ZF6 Box util

Solution:

<div id="globalWidth"></div>

1

<div id="globalWidth"></div>

var globalWidth = Foundation.Box.GetDimensions(document.getElementById('globalWidth')); console.log(globalWidth);

1
2

    var globalWidth = Foundation.Box.GetDimensions(document.getElementById('globalWidth'));
    console.log(globalWidth);

[Drupal 7] Monter en version de jQuery avec le plugin jQuery Multi

07/07/2017 / admin

Nativement, Drupal 7 est livré avec la version 1.4.4 de jQuery. Cette version est nécessaire pour faire fonctionner correctement la partie administration et quelques widgets et modules populaires du front.

Il existe un plugin jQuery Update, mais il ne permet de monter que jusqu’à la version 2.1.x.

Le plugin jQuery Multi permet quant à lui d’utiliser une version plus récente (au choix du développeur).

Avant toute installation, créer un dossier <racine_de_mon_projet>/sites/all/libraries/jquery/ qui contient la version de jQuery qu’on souhaite utiliser. Le libellé du fichier doit être sous la forme suivante: jquery-<version>.js. Exemple: jquery-3.0.0.min.js.

Installer ensuite le module. On peu le faire avec Drush et la commande suivante (qui permet d’installer et d’activer le module immédiatement) :

drush drush en <module_name> -y

1

drush drush en <module_name> -y

Chaque plugin jQuery que vous souhaiterez utiliser sous couvert de la version déclarée par le plugin jqmulti devra:

être copié dans <racine_de_mon_projet>/sites/all/libraries/ (à chaque librairie son dossier)

être déclaré via le BO. Sous Configuration > Systeme > jQuery Multi Settings

Pour finir, n’oubliez pas que le code devant être exécuté avec jQuery 3.0.0 devra être encapsulé de la sorte avec un alias jq300 (pour « jQuery-3.0.0 ») :

(function($){ jQuery(document).ready(function(){ // Foundation plugins initialization $(document).foundation(); // off-canvas var globalWidth = Foundation.Box.GetDimensions(document.getElementById('globalWidth')); console.log(globalWidth); }); })(jq300);

1
2
3
4
5
6
7
8
9
10

(function($){
  jQuery(document).ready(function(){
    // Foundation plugins initialization
    $(document).foundation();

    // off-canvas
    var globalWidth = Foundation.Box.GetDimensions(document.getElementById('globalWidth'));
    console.log(globalWidth);
  });
})(jq300);

[Drupal 7] Les différentes techniques pour ajouter/supprimer des ressources CSS/JS

06/07/2017 / admin

Ressources généralistes sur le sujet :

Drupal 7: Taking control of CSS and JS aggregation

Supprimer les CSS Core :

Peut se faire par le biais du hook_css_alter via le fichier template.php du thème.

Attention: dans le cas ou certaines CSS sont déclarées comme étant des dépendances du module contrib, il ne faut pas déclarer le module contrib mais ce qui semblent être des sous-modules… (en commentaires dans l’exemple ci-dessous, les déclarations qui ne fonctionnent pas) :

// unset($css[drupal_get_path('module', 'contrib').'/date/date_api/date.css']); // unset($css[drupal_get_path('module', 'contrib').'/date/date_popup/themes/datepicker.1.7.css']); unset($css[drupal_get_path('module', 'date').'/date_api/date.css']); unset($css[drupal_get_path('module', 'date').'/date_popup/themes/datepicker.1.7.css']); // unset($css[drupal_get_path('module', 'contrib').'/logintoboggan/logintoboggan.css']); unset($css[drupal_get_path('module', 'logintoboggan').'/logintoboggan.css']); // unset($css[drupal_get_path('module', 'contrib').'/css/views.css']); // unset($css[drupal_get_path('module', 'contrib').'/css/ckeditor.css']); // unset($css[drupal_get_path('module', 'contrib').'/media/modules/media_wysiwyg/css/media_wysiwyg.base.css']); // unset($css[drupal_get_path('module', 'contrib').'/admin_menu/admin_menu.css']); // unset($css[drupal_get_path('module', 'contrib').'/admin_menu/admin_menu.uid1.css']); unset($css[drupal_get_path('module', 'views').'/css/views.css']); unset($css[drupal_get_path('module', 'ckeditor').'/css/ckeditor.css']); unset($css[drupal_get_path('module', 'media_wysiwyg').'/css/media_wysiwyg.base.css']); unset($css[drupal_get_path('module', 'admin_menu').'/admin_menu.css']); unset($css[drupal_get_path('module', 'admin_menu').'/admin_menu.uid1.css']); // unset($css[drupal_get_path('module', 'contrib').'/css/ctools.css']); unset($css[drupal_get_path('module', 'ctools').'/css/ctools.css']); // unset($css[drupal_get_path('module', 'contrib').'/adminimal_admin_menu/adminimal_admin_menu.css']); // unset($css[drupal_get_path('module', 'contrib').'/adminimal_admin_menu/js/slicknav/slicknav.css']); unset($css[drupal_get_path('module', 'adminimal_admin_menu').'/adminimal_admin_menu.css']); unset($css[drupal_get_path('module', 'adminimal_admin_menu').'/js/slicknav/slicknav.css']);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

    // unset($css[drupal_get_path('module', 'contrib').'/date/date_api/date.css']);
    // unset($css[drupal_get_path('module', 'contrib').'/date/date_popup/themes/datepicker.1.7.css']);
    unset($css[drupal_get_path('module', 'date').'/date_api/date.css']);
    unset($css[drupal_get_path('module', 'date').'/date_popup/themes/datepicker.1.7.css']);
    // unset($css[drupal_get_path('module', 'contrib').'/logintoboggan/logintoboggan.css']);
    unset($css[drupal_get_path('module', 'logintoboggan').'/logintoboggan.css']);
    // unset($css[drupal_get_path('module', 'contrib').'/css/views.css']);
    // unset($css[drupal_get_path('module', 'contrib').'/css/ckeditor.css']);
    // unset($css[drupal_get_path('module', 'contrib').'/media/modules/media_wysiwyg/css/media_wysiwyg.base.css']);
    // unset($css[drupal_get_path('module', 'contrib').'/admin_menu/admin_menu.css']);
    // unset($css[drupal_get_path('module', 'contrib').'/admin_menu/admin_menu.uid1.css']);
    unset($css[drupal_get_path('module', 'views').'/css/views.css']);
    unset($css[drupal_get_path('module', 'ckeditor').'/css/ckeditor.css']);
    unset($css[drupal_get_path('module', 'media_wysiwyg').'/css/media_wysiwyg.base.css']);
    unset($css[drupal_get_path('module', 'admin_menu').'/admin_menu.css']);
    unset($css[drupal_get_path('module', 'admin_menu').'/admin_menu.uid1.css']);
    // unset($css[drupal_get_path('module', 'contrib').'/css/ctools.css']);
    unset($css[drupal_get_path('module', 'ctools').'/css/ctools.css']);
    // unset($css[drupal_get_path('module', 'contrib').'/adminimal_admin_menu/adminimal_admin_menu.css']);
    // unset($css[drupal_get_path('module', 'contrib').'/adminimal_admin_menu/js/slicknav/slicknav.css']);
    unset($css[drupal_get_path('module', 'adminimal_admin_menu').'/adminimal_admin_menu.css']);
    unset($css[drupal_get_path('module', 'adminimal_admin_menu').'/js/slicknav/slicknav.css']);

…ce qui nous donne au propre :

function my_theme_css_alter(&$css) { /** * Drupal Tutorial: Remove System CSS and JS files * https://www.jnorton.co.uk/drupal-tutorial-remove-system-css-js-files */ unset($css[drupal_get_path('module', 'system').'/system.base.css']); unset($css[drupal_get_path('module', 'system').'/system.menus.css']); unset($css[drupal_get_path('module', 'system').'/system.messages.css']); unset($css[drupal_get_path('module', 'system').'/system.theme.css']); unset($css[drupal_get_path('module', 'contextual').'/contextual.css']); unset($css[drupal_get_path('module', 'comment').'/comment.css']); unset($css[drupal_get_path('module', 'date').'/date_api/date.css']); unset($css[drupal_get_path('module', 'date').'/date_popup/themes/datepicker.1.7.css']); unset($css[drupal_get_path('module', 'field').'/theme/field.css']); unset($css[drupal_get_path('module', 'logintoboggan').'/logintoboggan.css']); unset($css[drupal_get_path('module', 'node').'/node.css']); unset($css[drupal_get_path('module', 'search').'/search.css']); unset($css[drupal_get_path('module', 'user').'/user.css']); unset($css[drupal_get_path('module', 'views').'/css/views.css']); unset($css[drupal_get_path('module', 'ckeditor').'/css/ckeditor.css']); unset($css[drupal_get_path('module', 'media_wysiwyg').'/css/media_wysiwyg.base.css']); unset($css[drupal_get_path('module', 'admin_menu').'/admin_menu.css']); unset($css[drupal_get_path('module', 'admin_menu').'/admin_menu.uid1.css']); unset($css[drupal_get_path('module', 'ctools').'/css/ctools.css']); unset($css[drupal_get_path('module', 'adminimal_admin_menu').'/adminimal_admin_menu.css']); unset($css[drupal_get_path('module', 'adminimal_admin_menu').'/js/slicknav/slicknav.css']); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

function my_theme_css_alter(&$css)
{
    /**
    * Drupal Tutorial: Remove System CSS and JS files
    * https://www.jnorton.co.uk/drupal-tutorial-remove-system-css-js-files
    */
    unset($css[drupal_get_path('module', 'system').'/system.base.css']);
    unset($css[drupal_get_path('module', 'system').'/system.menus.css']);
    unset($css[drupal_get_path('module', 'system').'/system.messages.css']);
    unset($css[drupal_get_path('module', 'system').'/system.theme.css']);

    unset($css[drupal_get_path('module', 'contextual').'/contextual.css']);

    unset($css[drupal_get_path('module', 'comment').'/comment.css']);
    unset($css[drupal_get_path('module', 'date').'/date_api/date.css']);
    unset($css[drupal_get_path('module', 'date').'/date_popup/themes/datepicker.1.7.css']);
    unset($css[drupal_get_path('module', 'field').'/theme/field.css']);
    unset($css[drupal_get_path('module', 'logintoboggan').'/logintoboggan.css']);
    unset($css[drupal_get_path('module', 'node').'/node.css']);
    unset($css[drupal_get_path('module', 'search').'/search.css']);
    unset($css[drupal_get_path('module', 'user').'/user.css']);
    unset($css[drupal_get_path('module', 'views').'/css/views.css']);
    unset($css[drupal_get_path('module', 'ckeditor').'/css/ckeditor.css']);
    unset($css[drupal_get_path('module', 'media_wysiwyg').'/css/media_wysiwyg.base.css']);
    unset($css[drupal_get_path('module', 'admin_menu').'/admin_menu.css']);
    unset($css[drupal_get_path('module', 'admin_menu').'/admin_menu.uid1.css']);

    unset($css[drupal_get_path('module', 'ctools').'/css/ctools.css']);
    unset($css[drupal_get_path('module', 'adminimal_admin_menu').'/adminimal_admin_menu.css']);
    unset($css[drupal_get_path('module', 'adminimal_admin_menu').'/js/slicknav/slicknav.css']);
}

Charger/Ne pas charger certaines ressources CSS/JS si l’utilisateur est anonyme/connecté:

Avec les hooks user_is_anonymous et user_is_logged_in:

function my_theme_css_alter(&$css) { // On dégage la CSS suivante, peu importe le statut anonyme/connecté de l'utilisateur : unset($css[drupal_get_path('module', 'system').'/system.base.css']); // On dégage la CSS suivante si l'utilisateur est anonyme : if(user_is_anonymous()) { unset($css[drupal_get_path('module', 'contextual').'/contextual.css']); } // On dégage la CSS suivante si l'utilisateur est connecté : if(user_is_logged_in()) { unset($css[drupal_get_path('module', 'comment').'/comment.css']); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function my_theme_css_alter(&$css)
{
    // On dégage la CSS suivante, peu importe le statut anonyme/connecté de l'utilisateur :
    unset($css[drupal_get_path('module', 'system').'/system.base.css']);

    // On dégage la CSS suivante si l'utilisateur est anonyme :
    if(user_is_anonymous()) {
        unset($css[drupal_get_path('module', 'contextual').'/contextual.css']);
    }

    // On dégage la CSS suivante si l'utilisateur est connecté :
    if(user_is_logged_in()) {
        unset($css[drupal_get_path('module', 'comment').'/comment.css']);
    }
}

Remplacer la version de jQuery par défaut (via CDN)

[Doc officielle Drupal 7] Using Newer Versions of jQuery

Drupal 7 override jquery js file in custom theme

Peut se faire par le biais du hook_js_alter via le fichier template.php du thème :

/** * Drupal 7 override jquery js file in custom theme * https://stackoverflow.com/questions/22900307/drupal-7-override-jquery-js-file-in-custom-theme#answer-22931513 */ function my_theme_js_alter(&$js) { $jqKey = "my-new-jquery"; // a key for new jquery file entry $js[$jqKey] = $js['misc/jquery.js']; // copy the default jquery settings, so you don't have to re-type them. $js[$jqKey]['data'] = "https://code.jquery.com/jquery-2.1.0.min.js"; // the path for new jquery file. $js[$jqKey]['version'] = '2.1.0'; // your jquery version. unset($js['misc/jquery.js']); // delete drupal's default jquery file. }

1
2
3
4
5
6
7
8
9
10
11
12
13

/**
* Drupal 7 override jquery js file in custom theme
* https://stackoverflow.com/questions/22900307/drupal-7-override-jquery-js-file-in-custom-theme#answer-22931513
*/
function my_theme_js_alter(&$js)
{
    $jqKey = "my-new-jquery"; // a key for new jquery file entry
    $js[$jqKey] = $js['misc/jquery.js']; // copy the default jquery settings, so you don't have to re-type them.
    $js[$jqKey]['data'] = "https://code.jquery.com/jquery-2.1.0.min.js"; // the path for new jquery file.
    $js[$jqKey]['version'] = '2.1.0'; // your jquery version.

    unset($js['misc/jquery.js']); // delete drupal's default jquery file.
}

Articles récents

Catégories

Archives

Méta

Mois : juillet 2017

[CSS] Un background off-container

Pas totalement valide car ajoute un léger scroll horizontal

Un *tain d’exemple qui marche:

Une alternative intéressante

[CSS] Des cercles responsive dont les dimensions s’adaptent de manière homothétique

[CSS] Des bordures en dégradé

border-image and linear-gradient

Pseudo Element Edges

Pseudo Element Block Knockout

Multiple (Sized) Gradient Backgrounds

[Foundation 6] Un menu Foundation en vue Mobile et un menu full-custom en vue Desktop

Markup HTML

Code SASS

Code jQuery

[jQuery] Stocker plusieurs données dans une variable sous forme de tableau et interroger la variable pour savoir si elle contient une donnée ou pas

[Foundation 6] Un off-canvas qui prend 50% de la largeur de la fenêtre

HTML

SASS

jQuery

[Foundation 6] Une fonction pour récupérer les valeurs des breakpoints Current, From, To

[Foundation 6 for sites] L’erreur « Uncaught TypeError: t.getBoundingClientRect is not a function » à l’utilisation de Box (Javascript utilities)

[Drupal 7] Monter en version de jQuery avec le plugin jQuery Multi

[Drupal 7] Les différentes techniques pour ajouter/supprimer des ressources CSS/JS

Ressources généralistes sur le sujet :

Supprimer les CSS Core :

Charger/Ne pas charger certaines ressources CSS/JS si l’utilisateur est anonyme/connecté:

Remplacer la version de jQuery par défaut (via CDN)