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?

Recommended Answers

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 …

Jump to Post

All 2 Replies

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.

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';
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.19 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.