An experimental nav bar with a nifty hamburger animation. Leverages a SoulMagic click event and a custom-made burger icon.
Share on:
<soulmagic id="burger" users=".burger-parent">
<set targets=".mobile-nav-panel">
<opacity>0</opacity>
<clip-path>inset(0% 0% 0% 100%)</clip-path>
</set>
<set targets=".topline">
<opacity>1</opacity>
<transform-origin>left</transform-origin>
</set>
<set targets=".bottomline">
<transform-origin>left</transform-origin>
</set>
<set targets="li">
<opacity>0</opacity>
<x-percent>10</x-percent>
<backface-visibility>hidden</backface-visibility>
</set>
<event type="click" trigger="button" away=".mobile-nav-panel"></event>
<!-- IN TIMELINE -->
<timeline>
<to targets=".topline" position="0">
<rotation>45</rotation>
<y>-1</y>
<x>4</x>
<duration>.4</duration>
</to>
<to targets=".midline" position="0">
<opacity>0</opacity>
<x-percent>-100</x-percent>
<duration>.4</duration>
</to>
<to targets=".bottomline" position="0">
<rotation>-45</rotation>
<y>1</y>
<x>4</x>
<duration>.4</duration>
</to>
<to targets=".overlay" scope="html" position="0">
<opacity>1</opacity>
<duration>.4</duration>
</to>
<to targets=".mobile-nav-panel" position="-=.3">
<opacity>1</opacity>
<duration>.4</duration>
<clip-path>inset(0% 0% 0% 0%)</clip-path>
</to>
<to targets="li" position="-=.3">
<opacity>1</opacity>
<x-percent>0</x-percent>
<rotation>.01</rotation>
<stagger>.1</stagger>
</to>
</timeline>
<!-- OUT TIMELINE -->
<timeline>
<to targets=".topline" position="0">
<rotation>0</rotation>
<y>0</y>
<x>0</x>
<duration>.2</duration>
</to>
<to targets=".midline" position="0">
<opacity>1</opacity>
<x-percent>0</x-percent>
<duration>.2</duration>
</to>
<to targets=".bottomline" position="0">
<rotation>0</rotation>
<y>0</y>
<x>0</x>
<duration>.2</duration>
</to>
<to targets=".overlay" scope="html" position="0">
<opacity>0</opacity>
<duration>.4</duration>
</to>
<to targets=".mobile-nav-panel" position="0">
<opacity>0</opacity>
<clip-path>inset(0% 0% 0% 100%)</clip-path>
<duration>.3</duration>
<ease>power2.in</ease>
</to>
<to targets="li" position="0">
<opacity>0</opacity>
<x-percent>10</x-percent>
<stagger>.05</stagger>
</to>
</timeline>
</soulmagic>
<!-- .nava -->
<div class="nava // fixed-ob left-0 top-0 // w-full p--sm z-10 // bg-p-900 text-p-50">
<div class="flex items-center justify-between // max-w--doc">
<!-- .logo -->
<div class="logo">
<a href="/">Logo / Company</a>
</div>
<!-- .globalnav -->
<div class="globalnav // hidden lg:block // dropdown-parent">
<button>Menu</button>
</div>
<!-- .mobilenav -->
<div class="mobilenav // lg:hiddenx // burger-parent">
<!-- .burger -->
<button class="burger // relative flex flex-col // inline-block z-50" style="width:25px; height:18px">
<span class="absolute block w-full h-2px bg-p-50 // topline" style="top:0px;"></span>
<span class="absolute block w-full h-2px bg-p-50 // midline" style="top:8px;"></span>
<span class="absolute block w-full h-2px bg-p-50 // bottomline" style="top:16px"></span>
</button>
<div class="overlay // absolute top-0 left-0 // w-full h-screen bg-p-900 bg-opacity-80 z-10 opacity-0"></div>
<!-- .mobile-nav-panel -->
<div class="absolute top-0 left-0 // flex items-center // w-full h-screen px-doc // bg-p-900 z-10 mobile-nav-panel">
<nav>
<ul class="text-5xl md:text-7xl lg:text-8xl font-semibold tracking-tight text-a-200 space-y-4" style="line-height:1">
<li>
<a href="">About</a>
</li>
<li>
<a href="">Services</a>
</li>
<li>
<a href="">Portfolio</a>
</li>
<li>
<a href="">Contact</a>
</li>
<li>
<a href="">Schmontact</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<soulmagic id="burger" users=".burger-parent"> <set targets=".mobile-nav-panel"> <opacity>0</opacity> <clip-path>inset(0% 0% 0% 100%)</clip-path> </set> <set targets=".topline"> <opacity>1</opacity> <transform-origin>left</transform-origin> </set> <set targets=".bottomline"> <transform-origin>left</transform-origin> </set> <set targets="li"> <opacity>0</opacity> <x-percent>10</x-percent> <backface-visibility>hidden</backface-visibility> </set> <event type="click" trigger="button" away=".mobile-nav-panel"></event> <!-- IN TIMELINE --> <timeline> <to targets=".topline" position="0"> <rotation>45</rotation> <y>-1</y> <x>4</x> <duration>.4</duration> </to> <to targets=".midline" position="0"> <opacity>0</opacity> <x-percent>-100</x-percent> <duration>.4</duration> </to> <to targets=".bottomline" position="0"> <rotation>-45</rotation> <y>1</y> <x>4</x> <duration>.4</duration> </to> <to targets=".overlay" scope="html" position="0"> <opacity>1</opacity> <duration>.4</duration> </to> <to targets=".mobile-nav-panel" position="-=.3"> <opacity>1</opacity> <duration>.4</duration> <clip-path>inset(0% 0% 0% 0%)</clip-path> </to> <to targets="li" position="-=.3"> <opacity>1</opacity> <x-percent>0</x-percent> <rotation>.01</rotation> <stagger>.1</stagger> </to> </timeline> <!-- OUT TIMELINE --> <timeline> <to targets=".topline" position="0"> <rotation>0</rotation> <y>0</y> <x>0</x> <duration>.2</duration> </to> <to targets=".midline" position="0"> <opacity>1</opacity> <x-percent>0</x-percent> <duration>.2</duration> </to> <to targets=".bottomline" position="0"> <rotation>0</rotation> <y>0</y> <x>0</x> <duration>.2</duration> </to> <to targets=".overlay" scope="html" position="0"> <opacity>0</opacity> <duration>.4</duration> </to> <to targets=".mobile-nav-panel" position="0"> <opacity>0</opacity> <clip-path>inset(0% 0% 0% 100%)</clip-path> <duration>.3</duration> <ease>power2.in</ease> </to> <to targets="li" position="0"> <opacity>0</opacity> <x-percent>10</x-percent> <stagger>.05</stagger> </to> </timeline> </soulmagic> <!-- .nava --> <div class="nava // fixed-ob left-0 top-0 // w-full p--sm z-10 // bg-p-900 text-p-50"> <div class="flex items-center justify-between // max-w--doc"> <!-- .logo --> <div class="logo"> <a href="/">Logo / Company</a> </div> <!-- .globalnav --> <div class="globalnav // hidden lg:block // dropdown-parent"> <button>Menu</button> </div> <!-- .mobilenav --> <div class="mobilenav // lg:hiddenx // burger-parent"> <!-- .burger --> <button class="burger // relative flex flex-col // inline-block z-50" style="width:25px; height:18px"> <span class="absolute block w-full h-2px bg-p-50 // topline" style="top:0px;"></span> <span class="absolute block w-full h-2px bg-p-50 // midline" style="top:8px;"></span> <span class="absolute block w-full h-2px bg-p-50 // bottomline" style="top:16px"></span> </button> <div class="overlay // absolute top-0 left-0 // w-full h-screen bg-p-900 bg-opacity-80 z-10 opacity-0"></div> <!-- .mobile-nav-panel --> <div class="absolute top-0 left-0 // flex items-center // w-full h-screen px-doc // bg-p-900 z-10 mobile-nav-panel"> <nav> <ul class="text-5xl md:text-7xl lg:text-8xl font-semibold tracking-tight text-a-200 space-y-4" style="line-height:1"> <li> <a href="">About</a> </li> <li> <a href="">Services</a> </li> <li> <a href="">Portfolio</a> </li> <li> <a href="">Contact</a> </li> <li> <a href="">Schmontact</a> </li> </ul> </nav> </div> </div> </div> </div>
Ready to use this component in your Beaver Builder sites?
Copy the snippet from the Code tab (above) into a SoulSections module with SoulMagic also installed. That’s it.
Need the Soul Plugins? Get the bundle.