CMS Development

unicorndev
Contributor

Have dropdown menu display over other dropdown on mobile

Hello there, I'd like to have my dropdown menu display over the other dropdowns and not below it!

 

Screen Shot 2022-11-18 at 5.58.30 PM.png

 This is what happens when I click on Test Technique.

 

 

<div class="container">
  <div class="dropdown">
    <div class="caption">Sensor Types <i class="fa-solid fa-sort"></i></div>
    <div class="list">
      <div class="item" onclick="location.href='http://uson-21034480.hs-sites.com/-temporary-slug-0dc22785-c583-47d6-a789-597956bd6d23?hs_preview=xVldWvin-79629571592'">Differential Pressure</div>
      <div class="item" onclick="location.href='http://uson-21034480.hs-sites.com/-temporary-slug-faf8fb14-97c7-460b-9b99-4217f9175578?hs_preview=ZCnAaNRX-79754160819'">Electrical Current</div>
      <div class="item" onclick="location.href='http://uson-21034480.hs-sites.com/-temporary-slug-2d9322c5-3f9a-4097-9005-24118e5a720d?hs_preview=dmxZioyB-79753734578'">Electrical Volts</div>
      <div class="item" onclick="location.href='http://uson-21034480.hs-sites.com/-temporary-slug-43254bd6-1275-46cb-ba72-a3970da2adf1?hs_preview=OtzvXEWc-79753734673'">Laminar Flow Sensor Type</div>
      <div class="item" onclick="location.href='#'">Load Cell</div>
      <div class="item" onclick="location.href='http://uson-21034480.hs-sites.com/-temporary-slug-746b8b07-2f67-4ddf-a339-9f2cb4c30e25?hs_preview=YNkmoLOd-79753734699'">LVDT</div>
      <div class="item" onclick="location.href='#'">Pressure</div>
      <div class="item" onclick="location.href='#'">Temperature</div>
    </div>
  </div>
  
    <div class="dropdown">
    <div class="caption">Test Techniques <i class="fa-solid fa-sort"></i></div>
    <div class="list">
      <div class="item" onclick="location.href='http://uson-21034480.hs-sites.com/-temporary-slug-0dc22785-c583-47d6-a789-597956bd6d23?hs_preview=xVldWvin-79629571592'">Auto Zero</div>
      <div class="item" onclick="location.href='http://uson-21034480.hs-sites.com/-temporary-slug-faf8fb14-97c7-460b-9b99-4217f9175578?hs_preview=ZCnAaNRX-79754160819'">Burst Under Pressure</div>
      <div class="item" onclick="location.href='http://uson-21034480.hs-sites.com/-temporary-slug-2d9322c5-3f9a-4097-9005-24118e5a720d?hs_preview=dmxZioyB-79753734578'">Burst Under Vacuum</div>
      <div class="item" onclick="location.href='http://uson-21034480.hs-sites.com/-temporary-slug-43254bd6-1275-46cb-ba72-a3970da2adf1?hs_preview=OtzvXEWc-79753734673'">Coarse Flow</div>
      <div class="item" onclick="location.href='#'">EV Battery</div>
      <div class="item" onclick="location.href='http://uson-21034480.hs-sites.com/-temporary-slug-746b8b07-2f67-4ddf-a339-9f2cb4c30e25?hs_preview=YNkmoLOd-79753734699'">Crack Downstream</div>
    </div>
  </div>
  
    <div class="dropdown">
    <div class="caption">Industry <i class="fa-solid fa-sort"></i></div>
    <div class="list">
      <div class="item" onclick="location.href='http://uson-21034480.hs-sites.com/-temporary-slug-0dc22785-c583-47d6-a789-597956bd6d23?hs_preview=xVldWvin-79629571592'">Automotive</div>
      <div class="item" onclick="location.href='http://uson-21034480.hs-sites.com/-temporary-slug-faf8fb14-97c7-460b-9b99-4217f9175578?hs_preview=ZCnAaNRX-79754160819'">Industrial</div>
      <div class="item" onclick="location.href='http://uson-21034480.hs-sites.com/-temporary-slug-2d9322c5-3f9a-4097-9005-24118e5a720d?hs_preview=dmxZioyB-79753734578'">Medical</div>
      <div class="item" onclick="location.href='http://uson-21034480.hs-sites.com/-temporary-slug-43254bd6-1275-46cb-ba72-a3970da2adf1?hs_preview=OtzvXEWc-79753734673'">Packaging</div>
      <div class="item" onclick="location.href='#'">EV Battery</div>
      <div class="item" onclick="location.href='http://uson-21034480.hs-sites.com/-temporary-slug-746b8b07-2f67-4ddf-a339-9f2cb4c30e25?hs_preview=YNkmoLOd-79753734699'">Custom Solutions</div>
    </div>
  </div>
  
</div>

 

 

Don't want to show you other CSS code thats just styling fluff so here is just the mobile media query:

 

@media only screen and (min-width: 200px) and (max-width: 900px) {
  div.container {
    justify-content: center;
    display: block;
    margin-top: 30px;
}
}

 

 

JS:

 

$(function() {
  
  $('.dropdown > .caption').on('click', function() {
    $(this).parent().toggleClass('open');
  });
  
  $('.dropdown > .list > .item').on('click', function() {
    $('.dropdown > .list > .item').removeClass('selected');
    $(this).addClass('selected').parent().parent().removeClass('open').children('.caption').text( $(this).text() );
  });
  
  $(document).on('keyup', function(evt) {
    if ( (evt.keyCode || evt.which) === 27 ) {
      $('.dropdown').removeClass('open');
    }
  });
  
  $(document).on('click', function(evt) {
    if ( $(evt.target).closest(".dropdown > .caption").length === 0 ) {
      $('.dropdown').removeClass('open');
    }
  });
  
});

 

 

And on another note, I also can't seem to close the dropdown menu when I click on another 😞

 

Any suggestions would be appreciated, thanks so much!

0 Upvotes
1 Reply 1
Jaycee_Lewis
Community Manager
Community Manager

Have dropdown menu display over other dropdown on mobile

Hi, @unicorndev 👋 Thanks for including your details. Hey, @amwilie @SJaeger, do you have any thoughts on how @unicorndev can approach this type of menu styling? Thank you! — Jaycee

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

0 Upvotes