Wie mache ich feste nav-bar mit jQuery slidetoggle Methode Inhalt nach unten schieben, anstatt es zu überlappen?

Ich fragte mich, ob jemand da draußen mir helfen könnte, eine Lösung für dieses Problem zu finden. Ich entwerfe gerade eine responsive mobile Webseite und ich habe derzeit eine feste Navigationsleiste beim Scrollen mit einer jQuery slide-toggle-Methode, die das Menü erweitert.Wie mache ich feste nav-bar mit jQuery slidetoggle Methode Inhalt nach unten schieben, anstatt es zu überlappen?

Mein Problem ist, dass, wenn ich auf den "Menü-Trigger" -Button klicke, anstatt den Rest des Inhalts nach unten zu schieben, wie ich es möchte, das Menü überlappt den Inhalt darunter.

Ich habe versucht, hier und anderswo nach Antworten zu suchen, aber ich konnte keine definitive Antwort finden. Es tut mir leid, wenn dies bereits gepostet wurde.

Ich habe keinen Code auf diesem Beitrag geschrieben, aber hier ist eine hypothetische JFiddle Ich habe das gleiche genaue Problem repliziert. Ich hoffe, dass jemand helfen kann, ich bin bereit, mir die Haare auszureißen !!

jQuery(document).ready(function() { 
 

 
\t jQuery(".menu-trigger").click(function() { 
 

 
\t \t jQuery(".menu-bar ul").slideToggle(); 
 
\t \t 
 
\t }); 
 

 
});

/*For Scrolling Purposes*/ 
 
body { 
 
    background:url(
 
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPklEQVQYV2O8dOnSfwYg0NPTYwTRuAAj0QqxmYBNM1briFaIzRbi3UiRZ75uNgUHGbfvabgfsHqGaIXYPAMAD8wgC/DOrZ4AAAAASUVORK5CYII= 
 
    ) repeat; 
 
    height: 2000px; 
 
} 
 

 

 
.menu-bar { 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    background: orange; 
 
} 
 

 
.menu-bar ul { 
 
    display: none; 
 
} 
 

 
.content { 
 
    margin-top: 50px; 
 
}

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

 
    <!--Menu Bar Div--> 
 
    <div class="menu-bar"> 
 
    <div class="menu-trigger"> 
 
     <p> 
 
     Button 
 
     </p> 
 
    </div><!--/Menu Trigger--> 
 
     <ul> 
 
     <li>1</li> 
 
     <li>2</li> 
 
     <li>3</li> 
 
     </ul> 
 
    </div><!--/Menu Bar--> 
 
    
 
    <!--Content Div--> 
 
    <div class="content"> 
 
    <ul> 
 
     <li>Some Content</li> 
 
     <li>Some Content</li> 
 
     <li>Some Content</li> 
 
     <li>Some Content</li> 
 
    </ul> 
 
    </div><!--/Content--> 
 
    
 
</body>

Hier ist die jfiddle Link. https://jsfiddle.net/Lq7qqnn9/

Hintergrund: Ziemlich gut mit HTML und CSS nicht so viel mit Javascript!

Quelle

2016-05-07 darthlaroque

Position feste Elemente nicht folgen normales Layout so ihre Kinder nicht den Rest des Inhalts der Seite beeinflussen. Wenn die Navigation relativ zur Position war, würde sie Inhalte herumschieben. Ich nehme an, Sie möchten, dass das Nav Ihnen auf der Seite folgt? Wenn ja, warum müsste der Inhalt je nach Scroll-Position verschoben werden? –

Hallo Nick! Danke für die Antwort. Ja, Sie machen tatsächlich einen guten Punkt. An diesem Punkt versuche ich verschiedene Dinge und stieß auf dieses Problem. Sobald ich sehe, wie alles zusammenkommt, weiß ich, ob ich etwas ändern soll oder nicht. – darthlaroque

Eine Option wäre die Verwendung eines Platzhalterelements anstelle eines Rands in Ihrem Inhalt. I.E. Fügen Sie einen Block hinter Ihrem festen Block hinzu, der die Höhe mit seiner festen Überlagerung beibehält.

jQuery(document).ready(function() { 
 

 
    jQuery(".menu-trigger").click(function() { 
 

 
    $(".menu-placeholder").css("height", $(".menu-bar").height()); 
 
    jQuery(".menu-bar ul").slideToggle({ 
 
     progress: function() { 
 

 
     $(".menu-placeholder").css("height", $(".menu-bar").height()); 
 
     } 
 
    }); 
 

 
    }); 
 

 
});

/*For Scrolling Purposes*/ 
 

 
body { 
 
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPklEQVQYV2O8dOnSfwYg0NPTYwTRuAAj0QqxmYBNM1briFaIzRbi3UiRZ75uNgUHGbfvabgfsHqGaIXYPAMAD8wgC/DOrZ4AAAAASUVORK5CYII= 
 
) repeat; 
 
    height: 2000px; 
 
} 
 
.menu-placeholder { 
 
    width: 100%; 
 
    height: 50px; 
 
} 
 
.menu-bar { 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    background: orange; 
 
} 
 
.menu-bar ul { 
 
    display: none; 
 
} 
 
.content {}

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

 
<body> 
 

 
    <!--Menu Bar Div--> 
 
    <div class="menu-bar"> 
 
    <div class="menu-trigger"> 
 
     <p> 
 
     Button 
 
     </p> 
 
    </div> 
 
    <!--/Menu Trigger--> 
 
    <ul> 
 
     <li>1</li> 
 
     <li>2</li> 
 
     <li>3</li> 
 
    </ul> 
 
    </div> 
 
    <!--/Menu Bar--> 
 

 
    <!--Content Div--> 
 
    <div class="menu-placeholder"></div> 
 

 
    <div class="content"> 
 
    <ul> 
 
     <li>Some Content</li> 
 
     <li>Some Content</li> 
 
     <li>Some Content</li> 
 
     <li>Some Content</li> 
 
    </ul> 
 
    </div> 
 
    <!--/Content--> 
 

 
</body>

Quelle

2016-05-07 04:23:50 teynon

Wow! Vielen Dank für die schnelle Antwort !! Du bist toll! Ich werde das sofort in meinen Code implementieren. Ich habe buchstäblich am längsten damit verbracht, herauszufinden, ob jemand hier mir helfen könnte. Vielen Dank Tom! – darthlaroque

Wie mache ich feste nav-bar mit jQuery slidetoggle Methode Inhalt nach unten schieben, anstatt es zu überlappen?

Antwort

Verwandte Themen