0
Ich möchte einen Übergang hinzufügen, der meinen Hauptinhalt nach unten drückt, wenn das Twitter-Bootstrap-Minimierungsmenü über die Umschaltfläche aktiv ist.Auf neues Ereignis abhören, nachdem der Übergang beendet ist
Aber im Gegensatz zum Übergang des Minimierungsmenüs, wenn ich den Umschaltknopf zweimal schnell drücke, beenden meine Hauptinhaltelemente ihren anfänglichen Übergang nicht und verwenden stattdessen den Übergang, um wieder hochzufahren.
Abschließend, wenn ich das Kollapse-Menü vor dem Abschluss meines Hauptinhalts Übergang umschalten, wird mein Inhalt nach oben und verstecken sich hinter dem Bootstrap-Kollaps-Menü.
In der CSS sind die wichtigsten Teile die beiden Übergänge ganz unten.
var icon = document.getElementsByClassName("icon-bars");
var pushDown = document.getElementById("push");
//icon[0].addEventListener("mouseenter", highlight)
//icon[0].addEventListener("mouseleave", highlightNone);
/*
function highlight() {
listOfIcons = document.querySelectorAll(".icon-bar");
for(var i=0; i<listOfIcons.length; i++) {
listOfIcons[i].classList.add("icon-bar-light");
}
}
function highlightNone() {
var listOfIcons = document.querySelectorAll(".icon-bar");
for(var i=0; i<listOfIcons.length; i++) {
listOfIcons[i].classList.remove("icon-bar-light");
}
}
*/
$(document).ready(function(){
$(icon[0]).click(function(){
if($(pushDown).hasClass("push")){
pushDown.className = "pushUp";
}
else{
pushDown.className = "push";
}
})
});form {
max-width: 500px;
margin: 0px auto;
text-align: center;
}
input, textarea {
border: 3px solid #f47909;
padding-bottom: 10px;
}
input:focus, textarea:focus {
outline: none;
border: 3px solid #f2a25a;
}
label {
display: block;
margin-bottom: 20px;
}
span {
display: block;
}
textarea {
max-height: 200px;
height: 200px;
width: 300px;
max-width: 300px;
}
/*rest same as index.css*/
*{
font-family: 'futura';
}
.navvy {
border-radius: 0px;
margin: 0px;
height: 70px;
padding-top: 5px;
}
@media screen and (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
}
li{
padding-right: 30px;
font-size: 19px;
}
}
@media screen and (max-width: 767px) {
.navbar-collapse {
margin-top: 15px;
background-color: #FAFAFA;
}
li {
font-size: 17px;
}
}
.icon-bar {
background-color: #337ab7;
}
.icon-bar-light {
background-color: #23527C;
}
#li-back:hover {
background-color: #FAFAFA;
font-size: 20px;
font-weight: bolder;
}
.navbar-brand {
font-size: 25px;
color: #1d78c6;
}
#footer {
margin-top: 50px;
padding-top: 30px;
border-top: 2px dotted #8bc771;
text-align: center;
}
#description {
margin-top: 20px;
text-align: center;
font-size: 30px;
}
.push{
transition: transform 0.5s;
transform: translate(0px, 160px);
}
.pushUp{
transition: transform 0.5s;
transform: translate(0px, 0px);
}<!doctype html>
<html lang="en">
<head>
<title>VirusFun</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet">
<link rel="stylesheet" href="/css/contacts.css" type="text/css">
</head>
<body>
<div class="introPic">
</div>
<nav class="navbar navbar-default navbar-static-top navvy">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed icon-bars" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Virus Fun</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1" role="navigation">
<ul class="nav navbar-nav">
<li><a id="li-back" href="index.html">Home</a></li>
<li><a id="li-back" href="gallery.html">Gallery</a></li>
<li><a id="li-back" href="#">About</a></li>
<li><a id="li-back" href="contacts.html">Contacts</a></li>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div id="push" class="">
<!--The blurb -->
<p id="description">Ask whatever you want!</p>
<!-- The body -->
<div class="container-fluid">
<form action="https://formspree.io/[email protected]"
method="POST">
<div class="row">
<div class="col-sm-6 col-xs-6">
<label id="name">
<span>Your Name</span>
<input tabindex="1" placeholder="John Smith" type="text" name="name">
</label>
</div>
<div class="col-sm-6 col-xs-6">
<label id="email">
<span>Your Email</span>
<input tabindex="2" placeholder="[email protected]" type="email" name="Sender">
</label>
</div>
</div>
<label>
<span>Your Message</span>
<textarea tabindex="3" name="message"></textarea>
</label>
<div class="send">
<input tabindex="4" type="submit" value="Send">
</div>
</form>
</div>
<footer id="footer">
<p>© 2017 VIRUS FUN ALL RIGHTS RESERVED</p>
</footer>
</div>
<!--need this code to be declared before javascript-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="/javascript/javascript.js"></script>
<script src="jquery/jquery-3.1.1.min.js"></script>
</body>
</html>