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

32 lines
1.8 KiB
HTML

<div class="nav-container" up-nav>
<nav>
<a href="home.html" class="logo" up-target="[up-fragment='content']">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="about/story.html" up-target="[up-fragment='content']">Our Story</a>
<a href="about/mission.html" up-target="[up-fragment='content']">Mission</a>
<a href="about/team.html" up-target="[up-fragment='content']">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/list.html" up-target="[up-fragment='content']">Projects</a>
<a href="projects/cases.html" up-target="[up-fragment='content']">Case Studies</a>
<a href="projects/impact.html" up-target="[up-fragment='content']">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="contact/touch.html" up-target="[up-fragment='content']">Get in Touch</a>
<a href="contact/locations.html" up-target="[up-fragment='content']">Locations</a>
<a href="contact/careers.html" up-target="[up-fragment='content']">Join us.</a>
</div>
</div>
</div>
</nav>
</div>