Need help with js for center menu on district website

[atjones44]

I’ve been asked to change it from hover effect to clickable.
Im not having any luck what so ever since javascript is new to me. I will have to buy a book on it.
I have here a jsfiddle of the menu. http://jsfiddle.net/atjones44/62k19ffn/12/
Can anyone do up a simple js code for onclick events to open the menu, rather than :hover css effects
live site can be seen at usd430.k12.ks.us

[Paulie_D]

What happens if JS is not enabled by the user?

Are you worried about the menu not working not working in that case?

[atjones44]

I haven’t really thought about that. Since there is no real easy way to achieve this with css, as long as it works on our district computers for our staff and students, I really don’t care. if the end user disabled js at home then its their own problem I guess.

thanks for the help ahead of time

• Andrew Jones
  USD430

[Paulie_D]

So you don’t want any hover action at all?

The only way to get to the submenu will be a click?

Just checking as that’s not really a thing that you see very often.

[atjones44]

Right, the grade school teachers have complained that with KDG and 1st graders don’t really have the hand / eye coordination to handle the hover effect because the menu keeps disappearing on them lol.

I’d like a click to open the first nav and then a click to open the submenus there if possible.
I use jquery on the site already for usd430 news and stuff so being js shouldn’t matter really. will it still work with mobile devices?

[Paulie_D]

Ok…I’ll take a look but I think we’ll need to tidy up some of the HTML errors you have in the fiddle.

will it still work with mobile devices?

I think so, but I’m not up on mobile & clicks with JQ.

[atjones44]

Thanks much!

[Soronbe]

I think so, but I’m not up on mobile & clicks with JQ.

Mobile devices with touchscreen often dont have a “click” event. In most cases they use events like “touchstart” “touchmove” and “touchend”.

[Paulie_D]

Mobile devices with touchscreen often dont have a “click” event. In most cases they use events like “touchstart” “touchmove” and “touchend”.

Oh..yeah…I was aware of those just not on he implementation…still researching.

Unfortunately I have to be away this weekend so I may not be able to do much until Monday.

[atjones44]

That is totally fine, thank you for the help you’re willing to do for me and the school district.

[atjones44]

The only way I got touchscreen devices to work with the hover menu was by adding

<span>
menu html is here
</span>

[atjones44]

Hey Guys, just still messing with the center menu on the website. I’d still like to make the menu, clickable if possible rather than hover like it currently is. Even if its not js that does it.

[Shikkediel]

I thought this wouldn’t be too complicated but the HTML looks scrambled and to be honest the CSS made my head spin. I think this isn’t so much a js issue – that bit of code looks pretty close and click events should work normally on touch screens (just slightly delayed).

[atjones44]

Think its doable? Or will it not work? I can try to find a new menu that will do more of what I need.
Again thanks for your help.

[Shikkediel]

It’s certainly doable, I just got disheartened a bit. The HTML has some stray tags I think but the CSS would need a rewriting. The js should only require some minor coding then (I’ll take another, fresh look).

[Author]

Posts