heroweb/examples/images/navigation.html
2024-10-31 07:24:12 +01:00

34 lines
1.5 KiB
HTML

<template id="navigation-template">
<div class="nav-container">
<nav>
<a href="#" class="logo">OURWORLD</a>
<div class="nav-links">
<div class="nav-item" @click="toggleSubmenu('about')" @click.away="menuStates.about = false">
About
<div class="submenu" :class="{ 'active': menuStates.about }">
<a href="#our-story">Our Story</a>
<a href="#mission">Mission</a>
<a href="#team">Team</a>
</div>
</div>
<div class="nav-item" @click="toggleSubmenu('work')" @click.away="menuStates.work = false">
Projects
<div class="submenu" :class="{ 'active': menuStates.work }">
<a href="#projects">Projects</a>
<a href="#case-studies">Case Studies</a>
<a href="#impact">Impact</a>
</div>
</div>
<div class="nav-item" @click="toggleSubmenu('contact')" @click.away="menuStates.contact = false">
Contact
<div class="submenu" :class="{ 'active': menuStates.contact }">
<a href="#get-in-touch">Get in Touch</a>
<a href="#locations">Locations</a>
<a href="#careers">Join us.</a>
</div>
</div>
</div>
</nav>
</div>
</template>