Tips for concealing a div when clicking on an element solely with CSS

Question

Tips for concealing a div when clicking on an element solely with CSS

I am currently working on creating a CSS Main Menu in Vue. The functionality is such that it pops up when the mouse hovers over it, and hides when the mouse moves out. However, I am facing an issue with hiding the menu when clicking on a hyperlink a. Any suggestions on how to achieve this?

I tried using ".menu a:active { display: none; }", but it did not work as expected.

.menu {
  display: none;
}

.menu a {
  display: block;
}

.main:hover .menu {
  display: block;
}

<div class="main">
    <button>Main Menu Title</button>
    <div class="menu">
        <a>Sub Menu Title</a>
    </div>
</div>

css vue.js

Answer 1

Answer №1

.menu a:active { display: none; }

will only take effect when the mouse button is actively pressed and held down. Regrettably, achieving this functionality with pure CSS is not possible. My suggestion would be to assign an additional class upon clicking, such as:

.hidden {
    display: hidden;
}

However, JavaScript would be required for this solution.

Answer 2

.menu a:active { display: none; }

will only take effect when the mouse button is actively pressed and held down. Regrettably, achieving this functionality with pure CSS is not possible. My suggestion would be to assign an additional class upon clicking, such as:

.hidden {
    display: hidden;
}

However, JavaScript would be required for this solution.

Answer 3

Answer №2

From my perspective, you have a valuable tool at your disposal which seems to be underutilized. Vue.js has the capability to effortlessly handle the task you are aiming for.

<script setup>
import { ref } from 'vue'

const showMenu = ref(false)
const ToggleMenu = () => {
    showMenu.value = !showMenu.value  
}
</script>

<template>
  <div class="main">
    <button @click="ToggleMenu">Main Menu Title</button>
    <div v-if="showMenu" class="menu">
        <a>Sub Menu Title</a>
    </div>
</div>
</template>
<style>
.menu a {
  display: block;
}
</style>

Answer 4

From my perspective, you have a valuable tool at your disposal which seems to be underutilized. Vue.js has the capability to effortlessly handle the task you are aiming for.

<script setup>
import { ref } from 'vue'

const showMenu = ref(false)
const ToggleMenu = () => {
    showMenu.value = !showMenu.value  
}
</script>

<template>
  <div class="main">
    <button @click="ToggleMenu">Main Menu Title</button>
    <div v-if="showMenu" class="menu">
        <a>Sub Menu Title</a>
    </div>
</div>
</template>
<style>
.menu a {
  display: block;
}
</style>

Tips for concealing a div when clicking on an element solely with CSS

Answer №1

Answer №2

Similar questions

Is there a way to use JavaScript to import several custom fonts at once?

How can I determine the remaining amount of scroll left in my HTML document?

Strategies for addressing input range slider cross browser compatibility issues

Displaying a BootstrapVue modal once the page has finished loading

Arranging links in a horizontal line (JSFiddle)

Remove an item using a function embedded within it

Animate the transition of the previous element moving downward while simultaneously introducing a new element at the top

Exploring the connection between Vue's $refs and kebab-case

how to change the color of a specific item in a list created using v-for

What is causing the Bootstrap accordion to not display content when clicked on?

Menu bar placed atop a carousel

Enhance the user experience with a personalized video player interface

Creating an invoice or money receipt using HTML is a straightforward process that involves using specific code and

Why can't we use percentages to change the max-height property in JavaScript?

Animate CSS during page load

Cannot add padding to the DIV element

Vue-Router: Moving to a nested state or route based on their name and parameters

Ways to ensure CSS affects icon inside main element?

How can jQuery be used to adjust the width and height of an iframe?

Material UI Paper component does not extend to full viewport height