CSS ein verstecktes Drop-Menü angezeigt wird auf mobilen

Question

Ich habe einen Drop-up Fußzeile, die große funktioniert:

$('#drop-up-open').click(function() { 
 
    $('#drop-up #drop-upDashboard').slideToggle({ 
 
    direction: "up" 
 
    }, 300); 
 
    $(this).toggleClass('drop-upClose'); 
 
}); // end click

#drop-up { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    padding-bottom: 4%; 
 
    z-index: 100; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    left: 0; 
 
    right: 0; 
 
} 
 

 
#drop-up-open { 
 
    cursor: pointer; 
 
    text-decoration: none; 
 
} 
 

 
#drop-up .drop-upClose {} 
 

 
#drop-up #drop-upDashboard { 
 
    display: none; 
 
} 
 

 
@media screen and (max-width: 1000px) { 
 
#drop-up #drop-upDashboard{ 
 
display:block; } 
 
}

<div class="container"> 
 

 
    <!-- Jumbotron Header --> 
 
    <header class="jumbotron panel-heading"> 
 

 
    <p class="text-center"> 
 
    
 
       Text getting covered by drop-up menu on mobile 
 

 
    </p> 
 

 
    <section> 
 
       <a href="#"><button> Main button </button></a> 
 
    </section> 
 
    
 
    </header> 
 

 
<div id="drop-up"> 
 
    <a href="#" id="drop-up-open">Open</a> 
 

 
    <div id="drop-upDashboard"> 
 
    <p>It's now open!</p> 
 

 
    <div class="row"> 
 

 
     <div class="col-md-3 col-xs-12"> 
 
     <section> <a href="#"><button> 
 
          
 
          <p>Button 1</p> 
 

 
         </button></a> </section> 
 
     </div> 
 

 
     <div class="col-md-3 col-xs-12"> 
 
     <section> <a href="#"><button> 
 
          
 
          <p>Button 2</p> 
 

 
         </button></a> </section> 
 
     </div> 
 

 
     <div class="col-md-3 col-xs-12"> 
 
     <section> <a href="#"><button> 
 
          
 
          <p>Button 3</p> 
 

 
         </button></a> </section> 
 
     </div> 
 

 
     <div class="col-md-3 col-xs-12"> 
 
     <section> <a href="#"><button> 
 
          
 
          <p>Button 4</p> 
 

 
         </button></a> </section> 
 
     </div> 
 

 
    </div> 
 
    <!-- row --> 
 
    </div> 
 
    <!-- dashboard --> 
 
</div> 
 
<!-- drop-up --> 
 
</div> 
 
<!-- container -->

Wenn ich auf die id = "Drop-up" div Das Menü wird von unten nach oben geöffnet und belegt in der Desktopansicht einen kleinen Teil des unteren Fensters.

Nun, was ich will ist, dass dieses Menü, das zuerst auf der Desktop-Ansicht versteckt ist, auf kleineren Geräten (Handy + Tablet) angezeigt wird, ohne auf die ID = "Drop-up" div. Es würde den gleichen Teil der Unterseite der Seite auf Handy + Tablet belegen (und der Benutzer müsste dann nach unten scrollen, um das Drop-up-Menü auf kleineren Geräten zu sehen, was in der Desktop-Ansicht nicht der Fall ist).

Irgendwelche Vorschläge/Tipps über die beste Methode, um dies zu erreichen?

Answer 1

Sie könnten das ganze Ding in eine Flex-Box wickeln, dann den Körper biegen lassen, um den Rest des Raumes zu füllen, und so Ihre Fußzeile auf die Fußzeile bringen. Erscheint auch, wenn Sie reagieren.

JEDOCH fühlt sich das im Moment ziemlich hacky an, als ob man einen Rahmen um den Flexbox Container ziehen würde, er würde nur auf seiner ursprünglichen 100% Ebene passen.

$('#drop-up-open').click(function() { 
 
    $('#drop-up #drop-upDashboard').slideToggle({ 
 
    direction: "up" 
 
    }, 300); 
 
    $(this).toggleClass('drop-upClose'); 
 
}); // end click

html, body { 
 
    height: 100%; 
 
} 
 
#drop-up-open { 
 
    cursor: pointer; 
 
    text-decoration: none; 
 
} 
 

 
#drop-up .drop-upClose {} 
 

 
#drop-up #drop-upDashboard { 
 
    display: none; 
 
} 
 

 
@media screen and (max-width: 200px) { 
 
    #drop-up #drop-upDashboard{ 
 
    display:block; } 
 

 
    html, body { 
 
    height: auto !important; 
 
    } 
 

 
} 
 

 

 
.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    border: 1px solid black; 
 
    min-height: 100%; 
 
} 
 

 
.body { 
 
    flex: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 

 
    <!-- Jumbotron Header --> 
 
    <header class="jumbotron panel-heading" style="background-color: yellow; opacity: 0.7"> 
 

 
     <p class="text-center"> 
 

 
        Text getting covered by drop-up menu on mobile 
 

 
     </p> 
 

 
     <section> 
 
        <a href="#"><button> Main button </button></a> 
 
     </section> 
 

 
    </header> 
 
    
 
    <div class="body" style="background-color: orange; opacity: 0.3"> 
 
     a body 
 
    </div> 
 

 
    <div id="drop-up" style="background-color: lightblue; opacity: 0.7"> 
 
    <a href="#" id="drop-up-open">Open</a> 
 

 
    <div id="drop-upDashboard"> 
 
     <p>It's now open!</p> 
 

 
     <div class="row"> 
 

 
     <div class="col-md-3 col-xs-12"> 
 
      <section> <a href="#"><button> 
 

 
           <p>Button 1</p> 
 

 
          </button></a> </section> 
 
     </div> 
 

 
     <div class="col-md-3 col-xs-12"> 
 
      <section> <a href="#"><button> 
 

 
           <p>Button 2</p> 
 

 
          </button></a> </section> 
 
     </div> 
 

 
     <div class="col-md-3 col-xs-12"> 
 
      <section> <a href="#"><button> 
 

 
           <p>Button 3</p> 
 

 
          </button></a> </section> 
 
     </div> 
 

 
     <div class="col-md-3 col-xs-12"> 
 
      <section> <a href="#"><button> 
 

 
           <p>Button 4</p> 
 

 
          </button></a> </section> 
 
     </div> 
 

 
     </div> 
 
     <!-- row --> 
 
    </div> 
 
    <!-- dashboard --> 
 
    </div> 
 
    <!-- drop-up --> 
 
</div> 
 
<!-- container -->