Nuxt•3w ago

Fix postition for <a> and expand the main div downward

Hi all.. I don't know what I don't see but I'm trying to fix the <a> position and show the menu under it in the main div without moving the whole main div tryin to get the border around everything to be sure that it is one menu

<template>
  <div
    @mouseenter="showDropdown"
    @mouseleave="hideDropdown"
    class="relative inline-block border"
  >
    <a
      :href="to"
      :class="[Globals.getColor(color, true)]"
      class="px-2 rounded-lg text-center font-bold md:h-min h-14 md:text-base text-lg py-2 flex items-center gap-2"
    >
      {{ title }}
      <img
        :class="{ 'rotate-180': isOpen }"
        class="h-3 transition-transform duration-300 ease-in-out"
        src="~/assets/images/symbols/arrow.svg"
        alt="menu-arrow"
      />
    </a>

    <div
      v-if="isOpen"
      class="absolute left-0 w-max hidden z-50 mt-2 bg-blue-500 bg-opacity-70 backdrop-blur-md rounded-lg p-3 md:flex"
    >
      <div class="flex flex-col gap-2 items-start">
        <slot></slot>
      </div>
    </div>

    <div v-if="isOpen" class="md:hidden top-full bg-opacity-70 backdrop-blur-md rounded-lg mt-2 mb-4 ml-4 flex">
      <div class="flex flex-col gap-2 items-start">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<template>
  <div
    @mouseenter="showDropdown"
    @mouseleave="hideDropdown"
    class="relative inline-block border"
  >
    <a
      :href="to"
      :class="[Globals.getColor(color, true)]"
      class="px-2 rounded-lg text-center font-bold md:h-min h-14 md:text-base text-lg py-2 flex items-center gap-2"
    >
      {{ title }}
      <img
        :class="{ 'rotate-180': isOpen }"
        class="h-3 transition-transform duration-300 ease-in-out"
        src="~/assets/images/symbols/arrow.svg"
        alt="menu-arrow"
      />
    </a>

    <div
      v-if="isOpen"
      class="absolute left-0 w-max hidden z-50 mt-2 bg-blue-500 bg-opacity-70 backdrop-blur-md rounded-lg p-3 md:flex"
    >
      <div class="flex flex-col gap-2 items-start">
        <slot></slot>
      </div>
    </div>

    <div v-if="isOpen" class="md:hidden top-full bg-opacity-70 backdrop-blur-md rounded-lg mt-2 mb-4 ml-4 flex">
      <div class="flex flex-col gap-2 items-start">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

3 Replies

kapa.ai•3w ago

Hi @Spctr. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the provided knowledge sources, I don't have enough specific information to directly address your issue with the <a> positioning and expanding the main div downward in a Nuxt context. However, I can provide some general guidance based on Vue and HTML/CSS principles that might help: 1. To fix the position of the <a> element, you could try using CSS positioning. For example, you could add position: relative; to the <a> tag's class. 2. To show the menu under the <a> without moving the whole main div, you could use absolute positioning for the dropdown menu. You're already using absolute for the desktop version, but you might want to adjust its positioning. 3. To get the border around everything, ensuring it's one menu, you could move the border to the outermost div and adjust its padding to accommodate the dropdown. Here's a modified version of your code that might help:

<template>
  <div
    @mouseenter="showDropdown"
    @mouseleave="hideDropdown"
    class="relative inline-block border p-2"
  >
    <a
      :href="to"
      :class="[Globals.getColor(color, true)]"
      class="px-2 rounded-lg text-center font-bold md:h-min h-14 md:text-base text-lg py-2 flex items-center gap-2 relative"
    >
      {{ title }}
      <img
        :class="{ 'rotate-180': isOpen }"
        class="h-3 transition-transform duration-300 ease-in-out"
        src="~/assets/images/symbols/arrow.svg"
        alt="menu-arrow"
      />
    </a>

    <div
      v-if="isOpen"
      class="absolute left-0 w-max z-50 mt-2 bg-blue-500 bg-opacity-70 backdrop-blur-md rounded-lg p-3 md:flex"
    >
      <div class="flex flex-col gap-2 items-start">
        <slot></slot>
      </div>
    </div>
<div v-if="isOpen" class="md:hidden bg-opacity-70 backdrop-blur-md rounded-lg mt-2 mb-4 flex">
      <div class="flex flex-col gap-2 items-start">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<template>
  <div
    @mouseenter="showDropdown"
    @mouseleave="hideDropdown"
    class="relative inline-block border p-2"
  >
    <a
      :href="to"
      :class="[Globals.getColor(color, true)]"
      class="px-2 rounded-lg text-center font-bold md:h-min h-14 md:text-base text-lg py-2 flex items-center gap-2 relative"
    >
      {{ title }}
      <img
        :class="{ 'rotate-180': isOpen }"
        class="h-3 transition-transform duration-300 ease-in-out"
        src="~/assets/images/symbols/arrow.svg"
        alt="menu-arrow"
      />
    </a>

    <div
      v-if="isOpen"
      class="absolute left-0 w-max z-50 mt-2 bg-blue-500 bg-opacity-70 backdrop-blur-md rounded-lg p-3 md:flex"
    >
      <div class="flex flex-col gap-2 items-start">
        <slot></slot>
      </div>
    </div>
<div v-if="isOpen" class="md:hidden bg-opacity-70 backdrop-blur-md rounded-lg mt-2 mb-4 flex">
      <div class="flex flex-col gap-2 items-start">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

Key changes: 1. Added p-2 to the outermost div to give some padding inside the border. 2. Added relative to the <a> tag's class. 3. Removed top-full and ml-4 from the mobile dropdown div to keep it within the border. Please note that these suggestions are based on general Vue and CSS principles, as the provided knowledge sources don't contain specific information about your particular use case. You might need to adjust these suggestions based on your specific layout and design requirements. If you need more Nuxt-specific guidance, you might want to check the Nuxt documentation or ask a more Nuxt-focused question. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@320895029008793600> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

SpctrOP•3w ago

does not fix it .. the border is just around the button (a tag) and its not a whole div when I hover it

Gaming

Programming

Fix postition for <a> and expand the main div downward

Did you find this page helpful?