Jay Jay - 1 year ago 37
CSS Question

How to make a search box that doesn't trigger a dropdown

The page I'm developing is this: http://www.thespeaker.ca/

I have a search box in the drop-down menu link (I'm using a drop down after using a lot of other menu styles -- I know the drop down is kind of ugly and quite "beta" but it is light code-wise).

I've tried doing what I use for the clickable "S" button at the left, which is wrapping the image in this span:

<span data-href="http://www.thespeaker.ca/" onclick="document.location.href = this.getAttribute('data-href'); return false;">

But it doesn't seem to work for the search box.

Any other ideas I could try?

Answer Source

If you want to stop the top accordion menu from opening when clicked on the search box, add a onclick="return false" to the input element.

<input value="" name="s" id="s" placeholder="Search" type="text" onclick="return false">

It blocks the onclick event to be sent to parent accordion within the search box.