0

Hello!

I've made a drop-down menu using the hover sub-class in CSS:

.ddmenu{ display:none; }
.box:hover .ddmenu{ padding:0px; display:block; }

Is it possible to make the "ddmenu" object appear when the user clicks on the object with the "box" class instead of when he hovers the mouse over it using HTML/CSS? If it's not how do I use Java for it?

3
Contributors
2
Replies
9
Views
6 Years
Discussion Span
Last Post by shaya4207
0

Hello!

I've made a drop-down menu using the hover sub-class in CSS:

.ddmenu{ display:none; }
.box:hover .ddmenu{ padding:0px; display:block; }

Is it possible to make the "ddmenu" object appear when the user clicks on the object with the "box" class instead of when he hovers the mouse over it using HTML/CSS? If it's not how do I use Java for it?

Not sure if it is possible with html/css, but with javasrcipt I think this should work:

$(".box").click(function () {
    $(".ddmenu").css("padding","0px");
    $(".ddmenu").css("display","block");
  });

You should use jquery library to run this code. And remove

.box:hover .ddmenu{ padding:0px; display:block; }

from your css.

0

You don't need to use the jQuery library for that, you can use regular JavaScript (not Java, totally different language) for that.

All you have to do is give the menu an id (except for the class), and have it 'display: none', and in the box you should have an 'onclick' and in the JS you should have:

function your_function(){
  document.getElementById('your_menu_id').style.display = 'block';
}
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.