HTML
<div class="container1">
<ul class="menu-dropdown">
<li>item</li>
</ul>
<div>
CSS
.menu-dropdown{
display: none;
}
.container1:focus .menu-dropdown{
display: block;
}
I am attempting to create a click event in CSS using the focus pseudo-class without utilizing jQuery. When I click on container1, I want it to hide a dropdown menu ul.
Is there a way to achieve this effect?
When it comes to achieving a certain functionality with HTML elements, using the "focus" property may not be the solution you're looking for. However, utilizing the "active" property can serve as a viable alternative. Most browsers interpret the "active" property as the equivalent of a "click" event, meaning that when you interact with an element by clicking on it, it is considered active.
To see this in action, take a look at the code snippet below. I've personally tested it on Chrome and confirmed that it behaves as expected. It also partially works on Internet Explorer, although additional styling is needed specifically for IE compatibility.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Title Goes Here</title>
<style>
body {background-color:lightgray}
h1 {color:blue}
p {color:green}
.div1 {
border: 1px solid green;
}
.div1:active .dropdown {
display: none;
}
.dropdown:active {
display: none;
}
</style>
</head>
<body>
<p>This is my web page</p>
<div class="div1">
test
<ul class="dropdown">
<li>example</li>
</ul>
<div>
</body>
</html>Have you considered implementing javascript for this?
<div id="dropdownMenu">
<ul class="menuList" id="listItems">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<div>
<style>
.invisible {
display: none;
}
</style>
<script>
document.getElementById('dropdownMenu').onclick=function(){
var list = document.getElementById("listItems");
list.classList.add("invisible");
};
</script>
JSFiddle link: http://jsfiddle.net/9Pq7oXt2/
https://i.sstatic.net/6xlR6.png The image above demonstrates what I am trying to achieve - when a row is clicked, it should hide, the next row turns red and clicking on that hides it too, moving on to the next available row in the sequence. $(document).r ...
Currently, I am in the process of developing a basic webpage. Oddly enough, my CSS styling seems to be functional only in Chrome, with no success when it comes to both Firefox and IE11. Here is a snippet of my HTML code: <html> <head> < ...
Is there a way to implement a notification number badge using Ajax, similar to what Facebook does? I can't provide an image here, but most people are probably familiar with the concept. It's like when you sign into Facebook and see a small number ...
I have a collection of videos on my website and I would like them to display with a poster (thumbnail image) initially. The video controls should only appear once the user clicks on the video for the first time. Therefore, when the page is loaded, the cont ...
I have been working on using jQuery to edit array values. Here is my approach: From a modal, each time I click the "Add item" button, it pushes values to an array and appends the data to a table. var iteminfo = { "row": 'row' + cnt, "ma ...
I would like the favorite_border icon to switch to the favorite icon when clicked. As we are using material.io and both icons have the class material-icons, I am unsure about how to implement this using jQuery. What steps should I take to achieve this? (w ...
Is there a way to achieve space-between alignment when elements are stacked vertically in MUI Grid instead of using flex? I've come across suggestions involving giving flex:1 and height:100%, but I'm specifically interested in achieving this with ...
I am encountering an issue with printing a webpage that contains three images. When printing directly from Internet Explorer, it correctly prints three pages, one for each image. However, when loading the same page within an iframe and printing the iframe ...
I have a query regarding JQuery related to randomly placing divs on a webpage. The issue I'm facing is that it currently does this indefinitely. Is there a way to make it run for a specific duration and then stop? $(document).ready(function () { ...
I need to pass an object as my value and use [ngValue] instead of [value]. This is how my HTML is structured: <mat-input-container fxFlex="18" fxFlexOffset="1"> <input matInput placeholder="Example" [matAutocomplete]= ...
Having a slight issue here, it seems that jQuery is being overly clever. Within my HTML code, I am attempting to insert this string into a div container: </div><div class="something"> You'll notice that the closing tag comes first, foll ...
I recently completed a project that was overloaded with tables. I made all the tables responsive, but they still take vertical scroll if they don't fit on certain devices due to their varying widths. For instance, Table A requires vertical scroll o ...
My search box needs to have JSON data appended into it. Below is the HTML code: <input type="search" id="merchantName" name="merchant" placeholder="enter merchant name"></input> I have JSON data containing merchant names that I want to appen ...
I am attempting to collect data on the names of cities and addresses of all Apple stores located in the United Kingdom by utilizing the rvest package. library(rvest) library(xml2) library(tidyverse) my_url <- read_html("https://www.apple.com/uk/re ...
I'm currently developing a web application that includes a Google Maps feature in two different tabs using Twitter Bootstrap. I am exploring options to have one canvas element that can be displayed in both tabs with varying dimensions. One idea is to ...
Is there a way to keep my .nav-container position: fixed; without creating a gap between it and the .page-content at certain window widths? When I set the position to fixed, a small white line appears between the red background of the .nav-container and th ...
I have a HTML file where I display images on a popup window using the code below: <div id="divCheckbox" style="display: none;"> <a class="fancybox" rel="gallery01" title= "BONOS ALQUILER 2/6" href="eventos/Bonos_alquiler.jpg">o ...
I'm currently using WordPress to create a form with the following code: [contact-form][contact-field label='What message would you like to send?' type='textarea' required='1'/]Word Limit: 50 words[contact-field label=&ap ...
https://i.sstatic.net/5rdYY.pngI am currently working on a fun website project . I am facing an issue with the mobile menu button not disappearing using display:none in Safari on my iPhone when in landscape mode, even though it works fine in Chrome. My g ...
I had originally set up an automated email system to trigger once a certain condition was met, which I successfully implemented. However, I now want to enhance the email by including a more structured format and embedding an image from Google Drive. While ...