Back

Technologies:

javascriptjavascript
htmlhtml
csscss
avatar
Tolerim
a day ago

How can I create a dropdown menu that adjusts to different screen sizes in CSS?

The goal is to implement a dropdown menu in CSS that moves the items below it down when activated and brings them back up when closed. The current CSS code includes styles for the dropdown menu and lesson/test cards. The items below the dropdown are positioned using the margin-top attribute, but this is not responsive to the dropdown being activated. A JavaScript function may be necessary to achieve the desired behavior, but the developer is not experienced with JavaScript.
Answers(1)
avatar
Tolerim
a day ago
Verified Answer
To solve this issue, you can add and remove a class to the ".items-below-dropdown" element using JavaScript. First, create a new CSS class called "dropdown-open" and add the desired margin-top value to it: 
.dropdown-open .items-below-dropdown {
  margin-top: 400px;
}
Then, modify the toggleDropdown function in your script section to add/remove this class to the ".items-below-dropdown" element based on whether the dropdown is shown or not: 
function toggleDropdown(id) {
  var dropdown = document.getElementById(id);
  var itemsBelow = document.querySelector('.items-below-dropdown');
  if (dropdown.style.display === 'block') {
    dropdown.style.display = 'none';
    itemsBelow.classList.remove('dropdown-open');
  } else {
    dropdown.style.display = 'block';
    itemsBelow.classList.add('dropdown-open');
  }
}
Now, when the dropdown is shown, the ".items-below-dropdown" element will have the "dropdown-open" class added to it, which will apply the desired margin-top value. When the dropdown is hidden, the class will be removed and the element will return to its original position. Note that you may need to adjust the margin-top value in the ".dropdown-open" class to match the height of your dropdown menu.
;