Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

余談:ハンバーガーメニューって

 どうも!LSSです!!

 

昨日の記事、

に関する、余談なんですが…。

 

なんとなく…ハンバーガーメニューについて考えているうちに、

【CSS】丸から四角に変形するボックス - Little Strange Software

 は、ビッグマックにしようか、てりやきバーガーにしようか」って考えてたわけじゃなくて、あれです。(ちなみにビッグマックが好きですw)

スマホアプリなんかでたまに見かける、「≡」みたいなのが右上にあって、それをタップするとメニューが出てくる機能ですw

余談の余談ですが、≡って「ごうどう」で変換すると出てくるんですね!

 

詳しくは、

note.com

こんなノートを見つけました^^ 

 

 

あと、ついでにサンプルにちょっと手を加えてみました。 

 

ここに適当に文章を書きます。
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)

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^