ドーモ！ぬま畑です！
本日は久々のテック（？）記事。HTMLでスタイリッシュなメニューを作るというテーマでお話します。
内容としてはHTMLとCSS、そして少しだけJavaScriptを使用して作成するというもの。
なお、この記事の下記にあるURL（GitHub）を覗いていただくか、紹介している動画（YouTube）を見て実際に作成していただくとスタイリッシュなメニューが出来て、しかもカスタマイズも出来てしまうコードが学べますので是非とも最後までご覧ください。
さて。
今日はお休みだったのでお昼ごろちょっとした休憩をとってました。
その時、なんの気なしにふとYouTubeにアクセスしたら面白い動画を発見したのでご紹介します。
『おい・・・お前テック記事言うたやんけ！！』
と思った方は鋭い（笑）
まぁまぁ落ち着いてください、動画紹介したいわけ・・・あ、いや動画紹介みたいなものかもしれませんが、きちんとHTMLというか主にはCSSを主軸としたメニューのお話ですが、その動画を見てもらった方が早いので紹介します。
それがコチラ！！
見ていただいたらわかりますが、動画の通りにHTML+CSS（あと、少しのJavascriptも）書けば簡単に実装できるメニューを作成していて、これは凄いなと思ったので実際に作ってみました。
・・・ただ、HTMLとCSSファイルをこのサーバーに上げて実際に動きを見てもらっても良かったのですが、セキュリティとか面倒くさい(爆)のでGitHubにあげておきました。
興味ある方は確認してみてください。
https://github.com/numahata1011/mybbs.ins/blob/master/resources/views/components/layout.blade.php
https://github.com/numahata1011/mybbs.ins/blob/master/public/css/magic.css
実際の動きはこんな感じ。
実際に動画の通り、もしくは僕がGitHubniプッシュしたコードをHTMLに貼り付けて、CSSもそれ用に用意するだけで上記の動画のようなメニューが作成できちゃうという簡単なのに凄いコードとなっております！
少しだけJavaScriptも書きますが、主にはCSSなのでCSSの勉強している方にとってはかなりためになるコードだと思います。良かったらGitHubもしくはYouTubeみて実際に打ってみると良いと思います。
いかがでしたでしょうか？
私事で恐縮ですが、動画見てテンション上がり「よし、パクろう(笑)」と、オリジナルアプリ作成のためのメニューをこれで作ってしまおうと(笑)
メニューをリッチにしたかったので丁度いいなと思ったところでした^^;
ここ見ている方でポートフォリオとしてオリジナルアプリを作成している方はこういうの実装するのもいいと思います。
それでは、最後までお読み頂きありがとうございましたﾉｼ
[template id=”2699″]