Jump to content

Weebly Dropdown - Need help with code!


Tyefoods

Recommended Posts

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

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 by Funce
Link to comment
Share on other sites

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

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>
	

 

  • Thanks 1
Link to comment
Share on other sites

@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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...