Jump to content
ike

DropDown Menu change hover to click

Recommended Posts

One way to do it is to check for the :focus pseudo-selector on the button: https://www.w3schools.com/code/tryit.asp?filename=G28YN9O8VU3C

It has its drawbacks, but I'd need to know what your expectations are. With Javascript the menu could behave however you like, with CSS there are limitations.

Share this post


Link to post
Share on other sites
On ‎3‎/‎19‎/‎2019 at 4:28 PM, dsonesuk said:

 

Thanks a bunch, as that is exactly what I was looking for.  I know beggars shouldn’t be choosy but if the dropdown is expanded on a mobile device and you scroll the screen, Link 1 of the dropdown is displayed next to the Home link on the menu bar. If the sub dropdown is expanded, and you scroll the screen, Link 1 and the sub dropdown button is displayed next to the Home link on the menu bar.  You can get a similar result if you just shrink your browser window expand one of the dropdowns and then maximize your browser window. The dropdowns stay expanded and can not be closed unless you shrink the browser window and collapse the dropdown.

Now I’m begging some as I know just enough to realize I don’t know enough.   I tried to create a sub dropdown by just copying all the CSS and adding sub to the dropdowns and dropbtns.  It works to some degree, but the submenu content only displays the first sub item on mobile devices. 

I’m sure very few if anyone will be shrinking their browser window on a computer to view the website so this may not matter.  If you make your browser window smaller when the responsive kicks in the sub dropdown is a hover not a click.  However, if you click on the sub dropdown then it becomes clickable and the hover is disabled, unless, the page is reloaded or refreshed.  Also, if you make your browser window smaller so the responsive kicks in if you select one of the dropdowns when you expand the browser window the dropdown you click on no longer works.

I totally understand if you don’t have the time or just don’t want to help.

Here’s what I got going.

https://www.w3schools.com/code/tryit.asp?filename=G2ASBQ3MSKFL

Share this post


Link to post
Share on other sites
2 hours ago, dsonesuk said:

Anyway to stop the expanded dropdown from jumping to the top of the screen?  On mobile devices as soon as you try to scroll the screen it jumps to the top.  Desktop Internet browser if you shrink the browser for the responsive to kick in and then expand the dropdown then if you maximize the browser it jumps to the top.

responsivemenuproblem.jpg

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...