Jump to content

Jonsuh Hamburger menu

Recommended Posts

  • Replies 7
  • Views 1.3k
  • Created
  • Last Reply
7 hours ago, ZFarnworth2019 said:

Site URL: https://www.warnermedia.com

Hi all,

Hope you are all well. 

Recently or a few years ago WarnerMedia Used the Hamburgers menu from Jonsuh and I love that hamburgers menu! and im wanting to get that Hamburgers menu on to my site. Jonsuh has allready uploaded the files onto github, Any help would be appreciated.

My Squarespace Site is: https://www.ztfmedia.co.uk

They used spring style menu, I think this is a good start to replicate the animation, add this into Design->Custom CSS
 

.burger-inner div {
	display: none !important;
}
.header-burger-btn .burger-inner:after, .header-burger-btn .burger-inner:before {
    transition-property: all;
    transition-duration: 0.25s;
    transition-timing-function: ease-in-out;
    transition-delay: 0.10s;
    width: 18px;
    height: 3px;
    border-radius: 30px;
    background-color: #fff;
}
.header-burger-btn .burger-inner:after, 
.header-burger-btn .burger-inner:before {
    display: block;
    content: '';
}

.header-burger-btn .burger-inner, 
.header-burger-btn .burger-inner:after, 
.header-burger-btn .burger-inner:before {
    position: absolute;
    width: 40px;
    height: 4px;
    transition-timing-function: ease;
    transition-duration: .15s;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform,-webkit-transform;
    border-radius: 4px;
    background-color: #000;
}

.header-burger-btn.burger--active .burger-inner, 
.header-burger-btn.burger--active .burger-inner:after, 
.header-burger-btn.burger--active .burger-inner:before {
	background-color: #fac824;
}

.header-burger-btn .burger-inner {
    top: 2px;
    transition: background-color 0s linear .13s
}

.header-burger-btn .burger-inner:before {
    top: 10px;
    transition: top .1s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)
}

.header-burger-btn .burger-inner:after {
    top: 20px;
    transition: top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)
}

.header-burger-btn.burger--active .burger-inner {
    transition-delay: .22s;
    background-color: transparent!important
}

.header-burger-btn.burger--active .burger-inner:before {
    top: 0;
    transition: top .1s cubic-bezier(.33333,0,.66667,.33333) .15s,transform .13s cubic-bezier(.215,.61,.355,1) .22s;
    transform: translate3d(0,7px,0) rotate(45deg)
}

.header-burger-btn.burger--active .burger-inner:after {
    top: 0;
    transition: top .2s cubic-bezier(.33333,0,.66667,.33333),transform .13s cubic-bezier(.215,.61,.355,1) .22s;
    transform: translate3d(0,7px,0) rotate(-45deg)
}

.header-burger-btn-r .burger-inner {
    top: auto;
    bottom: 0;
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(.55,.055,.675,.19);
    transition-duration: .13s
}

.header-burger-btn-r .burger-inner:after {
    top: -20px;
    transition: top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,opacity 0s linear
}

.header-burger-btn-r .burger-inner:before {
    transition: top .1s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)
}

.header-burger-btn-r.burger--active .burger-inner {
    transition-delay: .22s;
    transition-timing-function: cubic-bezier(.215,.61,.355,1);
    transform: translate3d(0,-10px,0) rotate(-45deg)
}

.header-burger-btn-r.burger--active .burger-inner:after {
    top: 0;
    transition: top .2s cubic-bezier(.33333,0,.66667,.33333),opacity 0s linear .22s;
    opacity: 0
}

.header-burger-btn-r.burger--active .burger-inner:before {
    top: 0;
    transition: top .1s cubic-bezier(.33333,0,.66667,.33333) .15s,transform .13s cubic-bezier(.215,.61,.355,1) .22s;
    transform: rotate(90deg)
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

work well here

image.thumb.png.a6d64b93315de6081a21d06ff4608d72.png

image.png.f84f65409553c7728781487cbb23cea8.png

Take screen of the custom css panel, do you see any warning/issues

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 4 weeks later...
On 4/10/2021 at 3:30 PM, ZFarnworth2019 said:

Ive added it to where you have said but it has not applied it.

try this tool to pickup which effect suits you

[Free Share] Custom Hamburger Animation - Coding and Customization - Squarespace Forum

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 5 weeks later...
On 5/4/2021 at 4:35 PM, bangank36 said:

Hi @bangank36 - I tried to add this to my Brine template website under Design > Custom CSS, and it doesn't seem to be active on either mobile, or desktop. Are you able to help?

URL > https://begonia-cyan-wpr4.squarespace.com/

Pass > Access21

Thanks!

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.