ボックスを開く、たたむを表現するアニメーションの作成 | Creating an animation that expresses the opening and folding of a box

HTML

<div id="box">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>JQuery</li>
<li>PHP</li>
</ul>
</div>
<header>
<div class="header-contents">
<div id="box_btn">Menu</div>
<h2>ボックスを開く・たたむ | Open / fold the box </h2>
<h4>アニメーション機能を使う | Use the animation function</h4>
</div>
</header>

CSS

#box {
display: none;
margin: 0 auto 0 auto;
max-width: 760px;
background-color: bisque;
}
#box ul {
margin: 0;
padding: 0;
list-style: none;
}
#box li {
padding: 8px 0 ;
color: #20567d;
border-bottom: 1px solid #ffffff;
}
.header-contents {
position: relative;
background-color: aquamarine;
}
#box_btn {
position: absolute;
top:0;
right: 0;
border-radius: 0 0 8px 8px;
padding: 6px 20px ;
background-color: rgb(140, 188, 207);
cursor: pointer;
}

JavaScript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#box_btn').on('click',function(){
$('#box').slideToggle('slow');
});
});
</script>

JavaScriptが動作しない環境ではボックスが開かれた状態で表示される。| In an environment where JavaScript does not work, the box is displayed in an open state.

Menu

ボックスを開く・たたむ | Open / fold the box

アニメーション機能を使う | Use the animation function

解説

まずは「ボックスが開いた」ときの状態をHTMLとCSSで作成しておきます。次に、CSSでさらに「display: none;」として「ボックスがたたまれた状態」にします。| First, create the state when "the box is opened" with HTML and CSS. Next, in CSS, further set "display: none;" to "the box is collapsed".

「 $('#box_btn').on('click',function(){～　」　→　クリックイベントが発生したときに実行されるファンクションを意味します。A function that is executed when a click event occurs.

「 $('#box').slideToggle('slow');」　→　slideToggleでは取得している要素のボックスが閉じている状態のときは開き、開いているときは閉じます。| In slideToggle, when the box of the acquired element is closed, it opens, and when it is open, it closes.

slideToggle('fast');ではアニメーション速度が速くなり、slideToggle(1000)ではアニメーションにかかる時間をミリ秒で指定できます。| slideToggle ('fast'); speeds up the animation, and slideToggle (1000) allows you to specify the time it takes to animate in milliseconds.

<noscript>～</noscript>:タグについて

<noscript>:～</noscript>の中に書かれた要素はJavascriptが動作しない環境で閲覧している時だけ有効になります。| The elements written in ＜noscript＞ ～ ＜ / noscript＞ are valid only when browsing in an environment where Javascript does not work.

今回は上記CSSとは別途設定として下記のようにしているのでJavascriptが動作しない環境ではボックスが開かれた状態で表示されます。| This time, since it is set as follows separately from the above CSS, it will be displayed with the box opened in the environment where Javascript does not work.

CSS

<noscript>
<style>
#box {
display: none;
margin: 0 auto 0 auto;
max-width: 760px;
background-color: bisque;
}
</style>
</noscript>

もっと深く学びたい人にはこちらもどうぞ。| For those who want to learn more deeply, this is also recommended.

ぺージの先頭に戻る(Return to top of page)

プライバシーポリシー