Navigation System A

SoulSections HTML

<div class="relative type bg-p-900 text-p-50 px-5% py-sm md:py-xs">

    <!-- 	TABLET/DESKTOP NAV -->
    <div class="max-w-screen-xl mx-auto flex items-center justify-between">
        <a href="/" class="inline-block">Logo here</a>

        <nav class="hidden md:block flex-shrink-0 ">
            <ul class="flex space-x-8">
                <li class="mb-0i"><a href="#" class="inline-block p-4">About</a></li>
                <li class="mb-0i"><a href="#" class="inline-block p-4">Services</a></li>
                <li class="mb-0i"><a href="#" class="inline-block p-4">Contact</a></li>

            </ul>
        </nav>

        <!-- 		MOBILE NAV -->
        <div class="soulmagic-dropdown md:hidden">
            <button class="burger block relative">

                <!-- 				burger svg -->
                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 showifclosed opener" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                </svg>

                <!-- 				x svg -->
                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 absolute top-0 showifopen closer" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>

            </button>
            <nav id="mobilenav" class="absolute left-0 top-full w-full p--md bg-p-800 bg-opacity-95 z-10">
                <ul class="max-w-screen-xl mx-auto flex flex-col">
                    <li><a href="#" class="inline-block py-4">About</a></li>
                    <li><a href="#" class="inline-block py-4">Services</a></li>
                    <li><a href="#" class="inline-block py-4">Contact</a></li>

                </ul>
            </nav>
        </div>
    </div>

</div>

SoulMagic XML

<soulmagic id="dropdown">

    <set targets="#mobilenav" vars='{"autoAlpha":"0","y":"-16","display":"none"}'></set>
    <set targets=".closer" vars='{"autoAlpha":"0"}'></set>

	
    <trigger event="click" clicker=".burger" clickAway="nav"></trigger>

    
	<timeline direction="in">
        <to targets="#mobilenav" vars='{"autoAlpha":"1","y":"0","display":"block","ease":"power2.out","duration":".3"}'></to>

        <to targets=".opener" vars='{"autoAlpha":"0"}' position="0"></to>
        <to targets=".closer" vars='{"autoAlpha":"1"}' position="0"></to>
    </timeline>

    <timeline direction="out">
        <to targets="#mobilenav" vars='{"autoAlpha":"0","y":"-16","ease":"power2.in","duration":".15"}'></to>
        <to targets=".opener" vars='{"autoAlpha":"1"}' position="0"></to>
        <to targets=".closer" vars='{"autoAlpha":"0"}' position="0"></to>
    </timeline>

</soulmagic>