どうも!LSSです!!
昨日の記事、
に関する、余談なんですが…。
なんとなく…ハンバーガーメニューについて考えているうちに、
【CSS】丸から四角に変形するボックス - Little Strange Software
は、「ビッグマックにしようか、てりやきバーガーにしようか」って考えてたわけじゃなくて、あれです。(ちなみにビッグマックが好きですw)
スマホアプリなんかでたまに見かける、「≡」みたいなのが右上にあって、それをタップするとメニューが出てくる機能ですw
余談の余談ですが、≡って「ごうどう」で変換すると出てくるんですね!
詳しくは、
こんなノートを見つけました^^
あと、ついでにサンプルにちょっと手を加えてみました。
brタグによる改行もできます。
この部分の文章は好きに変更できます!
- 左に配置するとこうなります
- borderでちょっと飾ってみるとこんな感じになります
- 開く時と閉じる時のスピードを変える事もできます
- 開いた後の四角も少し角丸にしてみました
…あたりを盛り込んでみました。
コードはこんな感じ。
<style><!--
.hamb{
position:absolute;
z-index:1;
top:0px;left:0px;
overflow:hidden;
padding:5px;
background-color: pink;
border:8px double white;
border-radius: 50%; width: 30px; height: 30px;
transition:2s linear 0s;
}
.hamb:hover{
border-radius: 6%;width: 300px; height: 200px;
transition:0.6s linear 0s;
}
--></style>
<div style="position: relative;">
<div class="hamb">ここに適当に文章を書きます。<br />brタグによる改行もできます。<br /><br />この部分の文章は好きに変更できます!</div>
</div>
赤字部分が変更or追加箇所です。
transitionの「閉じるのに2秒、開くのに0.6秒」というのが感覚的に逆なのがちょっと引っ掛かりそうな点ですね。
borderが「double」なのに一本線に見えるのは…線の色がwhiteで、このブログのバックも白いためです。(判別できませんが、外側にもう一本白い線が実はあります)
最初、丸く見えているとはいえ、ボックスなので、
↑この記事にあるような装飾を試してみるのもいいかもですね^^(過去記事宣伝w)
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^