【HTML&CSS&JavaScript】簡単にスタイリッシュなメニューを作成できる『Magic Navigation Menu』を紹介!

スポンサーリンク
PC

ドーモ!ぬま畑です!

 

本日は久々のテック(?)記事。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みて実際に打ってみると良いと思います。

 

あとがき

いかがでしたでしょうか?

 

私事で恐縮ですが、動画見てテンション上がり「よし、パクろう(笑)」と、オリジナルアプリ作成のためのメニューをこれで作ってしまおうと(笑)

 

メニューをリッチにしたかったので丁度いいなと思ったところでした^^;

 

ここ見ている方でポートフォリオとしてオリジナルアプリを作成している方はこういうの実装するのもいいと思います。

 

それでは、最後までお読み頂きありがとうございましたノシ


[Twitter]
ツイッターもやってるんでよろしければフォローお願いしますm(_ _)m
※フォローしていただければ記事の更新時にツイート(通知)しますので他の記事やレビューが見たいという方はフォローください!

↓↓↓↓↓



[stand.fm]
またstandFMもやっているので興味ある方はどうぞ!
※ビジネス書評や時々思ったこと、更に映画のこと、様々なレビューを語っています。

↓↓↓↓↓


ぬまたのラジオチャンネル(仮称)

タイトルとURLをコピーしました