Noise of Web Programming

主にHTML/CSS/JavaScriptやWebサービスの情報を配信しています。可能な限り実装方法まで書いていくつもりです。

ブログを移転しました。

このサイト同様、HTML/CSS/JavaScriptなどのフロントサイドWeb開発に関する最新情報やライフハックを配信しています。

HTML CSS Javascript

少なからずはこういうのを探している人がいるかもということでご紹介。Youtubeのメニューエフェクトの実装方法を解説している記事を取り上げてみる。

Youtubeのメニューは以下の画像のように、ボタンを押すとボタンが横にスライドし、メニューが現れるというエフェクトをかけている。なかなかオシャレですな。

・ボタンを押す前

・ボタンを押した後

これを実現する実装方法が以下の記事で紹介されていた。英語だが丁寧にコードを解説してくれているので勉強になる。

時間がないという人はソースコード一式がダウンロードできる。なので必要なところだけちゃちゃっと持ってっちゃうのが良いかと。興味がある人はぜひどうぞ。