Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- <link href="https://fonts.googleapis.com/css?family=Merriweather:300,900&display=swap" rel="stylesheet"> -->
<button id="headerMenuButton"></button>
<section id="menu">
  <nav>
    <p><strong><a href="">Notre histoire</a></strong> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod laoreet dolore magna <strong><a href="">Nos produits</a></strong> aliqua erat volutpat. Ut wisi enim ad minim veniam, qui <strong><a href="">Contact</a></strong></p>
  </nav>
  <div id="imgMenuWrapper">
    <div class="img img-1"></div>
    <div class="img img-2"></div>    
  </div>
</section>
              
            
!

CSS

              
                body
  font-family: 'Merriweather', serif
  background: IndianRed
  &::after
    content: 'What a nice menu !'
    position: absolute
    top: 45%
    width: 100%
    text-align: center
    font-size: 9vw
    font-weight: 900
    z-index: -1
    color: LightSalmon
#headerMenuButton
  position: absolute
  left: 85vw
  top: 5vw
  background: #000
  color: #fff
  width: 9vw
  height: 9vw
  font-size: 4.5vw
  border-radius: 9vw
  text-align: center
  display: flex
  align-items: center
  justify-content: center
  cursor: pointer
  z-index: 2
  border: none
  outline: none
  position: relative
  transition: transform .45s cubic-bezier(.17,.67,.3,1.33)
  &:hover
    transform: translateZ(0) scale(1.25)
  &::before, &::after
    position: absolute
  &::before
    content: '\2a2f'
  &::after
    content: '\2630'
  + #menu
    width: 100vw
    height: 100vh
    background: #f5ebe1
    bottom: 100%
    position: absolute
    display: flex
    nav
      width: 100%
      padding: 12% 5% 5%
      font-size: 2.5vmax
      line-height: 8vmax
      display: flex
      align-items: center
      a
        color: inherit
      + #imgMenuWrapper
        width: 45%
        position: absolute
        right: 0
        height: 100%
        display: none
        grid-auto-flow: column
        grid-template-columns: 1fr 15%
        >.img
          background: no-repeat round top/80% url('https://si2.photorapide.com/invites/photos/2019/11/13uflk.jpg')
          animation: movinGressin 2s linear infinite
          @keyframes movinGressin
            0%
              background-position-y: 0vh
            100%
              background-position-y: 100vh
          &:last-child
            animation-direction: reverse
            display: none
          
@media (min-width: 340px)
  #headerMenuButton
    + #menu
      nav
        font-size: 3vmax
        line-height: 10vmax
@media (min-width: 600px)
  #headerMenuButton
    left: 10%
    + #menu
      nav
        width: 45%
        padding: 11vw 0 0 3vmax
        font-size: 2vmax
        line-height: 3.5vmax
        + #imgMenuWrapper
          display: grid
  @media (max-aspect-ratio: 65/29)
    #headerMenuButton
      + #menu
        nav
          line-height: 6vmax
@media (min-width: 777px)
  #headerMenuButton
    &::after
      content: 'Menu'
      font-size: 2.5vw
@media (min-width: 1000px)
  #headerMenuButton
    width: 7vw
    height: 7vw
    border-radius: 5vw
    &::before
      font-size: 2.9vw
    &::after
      font-size: 2vw
    + #menu
      nav
        display: block
        + #imgMenuWrapper
          grid-template-columns: repeat(2, 1fr)
          > .img
            background-size: contain
            &:last-child
              display: block
              
            
!

JS

              
                console.clear()

gsap.registerPlugin(CSSRulePlugin)

const
    tl01 = gsap.timeline({
        paused: true,
        onReverseComplete: () => gsap.set(hMB, {clearProps:"all"})
    }),
    timeline = tl => {
      tl.reversed() ? tl.play().timeScale(1) : tl.reverse()//.timeScale(1.25)
    },
    hMB = document.getElementById('headerMenuButton'),
    menu = document.getElementById('menu'),
    menuContent = [
      document.querySelector('#menu>nav'),
      document.querySelector('#menu>div')
    ]

hMB.addEventListener('click', () => timeline(tl01))

tl01
  .to(
    hMB,
    {duration: .4, top: '-3vw', color: 'rgba(255,255,255,0)', scale: .5, ease: 'power4.inOut'}
  )
  .to(
    CSSRulePlugin.getRule('#headerMenuButton::after'),
    {duration: .4, cssRule: {opacity: 0}, ease: 'power4.in'}, '<'
  )
  .from(
    CSSRulePlugin.getRule('#headerMenuButton::before'),
    {duration: .4, ease: 'power4.in', cssRule: {opacity: 0}}, '-=0.2'
  )
  .to(
    menu, {duration: .4,
    bottom: 0, ease: 'power4.inOut'}
  )
  .from(
    menuContent,
    {duration: .4, opacity: 0, ease: 'power4.in'}, '<'
  )
  .to(
    hMB,
    {duration: .4, top: '5vw', color: 'rgba(255,255,255,1)', scale: 1, ease: 'power4.inOut'}, '-=1'
  )
  .reversed(true)
              
            
!
999px

Console