Is it possible to replace a hover dropdown with a click in CSS?

Currently, I have created dropdowns in CSS using the following code:

.menu ul ul,
.menu .mega-menu,
.menu .mega-menu ol li {
    opacity: 0;
    visibility: hidden;
}


.menu li:hover > ul,
.menu li:hover > .mega-menu,
.menu li:hover > .mega-menu ol li {
    opacity: 1;
    visibility: visible;
}

I am looking to make these dropdowns clickable instead of just hover. Would it be possible to achieve this using :target?

I attempted the following:

.menu li:focus > ul,
.menu li:focus > .mega-menu,
.menu li:focus > .mega-menu ol li {
    opacity: 1;
    visibility: visible;
}

Unfortunately, this did not work as expected.


<div class="menu menu-style">
    <ul class="menu brand-background">
        <li class="menu-active">A</li>
        <li>B</li>
         <li>
              <a href="#">C</a>
             <!-- Full Width Mega-Menu / Start -->
            <div class="mega-menu full-width">
                <div class="col-md-1">
                    <h4>Content</h4>
                        <ol>
                             <li><a href="#">1</a></li>
                              <li><a href="#">2</a></li>
                             <li><a href="#">3</a></li>
                             <li><a href="#">4</a></li>
                             <li><a href="#">5</a></li>
                            <li><a href="#">6</a></li>
                            <li><a href="#">7</a></li>
                      </ol>
                 </div>
            </div>
          <!-- Full Width Mega-Menu / End -->
          </li>
       <li><a href="#">D</a></li>                            
   </ul>
</div>
htmlcsstarget

Answer №1

Utilizing the checkbox hack for a solution

FIDDLE (Click on 'C' to toggle content visibility)

.mega-menu {
  opacity: 0;
  visibility: hidden;
}
label {
  cursor: pointer;
}
#cb {
  display: none;
}
#cb:checked ~ .mega-menu {
  opacity: 1;
  visibility: visible;
}
<div class="menu menu-style">
  <ul class="menu brand-background">
    <li class="menu-active">A</li>
    <li>B</li>
    <li>
      <input type="checkbox" id="cb" />
      <label for="cb">C</label>

      <!-- Full Width Mega-Menu / Start -->
      <div class="mega-menu full-width">
        <div class="col-md-1">
          <h4>Content</h4>

          <ol>
            <li><a href="#">1</a>
            </li>
            <li><a href="#">2</a>
            </li>
            <li><a href="#">3</a>
            </li>
            <li><a href="#">4</a>
            </li>
            <li><a href="#">5</a>
            </li>
            <li><a href="#">6</a>
            </li>
            <li><a href="#">7</a>
            </li>
          </ol>
        </div>
      </div>
      <!-- Full Width Mega-Menu / End -->
    </li>
    <li><a href="#">D</a>
    </li>
  </ul>
</div>

Using :target for a different approach

1) Assign an id to the element in your markup that needs targeting. For instance, give the mega-menu an id="dropdown"

2) Target the id of the element in the href attribute of the link. Example: <a href="#dropdown">

3) Utilize the :target selector in your CSS as follows:

#dropdown:target {
    opacity: 1;
    visibility: visible;
}

DEMO (Click on 'C' to reveal the content)

#dropdown {
  opacity: 0;
  visibility: hidden;
}
#dropdown:target {
  opacity: 1;
  visibility: visible;
}
<div class="menu menu-style">
  <ul class="menu brand-background">
    <li class="menu-active">A</li>
    <li>B</li>
    <li> <a href="#dropdown">C</a>

      <!-- Full Width Mega-Menu / Start -->
      <div id="dropdown" class="mega-menu full-width">
        <div class="col-md-1">
          <h4>Content</h4>

          <ol>
            <li><a href="#">1</a>
            </li>
            <li><a href="#">2</a>
            </li>
            <li><a href="#">3</a>
            </li>
            <li><a href="#">4</a>
            </li>
            <li><a href="#">5</a>
            </li>
            <li><a href="#">6</a>
            </li>
            <li><a href="#">7</a>
            </li>
          </ol>
        </div>
      </div>
      <!-- Full Width Mega-Menu / End -->
    </li>
    <li><a href="#">D</a>
    </li>
  </ul>
</div>

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

Optimizing Content Responsiveness with Bootstrap in Offcanvas Sidebar Layouts

Here is an example of my current working code: Fiddle. This is what I want to achieve: The content within the <section> (such as the three circles) is designed to be responsive and adjust itself according to the browser size. If you resize the Fid ...

javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3

Generating a Fresh HTML File with Selenium Using a ChromeWebElement

I am utilizing VB.net 2019 and Selenium to generate a fresh .htm file by extracting information from ChromeWebElement and adding necessary statements before and after. My attempt looks something like this:- Dim ele As OpenQA.Selenium.Remote.RemoteWebElemen ...

htmlselenium

Creating a secondary title for a Bootstrap Navigation Bar

I have a unique Bootstrap 4 website that features a navbar. The navbar consists of a special brand section with an image and title text, followed by the rest of the navbar elements. You can view it here: https://jsfiddle.net/zmbq/aq9Laaew/218793/ Now, I a ...

