Hi,
I’m working on a site where I’ve created a kind of drop-down menu using hidden elements. When a visitor hovers over a button in the header, which reads “Programs”, the hidden elements appear (a strip with some images and text). The strip also contains some buttons that link to other pages on the site. When the visitor mouses away from the strip, the strip disappears. I’m a beginner at using Javascript, so there is more functionality I would like to add to the header, but I don’t know how to do it:
I would like to make it so that when the visitor clicks on one of the buttons in the strip, the strip disappears AND the link is opened. I tried adding an onClick event to the buttons in the strip, but the button’s link stopped working. The strip disappeared but the link did not open. How can I do this?
Also, if a visitor hovers over the “Programs” button, the strip appears, but if the visitior mouses away from the “Programs” button without ever mousing over the strip, the strip stays open. I can easily fix this by adding an onMouseOut event to the “Programs” button, but then the visitor can’t access elements on the strip without the strip disappearing. So, what needs to happen is that an onMouseOut event of the “Programs” button will close the strip ONLY IF the strip is already open (It’s hidden status = false). I understand what needs to happen in this case conceptually, I just don’t know what to do to actually make it happen.
Thank you in advance!