Skip to content

Instantly share code, notes, and snippets.

@wezoalves

wezoalves/tailwind.navigation.html

Created August 29, 2023 19:05
Show Gist options
  • Save wezoalves/8a2d5502e3ce6a5e0eac690651e15511 to your computer and use it in GitHub Desktop.
Save wezoalves/8a2d5502e3ce6a5e0eac690651e15511 to your computer and use it in GitHub Desktop.
Download ZIP
navigation tailwind html
Raw
tailwind.navigation.html
<header class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-4 py-12 mb-0 pb-0">
<div class="container mx-auto">
<nav>
<div class="sm:hidden relative w-11/12 mx-auto bg-white rounded">
<div class="absolute inset-0 m-auto mr-4 z-0 w-6 h-6">
<svg xmlns="http://www.w3.org/2000/svg" class="dark:stroke-zinc-950 stroke-gray-50" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<polyline points="8 9 12 5 16 9" />
<polyline points="16 15 12 19 8 15" />
</svg>
</div>
<select name="navigation" aria-label="Selected tab" class="mobile-menu form-select block w-full p-3 border-0 shadow dark:shadow-white dark:drop-shadow-none rounded text-gray-600 appearance-none bg-transparent relative z-10">
<option class="text-sm text-gray-600" value="menu1" selected>Menu 1</option>
<option class="text-sm text-gray-600" value="menu2">Menu 2</option>
<option class="text-sm text-gray-600" value="menu3">Menu 3</option>
<option class="text-sm text-gray-600" value="menu4">Menu 4</option>
<option class="text-sm text-gray-600" value="menu5">Menu 5</option>
</select>
</div>
<div class="xl:w-full xl:mx-0 h-12 hidden sm:block bg-white dark:bg-zinc-950 shadow rounded dark:shadow-white dark:drop-shadow-none">
<div class="flex border-0 px-5">
<svg style="width: 46px;margin-right: 35px;padding: 0;" class="fill-zinc-950 dark:fill-gray-50" xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 639 639">
<path d="M341.1 104.5c-7.2 2-10.6 4.3-17.3 11.2-3.1 3.2-56.2 66.5-118 140.8-61.8 74.2-128.5 154.3-148.2 178-36.6 43.8-43.1 52.4-44.2 58.3-1.4 7.3 6.5 10.6 28.1 11.8 13.8.8 19.6-.6 27.6-7 5.8-4.6 12.4-12.2 67.9-79.5 17.9-21.7 46.7-56.6 63.9-77.5 17.3-21 38.7-46.9 47.6-57.6 8.8-10.7 29.8-36.2 46.6-56.5 16.9-20.4 41.9-50.7 55.7-67.4 41.3-50 41.8-53.9 7.2-55.5-8.7-.5-12.8-.2-16.9.9zm105.9.6c-4.3 1.7-7.3 4.1-14.3 11.3C422.5 127 133.8 473.7 128 482.3c-4.2 6.2-5.9 12-4.3 14.6 1.8 3.1 8.3 5.2 20.5 6.8 19 2.5 27 .5 37.5-9 3-2.8 26.7-30.7 52.6-62.1 25.9-31.4 58.6-71.1 72.7-88.1 14.1-17.1 50.3-60.9 80.5-97.5 30.2-36.6 64.7-78.4 76.8-93 30.1-36.5 33.5-43.6 23-48.2-3.9-1.7-7.3-2.1-19.7-2.4-13.6-.4-15.6-.2-20.6 1.7zm115.2 10c-8.1 1.4-15.5 5.4-22.5 12.2-8.3 8.1-106.1 125.6-111.9 134.4-10.4 15.8-14.3 26.8-14.3 40.8 0 11.4 2 18.7 8.6 31.5 7.1 13.7 8 14.8 102.9 129.8 37.6 45.7 37 45.2 66.3 45.2 12.2 0 15.7-.3 17.5-1.6 5.1-3.6 3.2-6.6-27.3-43.9-12.1-14.8-34.2-41.9-49-60-14.8-18.2-32.6-39.9-39.5-48.3-18.4-22.6-26.6-33.7-31.2-42.8-4-7.7-4.1-8.4-3-12 1.5-5.1 8-15.8 15.6-25.9 3.4-4.5 31.1-38.1 61.6-74.8 30.5-36.7 57-68.8 58.8-71.4 6-8.4 5.3-11.8-3-13.4-5.5-1-22.7-.9-29.6.2z"/>
</svg>
<button data-value="menu1" class="menu-button focus:outline-none focus:text-zinc-500 text-sm pt-3 rounded-t dark:text-white text-zinc-950 mr-12 hover:text-zinc-500 cursor-pointer">
<div class="flex items-center mb-3">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-home" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<polyline points="5 12 3 12 12 3 21 12 19 12" />
<path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
<path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
</svg>
<span class="ml-1 font-normal">Frases</span>
</div>
<div class="w-full h-1 bg-gray-700 rounded-t-md hidden" ></div>
</button>
<button data-value="menu2" class="menu-button focus:outline-none focus:text-zinc-500 text-sm pt-3 rounded-t dark:text-white text-zinc-950 mr-12 hover:text-zinc-500 cursor-pointer">
<div class="flex items-center mb-3">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<circle cx="12" cy="12" r="2" />
<path d="M2 12l1.5 2a11 11 0 0 0 17 0l1.5 -2" />
<path d="M2 12l1.5 -2a11 11 0 0 1 17 0l1.5 2" />
</svg>
<span class="ml-1 font-normal">Qr Code</span>
</div>
<div class="w-full h-1 bg-gray-700 rounded-t-md hidden"></div>
</button>
<button data-value="menu3" class="menu-button focus:outline-none focus:text-zinc-500 text-sm pt-3 rounded-t dark:text-white text-zinc-950 mr-12 hover:text-zinc-500 cursor-pointer">
<div class="flex items-center mb-3">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<circle cx="12" cy="12" r="2" />
<path d="M2 12l1.5 2a11 11 0 0 0 17 0l1.5 -2" />
<path d="M2 12l1.5 -2a11 11 0 0 1 17 0l1.5 2" />
</svg>
<span class="ml-1 font-normal">Equipe</span>
</div>
<div class="w-full h-1 bg-gray-700 rounded-t-md hidden"></div>
</button>
<button data-value="menu4" class="menu-button focus:outline-none focus:text-zinc-500 text-sm pt-3 rounded-t dark:text-white text-zinc-950 mr-12 hover:text-zinc-500 cursor-pointer">
<div class="flex items-center mb-3">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<circle cx="12" cy="12" r="2" />
<path d="M2 12l1.5 2a11 11 0 0 0 17 0l1.5 -2" />
<path d="M2 12l1.5 -2a11 11 0 0 1 17 0l1.5 2" />
</svg>
<span class="ml-1 font-normal">Empresas</span>
</div>
<div class="w-full h-1 bg-gray-700 rounded-t-md hidden"></div>
</button>
<button data-value="menu5" class="menu-button focus:outline-none focus:text-zinc-500 text-sm pt-3 rounded-t dark:text-white text-zinc-950 mr-12 hover:text-zinc-500 cursor-pointer">
<div class="flex items-center mb-3">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<circle cx="12" cy="12" r="2" />
<path d="M2 12l1.5 2a11 11 0 0 0 17 0l1.5 -2" />
<path d="M2 12l1.5 -2a11 11 0 0 1 17 0l1.5 2" />
</svg>
<span class="ml-1 font-normal">Contatos</span>
</div>
<div class="w-full h-1 bg-gray-700 rounded-t-md hidden"></div>
</button>
</div>
</div>
</nav>
<!--Code for navigation ends-->
</div>
</header>
<script>
document.addEventListener('DOMContentLoaded', function () {
const menuButtons = document.querySelectorAll('.menu-button');
const mobileMenu = document.querySelector('.mobile-menu');
menuButtons.forEach(button => {
button.addEventListener('click', function () {
const selectedValue = this.getAttribute('data-value');
for (let i = 0; i < mobileMenu.options.length; i++) {
if (mobileMenu.options[i].value === selectedValue) {
mobileMenu.selectedIndex = i;
break;
}
}
menuButtons.forEach(btn => {
btn.classList.remove('active');
btn.children[1].classList.add("hidden");
});
this.classList.add('active');
this.children[1].classList.remove("hidden");
});
});
mobileMenu.addEventListener('change', function () {
const selectedValue = this.value;
menuButtons.forEach(btn => {
if (btn.getAttribute('data-value') === selectedValue) {
btn.classList.add('active');
btn.children[1].classList.remove("hidden");
} else {
btn.classList.remove('active');
btn.children[1].classList.add("hidden");
}
});
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment