Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make the whole div clickable

I'm making a menu and have one simple and stupid issue. The problem is: I have my <span> elements inside a 'Menu' div. With id '#menu'. I've made a feature by which you can't accidentally click on the <a> inside the <span> through CSS visibility. But now if you click the menu in space between white stripes, it won't act like a button.

So the question is: 'How to make this <div> fully clickable?'

Here's the Fiddle.

Thanks in advance.

like image 534
MaxelRus Avatar asked Sep 17 '16 11:09

MaxelRus


2 Answers

It can be simply do with width property, just need to add a width to the menu div:

#menu {
    -moz-user-select: none;
    height: 40px;
    margin: 50px;
    position: absolute;
    width: 40px; /* newly added */
}
like image 195
Jishnu V S Avatar answered Oct 07 '22 13:10

Jishnu V S


Instead of keeping fixed width, we can also use the width to 100% which gives you more clickable area to collapse the menu

#menu {
  position: absolute;
  height: 40px;
  width : 100%; /*newly added*/
  margin: 50px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none
}
like image 28
Bharath kumar Jalla Avatar answered Oct 07 '22 11:10

Bharath kumar Jalla