I’m working on a svelte project where I have a top bar with a few menus. When I hover over the menus a dropdown will appear below with some menu items. Some menu items have subitems that I want to appear to the side when the menu item is clicked. I can’t figure out how to make the subitems appear.
Here is my code so far:
App.svelte
<script lang="ts">
import TopBar from './lib/TopBar.svelte'
</script>
<main>
<TopBar/>
</main>
TopBar.svelte
<script>
let menuItems = [
{
text: "item 1",
subMenus: []
},
{
text: "item 2",
subMenus: [
{
text: "sub item 1"
},
{
text: "sub item 2"
}
]
},
]
let menus = [
{
text: 'Menu 1',
menuItems: menuItems
},
{
text: 'Menu 2',
menuItems: menuItems
}
]
</script>
<div id='topbar'>
{#each menus as menu}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="topbar-menu">
<p class="menu-text">{menu.text}</p>
<div class="dropdown-content rounded-b-lg">
{#each menu.menuItems as menuItem}
<button class="menu-item">
<p class="menu-item-text">{menuItem.text}</p>
{#if menuItem.subMenus.length > 0}
<p>▶</p>
{/if}
</button>
{/each}
</div>
</div>
{/each}
</div>
<style>
#topbar {
position: absolute;
top: 0;
width: 100%;
display: flex;
justify-content: center;
}
.menu-text{
padding: 0 1rem;
}
.topbar-menu:hover{
background-color: #818181;
}
.dropdown-content {
/*height: 0;*/
display: flex;
flex-direction: column;
position: absolute;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
background-color: #f9f9f9;
color: #3a3a3a;
border: solid 1px #e5e7eb;
/*transition: height 100ms linear;*/
clip-path: inset(0% 0% 100% 0%);
position: absolute;
transition-property: clip-path;
transition-duration: 300ms;
transition-timing-function: ease
}
.topbar-menu:hover > .dropdown-content,
.dropdown-content:hover {
clip-path: inset(0% 0% 0% 0%);
}
.menu-item {
display: flex;
background-color: #f9f9f9;
color: #3a3a3a;
border: none;
}
.menu-item-text{
margin-right: 1rem
}
</style>
Anything I have tried just had the submenu confined to the dropdown menu and I can’t get it to appear outside the dropdown.
You need to sign in to view this answers