htmlcssbootstrap-4navbarnav

Display the button immediately following the text within the cell without extending beyond its boundaries

Check out the code snippet below: <td> <div> <span class ="name">Can be long, can be short</span> <button>Test</button> </div> </td> td{ white-space: no-wrap; width:175px; position: relati ...

htmlcss

PHP allows for easy looping through an array based on certain conditions. By incorporating

Can anyone assist me in creating an HTML div using an array loop? Here is how my array looks: $myarray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]; This is the structure of my PHP file: <?php foreach ($myarray as $arr) { // ...

phphtmlarraysloopsconditional-statements

Begin dynamic grid items from the left side

Is there an easy way to solve this problem with CSS Grid and dynamic items placement? I'm still learning the ins and outs of CSS Grid and could use some guidance. When my layout has many items, everything is fine: https://i.sstatic.net/Z2aX0.png Ho ...

cssgrid

Network plot search box

I have utilized the forceNetwork() function from the networkD3 package to construct a Network of protein mutations. It is then displayed in RStudio's "Viewer" pane. After creating this network, I am able to save it as an HTML file for sharing while r ...

htmlrrhtmlnetworkd3

Using the `position: sticky` property does not function properly if the HTML element has a height set to

Here is the CSS code I have for the two important items... html, body { background-image: url("../images/background.png"); background-attachment: fixed; height: 100%; } --and-- #navBar { font-family: Cinzel; position: sticky; t ...

htmlcssheightnavbarsticky

When the symbol "&" is placed within a parameter, it causes the URL to break

I am facing an issue with the character '&' in URLs. Within 3 strings, one of them contains the text with the character '&'. For example: "Monsters & Co." I need to use these 3 strings to pass them in a URL to another pag ...

htmlurlparameters

applying transparency effects to the page

I am currently working on a web page that features a background image and six interactive tiles which act as links. These elements are all housed within a parent element with the id of "main". Additionally, I have implemented a side navbar that shifts th ...

javascripthtmlcssopacity

Is it recommended to include the size of the box-shadow in the overall dimensions of the element?

I'm aware that by default it doesn't behave this way, but I'm attempting to make it do so. I'm in the process of constructing a button-shaped anchor with a solid box-shadow (no blur) to give the appearance of depth, and upon hovering, ...

cssanchorbox-shadow

The border on a specific field is not showing up when using Django Crispy Forms

Utilizing bootstrap and crispy forms for styling my website has been successful, except for a border issue with the username fields. While all other fields are displayed correctly, the username fields appear without a border as shown in the image below: h ...

htmldjangobootstrap-4django-crispy-forms

Go back to the top of the page while simultaneously refreshing the content

Hi there, I've managed to create a code that smoothly scrolls to the top of the page, but now I'm looking to add a page refresh functionality to it. The current code I have only handles the scrolling part, and I'm not sure how to incorporate ...

javascripthtml

Remain on the current webpage following form submission

I've been attempting to keep the current page active after submitting a form, but for some reason it's not working. After piecing together some code I found online, this is what I have in my process.php file: <?php // Collect Data $name = ...

phpjqueryajaxhtmlform-submit

What steps should be taken to create this specific layout using Vue-Bootstrap?

Currently tackling a web project and aiming to design two rows that resemble the following layout: https://i.sstatic.net/tLv1h.png Details of the screenshot (such as icons) are not necessary, but rather focusing on the arrangement of aligning two rows bes ...

htmlcssvue.jsbootstrap-4

Troubleshooting Problems with Image Width in CSS Styles

I am facing an issue with displaying 3 images in a row side by side. The first image is bigger than the other two, causing them to be pushed down to the next row, which is not what I want. I have created a class and specified the height and width, but it d ...

htmlcsstailwind-css

In HTML5, the semantic tag used for indicating the "subsequent article" is

Having trouble with certain HTML5 elements. Imagine there is a blog post on one side, and a preview of the next post on the other side. Which HTML5 element would you suggest for this setup? Some might argue <nav> makes sense, while others could mak ...

htmlsemanticselement

Creating Shadows in Swift with Xib for TableView

I am currently working on: Attached is a screenshot from an iPhone: This is the code snippet in question: cell.shadowLayerView.layer.masksToBounds = false cell.shadowLayerView.layer.shadowOffset = CGSize(width: 0, height: 0) cell.shadowLayerView.layer.s ...

ioscssswiftuitableview

An issue has been encountered within the node modules directory at the path node_modules/@angular/flex-layout/extended/typings

I encountered an error in my Angular 6.0.8 application while using Angular CLI and running from VSCode. ERROR in node_modules/@angular/flex-layout/extended/typings/style/style.d.ts(72,67): error TS1144: '{' or '; ' expected. no ...

htmlangulartypescriptangular-flex-layout

Is there a way to use programming to prevent scrolling?

While working on a datagrid with lazy loading, I encountered the need to stop scrolling when the user reaches an area without data in order to load it. I have tried various methods like using e.preventDefault, return false from event handlers, and even fou ...

javascripthtmldom