0
トグルボタンを使ってTwitterのブートストラップコラプスメニューがアクティブになっているときにメインコンテンツをプッシュするトランジションを追加します。移行が完了した後に新しいイベントを聞きます
折りたたみメニューのトランジションとは異なり、トグルボタンをすばやくダブルクリックすると、メインのコンテンツ要素が最初のトランジションを終了せず、代わりにトランジションを使用してバックアップを取ります。
結論として、メインのコンテンツの移行が完了する前に折りたたみメニューを切り替えると、コンテンツが上に移動し、ブートストラップの折りたたみメニューの背後に隠れてしまいます。
CSSでは、重要な部分は一番下の2つのトランジションです。ここで
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>