ike Posted March 18, 2019 Share Posted March 18, 2019 Is there anyway to make this dropdown menu use onclick instead of hover on small screens. I'm creating a menubar with several dropdowns and a couple sub-dropdowns with-in them and as it is on small screes the menu is too hard to navigate with the hover. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_responsive_navbar_dropdown Thanks! Link to comment Share on other sites More sharing options...
Ingolme Posted March 19, 2019 Share Posted March 19, 2019 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted March 19, 2019 Share Posted March 19, 2019 https://www.w3schools.com/code/tryit.asp?filename=G29T83GSXJ5Z Link to comment Share on other sites More sharing options...
ike Posted March 21, 2019 Author Share Posted March 21, 2019 On 3/19/2019 at 4:28 PM, dsonesuk said: https://www.w3schools.com/code/tryit.asp?filename=G29T83GSXJ5Z 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted March 21, 2019 Share Posted March 21, 2019 It usually works similar to https://www.w3schools.com/code/tryit.asp?filename=G2AY7LYMC6S7 Link to comment Share on other sites More sharing options...
ike Posted March 21, 2019 Author Share Posted March 21, 2019 2 hours ago, dsonesuk said: It usually works similar to https://www.w3schools.com/code/tryit.asp?filename=G2AY7LYMC6S7 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now