Activate Dropdown on hover and automatically close the menu when a link is clicked

Looking for assistance with a Dropdown menu that opens on mouse hover but needs to close when a link is clicked within the menu. Do you think JavaScript would be necessary for this function?

.dropdow {
          position: relative;
          display: inline-block;
          width: 25%;
        }

        .gap {
          text-align: center;
          padding: 1em 0em;
          background-color: #f47721;
          margin-top: 6%;
          box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
          border-radius: 2%;
        }

        .dropbt1 {
          background-color: #f47721;
          color: white;
          padding: 1px;
          font-size: 13px;
          border: none;
          cursor: pointer;
        }

        .dropdow-content1 {
          display: none;
          position: absolute;
          background-color: #f47721;
          /* min-width: 160px; */
          box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
          z-index: 1;
        }

        .dropdow-content1 a {
          color: white;
          padding: 8px 3px;
          text-decoration: none;
          display: block;
        }

        .dropdow-content1 a:hover {
          background-color: #d86a1e
        }

        .dropdow:hover .dropdow-content1 {
          display: block;
          width: 100%;
        }
      
<div class="dropdow">
        <div class="gap">
          <h3>Dropdown Menu</h3>

          <button class="dropbt1"><h3>Please Choose</h3></button>
          <div class="dropdow-content1">
            <a href="#" id="" class="specialLink">Option 1</a>
            <a href="#" id="" class="specialLink">Option 2</a>
            <a href="#" id="" class="specialLink">Option 3</a>
          </div>
        </div>
      </div>

Seeking guidance on closing a Dropdown menu that opens with mouse hover when a link within the menu is clicked. Would implementing JavaScript be necessary for this functionality?

Answer №1

Yes, indeed! To enhance the layout, consider incorporating a <label> along with a checkbox:

.dropdow {
  position: relative;
  display: inline-block;
  width: 25%;
}

.gap {
  text-align: center;
  padding: 1em 0em;
  background-color: #f47721;
  margin-top: 6%;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
  border-radius: 2%;
}

.dropbt1 {
  background-color: #f47721;
  color: white;
  padding: 1px;
  font-size: 13px;
  border: none;
  cursor: pointer;
}

.dropdow-content1 {
  display: none;
  position: absolute;
  background-color: #f47721;
  /* min-width: 160px; */
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
  z-index: 1;
}

.dropdow-content1 a {
  color: white;
  padding: 8px 3px;
  text-decoration: none;
  display: block;
}

.dropdow-content1 a:hover {
  background-color: #d86a1e
}

#dd {
  display: none;
}

#dd:checked+.dropdow-content1 {
  display: block;
  width: 100%;
}
<div class="dropdow">
  <div class="gap">
    <h3>Dropdown Menu</h3>
    <label class="dropbt1" for="dd"><h3>Please Select</h3></label>
    <input type="checkbox" id="dd" />
    <div class="dropdow-content1">
      <a href="#" id="" class="specialLink">Option 1</a>
      <a href="#" id="" class="specialLink">Option 2</a>
      <a href="#" id="" class="specialLink">Option 3</a>
    </div>
  </div>
</div>

Answer №2

Typically, CSS cannot capture clicks to perform an action. In Kumar's workaround, a hidden HTML element is used that accepts a state. However, it is not possible to change the checkbox state from "checked/unchecked" using CSS, making it impossible to trigger the menu with a hover.

If you desire both a hover trigger (onMouseEnter) and a close click (onClick) event for exiting, JavaScript will be needed.

It is advised to reconsider utilizing multiple interaction types as the hover/click combination can hinder usability by requiring users to understand and utilize both interactions. For instance, hover may not work on touch devices, and there may be confusion between "click to exit" and "hover to open".

To ensure compatibility with most users, especially those on touch devices, sticking with the click-only approach is recommended.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Phonegap (cordova 1.6.0) integration with Facebook login is experiencing issues on Android

When using Cordova 1.6.0, I am encountering issues with alerts. The Cordova Facebook Connect plugin is failing on login! The Cordova Facebook Connect plugin is also failing on auth.status! Please assist me with resolving these problems. I have been fol ...

Utilize Javascript to conceal images

On a regular basis, I utilize these flashcards. Recently, I have started using images as answers. However, I am facing an issue - I am unable to conceal the pictures. My preference is for the images to be hidden when the webpage loads. function myShowTe ...

Is it possible to loop through a subset of a collection using *ngFor?

Is it possible to iterate through a specific range of elements in a collection using *ngFor? For instance, I have a group of checkboxes with their form control name and label specified as follows: [{id: 'c1', label: 'C1'}, ...] Assum ...

