Как сделать так, чтобы раскрывающийся список отображался поверх содержимого, а не в порядке содержимого pu sh? - PullRequest
Новая
       33

Как сделать так, чтобы раскрывающийся список отображался поверх содержимого, а не в порядке содержимого pu sh?

0 голосов
/ 24 марта 2020

Я не могу понять, как сделать раскрывающийся список поверх содержимого ниже. На данный момент контент - это просто большая темная коробка, но она все равно будет подавлена, вместо того, чтобы оставаться на месте. Как сделать так, чтобы раскрывающийся список скользил по этому контенту, а не надавливал содержимое страницы вниз? 

            <div class="menu-icon" onclick="myFunction(this)">
              <div class="bar1"></div>
              <div class="bar2"></div>
              <div class="bar3"></div>
            </div>
          <div style="display:none;" class="nav-dropdown">
            <a href="#">How It Works</a>
            <a href="#">FAQ</a>
            <a href="#">PRIVACY AND SECURITY</a>
            <a href="#">SUPPORT</a>
            <a style="border-bottom: none;" href="#">GET EARLY ACCESS</a>
          </div>

These script tags are for clicking the dropdown to make it toggle slide.
      <script>
        $(document).ready(function() {
          $(".menu-icon").click(function() {
            $(".nav-dropdown").slideToggle();
          });
        });
      </script>
      <script>
        function myFunction(x) {
          x.classList.toggle("change");
        }
      </script>


    .nav-dropdown {
      background-color: rgb(27, 27, 31);
      display: flex;
      flex-flow: column nowrap;
    }

1 Ответ

0 голосов
/ 24 марта 2020

Я проверил ваш код, и он работает как положено. В чем проблема?

Вот пример 

 .nav-dropdown {
      background-color: rgb(27, 27, 31);
      display: flex;
      flex-flow: column nowrap;
      color:white;
      position: absolute;;
      left:0;
      top:100%;
      z-index:999;
    }
<!DOCTYPE html>
<html>
<head>
  <style>
     .menu-icon {
       width: 100px;
       height: 100px;
       background-color: blue;
       color: white;
       position:relative;
     }
  </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".menu-icon").click(function(){
    $(".nav-dropdown").slideToggle();
  });
  
});
</script>
<script>
  function myFunction(x) {
    x.classList.toggle("change");
  }
</script>
</head>
<body>
   <div class="menu-icon" onclick="myFunction(this)">
    click here
    <div style="display:none;" class="nav-dropdown">
        <a href="#">How It Works</a>
        <a href="#">FAQ</a>
        <a href="#">PRIVACY AND SECURITY</a>
        <a href="#">SUPPORT</a>
        <a style="border-bottom: none;" href="#">GET EARLY ACCESS</a>
    </div>
  </div>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letrase</p>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...