Tyefoods Posted March 28, 2019 Share Posted March 28, 2019 Afternoon everyone! Just need a little bit of help with some coding. Trying to create a dropdown directory list of photo galleries, which will only appear on Mobile devices The list contains links that take you to the relevant page with the photos. On a mobile device, you can press on it to expand the list, however I cannot get it to click-shut (collapse again) The code I'm using is as follows; <style> .wcustomhtml { overflow: visible !important; } .dropbtn { background-color: #a1a1a1; color: white; min-width: 250px; padding: 16px; font-size: 16px; border: none; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 250px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #ddd;} .dropdown:hover .dropdown-content {display: block;} .dropdown:hover .dropbtn {background-color: a1a1c1;} </style> <div class="dropdown"> <button class="dropbtn">Photo Galleries</button> <div class="dropdown-content"> <a href="http://marleys2019.weebly.com/new-truck.html">Truck Fitout</a> <a href="http://marleys2019.weebly.com/2009-christmas.html">09 Xmas Party</a> <a href="http://marleys2019.weebly.com/40-years.html">40Yrs Surprise</a> <a href="http://marleys2019.weebly.com/hope-valley-opening.html">Hope Valley Opening</a> </div> </div> Can anyone please help me with what I'm missing?! I just need it to collapse when you press it again. Many thanks in advance! Link to comment Share on other sites More sharing options...
Funce Posted April 1, 2019 Share Posted April 1, 2019 (edited) There really isn't anything on here that would describe unusual behaviour. Clicking on something on a mobile initiates a hover style due to the fact the 'mobile cursor' is now on top of it. To reverse it, you just click off of it. You would need some JavaScript to get it to react properly. What's your experience level with using JavaScript on your website? Edited April 1, 2019 by Funce Link to comment Share on other sites More sharing options...
Tyefoods Posted April 1, 2019 Author Share Posted April 1, 2019 Morning Funce, It kinda-sorta does reverse when you click off, but only in specific places. Pressing above the dropdown box, or selecting a photo will close it. But if you click between the grid or in the paragraph it just doesn't seem to want to work (Much like me today!) Unfortunately this is my first time dabbling with any sort of code, we're building a new website for our company's 50th. So honestly, never touched JavaScript. Link to comment Share on other sites More sharing options...
JMRKER Posted April 2, 2019 Share Posted April 2, 2019 The original posted code works as it should on both mouse and hover style screens. Personally I would leave it as is. However, if I am reading your original request correctly, you want the content selections to be visible when the title is clicked on and removed when it is clicked a second time. Forgive me if that is not the desired results. To accomplish this, you could make these changes to your code. In the CSS section, change: <style> .wcustomhtml { overflow: visible !important; } .dropbtn { background-color: #a1a1a1; color: white; min-width: 250px; padding: 16px; font-size: 16px; border: none; } .dropdown { position: relative; display: inline-block; } .dropdown-content { position: absolute; background-color: #f1f1f1; min-width: 250px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #ddd;} .hide { display: none; } </style> Add a JS section with this: <script> function init() { const sel = document.querySelectorAll('.dropbtn'); for ( let el of sel) { el.addEventListener('click', function () { el.nextElementSibling.classList.toggle('hide'); } ); } } init(); </script> Un-tested on phone: Might also be able to combine CSS with separate 'media' setups Another un-tested attempt would be able to use the CSS above but add in the original :hover logic for the button as well but it might be confusing to the user when the display occurs both on hover and click (with possible conflicts due to simultanous displays) Add the following CSS back into the block to see resulting actions .dropdown:hover .dropdown-content {display: block;} .dropdown:hover .dropbtn {background-color: a1a1c1;} I don't like this, but if it fulfills your needs then feel free to experiment further. Final version incorporating code for each of the suggestions above. Current setup below is for clicking the top buttons to hide/show rather than hover actions. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/> <!-- From: http://w3schools.invisionzone.com/topic/58819-weebly-dropdown-need-help-with-code/ --> <title> HTML5 Test Page </title> <style> .wcustomhtml { overflow: visible !important; } .dropbtn { background-color: #a1a1a1; color: white; min-width: 250px; padding: 16px; font-size: 16px; border: none; } .dropdown { position: relative; display: inline-block; } .dropdown-content { position: absolute; background-color: #f1f1f1; min-width: 250px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #ddd;} .hide { display: none; } /* used in new version with JS */ /* original version without JS .dropdown:hover .dropdown-content {display: block;} .dropdown:hover .dropbtn {background-color: a1a1c1;} /* */ /* Might be able to use both hover and click functions by leaving original CSS in and adding new JS version code. Un-tested: Might also be able to combine with separate 'media' setups */ </style> </head> <body> <div class="dropdown"> <button class="dropbtn">Photo Galleries 1</button> <div class="dropdown-content hide"> <a href="http://marleys2019.weebly.com/new-truck.html">Truck Fitout</a> <a href="http://marleys2019.weebly.com/2009-christmas.html">09 Xmas Party</a> <a href="http://marleys2019.weebly.com/40-years.html">40Yrs Surprise</a> <a href="http://marleys2019.weebly.com/hope-valley-opening.html">Hope Valley Opening</a> </div> </div> <div class="dropdown"> <button class="dropbtn">Photo Galleries 2</button> <div class="dropdown-content hide"> <a href="http://marleys2019.weebly.com/new-truck.html">Truck Fitout</a> <a href="http://marleys2019.weebly.com/2009-christmas.html">09 Xmas Party</a> <a href="http://marleys2019.weebly.com/40-years.html">40Yrs Surprise</a> <a href="http://marleys2019.weebly.com/hope-valley-opening.html">Hope Valley Opening</a> </div> </div> <script> function init() { const sel = document.querySelectorAll('.dropbtn'); for ( let el of sel) { el.addEventListener('click', function () { el.nextElementSibling.classList.toggle('hide'); } ); } } init(); </script> </body> </html> 1 Link to comment Share on other sites More sharing options...
Tyefoods Posted April 2, 2019 Author Share Posted April 2, 2019 @JMRKER You sir, are a legend. That is exactly what I am after! My original code will be left on the desktop version of the website as the hover functionality is easy, but your magnificently built code will be for our mobile (And more used!) version! I cannot tell you how many hours I spent playing with this code. Absolute life saver! Link to comment Share on other sites More sharing options...
JMRKER Posted April 4, 2019 Share Posted April 4, 2019 On 4/2/2019 at 6:39 PM, Tyefoods said: @JMRKER You sir, are a legend. That is exactly what I am after! My original code will be left on the desktop version of the website as the hover functionality is easy, but your magnificently built code will be for our mobile (And more used!) version! I cannot tell you how many hours I spent playing with this code. Absolute life saver! You are most welcome. Glad I could help. Good Luck! 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