Updating pages dynamically using AJAX

There's a glitch I can't seem to shake off. I've successfully implemented AJAX for page loading, but an issue persists. When I navigate to another page after the initial load, the new page contains duplicate tags like <head> and <f ...

Change the position of a Div by clicking on a different Div using JQuery for custom movements

I have successfully managed to slide the div left/right based on the answers below, but I am encountering some issues with the top div. Here are the specific changes I am looking to make: 1. Make both brown lines thinner without affecting the animations. ...

"Customizing the Material-ui TextField DOM Element: A Step-by-Step

After trying the code below, I was expecting to see a yellowish "Hi," but instead received [object Object]. Is there a way to correct this issue? Possibly utilizing InputProps would help, but I haven't been able to locate a comprehensive tutorial on ...

Is there a way to ensure that when displaying information boxes with Bootstrap, the inputs do not get misplaced or shuffled to the wrong location

I have been working on a form that needs to display an alert: https://i.sstatic.net/uGKtG.png When clicking the button next to the input control, an alert should appear. Although the alert is showing correctly, the input controls are shifting to the wron ...

Updating dropdown menu selection after successful form submission validation

I'm currently working on a PHP sign up/registration form that retains and resubmits user input if validation fails. Although I have successfully implemented text boxes, password inputs, and radio buttons, I am encountering some challenges with the dro ...

I am unable to switch my carousel to full-screen mode

I'm struggling to make the carousel fullscreen even though I've set the width to 100%. Bootstrap was used in this project. Any help would be appreciated. Thank you! <html> <head> <link href="homepage.cs ...

What specific flag should be included in Chrome settings to prevent displaying c:/fakepath?

Is there a way to disable this security feature? I'm seeking a solution in Chrome to obtain the full file path of an uploaded or viewed file, similar to how it can be done in Internet Explorer. Despite my efforts with flags like --allow-file-access-f ...

Issue encountered with JavaScript function within TypeScript file connected to HTML code

I am currently working on a simple SharePoint web part and encountering an issue with using a function from another module file in my main file. Snippet from the JSFunctions.module.js file (where I define my function): function getApi(){ [my code]... }; ...

What are alternative methods for adjusting the value of a CSS property with alternative parameters?

When it comes to using similarities in my code, I often find myself needing a more flexible solution. For example: .position{ position:absolute; right:10px; top:20px; } This is where the idea of using a mixin comes in handy: .position(@absolute:ab ...

Seeking the "onChange" functionality while implementing the "addEventListener" method

I've been busy with a React project lately. Instead of adding 'onChange' to each button within the html object like this: <input type='text' onChange={myFunction} /> I'd prefer to include it in the JS code like so: doc ...

Sending JSON data to Python CGI script

I've successfully set up Apache2 and got Python running without any issues. However, I'm facing a problem with two pages - one is a Python Page and the other is an HTML page with JQuery. Could someone guide me on how to correctly make my ajax p ...

Center the image within a Grid item using Material UI's alignment feature

I am currently utilizing the Grid component from Material UI. I'm facing an issue where the image inside a Grid item is aligned to the left instead of being centered. <Grid container direction="row" justify="center" alignIte ...

Troubleshooting problems with CSS menus and submenus, along with addressing browser pixel issues specific to Web

Find my custom css menu here: Custom CSS Menu On hovering over "about us", the "our clergy" sub-menu appears automatically. I need it to show only when hovering over "our clergy". This screenshot is from Firefox, but webkit browsers like Chrome show a sl ...

Is there a method to style the parent DIV using CSS when the IDs of the child DIVs are

Similar Question: Looking for a CSS parent selector? If I am unable to modify the HTML file, is it possible to apply CSS styles to the parent DIV using only the ID of the direct child DIV? Here's an example scenario: <div> <div id="c ...

Changing Ionic Column Widths Based on Content Length

In my dynamic ionic 2 grid system, I am facing a layout issue. <div> <ion-row> <ion-col > ; <ion-card-header class="card-header"> {{hunt.title}} </ion-card-header> </ion-col> <ion-col *ngIf="!hunt. ...

Modifying the title of a webpage with a Bootstrap design

As a newcomer to HTML/CSS, I recently utilized a Bootstrap theme from Themezy to build my personal website. The template includes a navigation bar with tabs labeled Top, Work, Portfolio, and Contact. I felt the need to change Top to About, so I replaced ...

Determine the number of lines in a textarea, taking into account both manual

I have a textarea that I need to validate for input exceeding 6 rows. My JavaScript code works perfectly by checking for scrollbar presence, indicating more than 6 lines of input. However, how can I achieve the same validation using PHP in case JavaScript ...