今回は遊び心のあるハンバーガーメニューにしたい方向けに、CSSのみで実装したマテリアルデザインをご紹介いたします。
hoverやクリック(タップ)でデザインに大きな変化が起きるよう作ったのでWeb制作やWebアプリケーション等で楽しみながらそのままお使いいただけるようなマテリアルデザインになっています。
この記事の信頼性(ゆうけんブログの筆者はこんな人)
- 現役Webデザイナーが執筆
- 最高月収7桁超のフリーランス
- 完全未経験から独学でWeb制作スキルを習得
- Twitterフォロワー数2,000人超(→@twinzvlog_yk)
- Web制作のメンター経験多数
- 認定ランサー(ランサーズ最高ランク)
ハンバーガーメニューのサイドバーにはtransformをふんだんに使用し、hoverするとボタンがborderを使って超立体的に動き出し、ずっと触っていたくなるような飽きないデザインサンプルとなっています。
マテリアルデザインなのでそのまますぐにでもコピペして使用できるように仕上がっています。
htmlとcssだけしか使っていません。
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。
こちらのデザイン・コードはすべて完全オリジナルなのでコピペ大歓迎です。
\初心者でも安心なサポート体制&高単価案件/
月収50万円以上のフリーランス案件を探してみる >>
1. ボタンが崩れ落ちていきそうな動きをするハンバーガーメニュー
動きは下の画像のような感じになります
コードを見る
<div>
<a href="#sidemenu" class="hamburger-menu">
<div></div>
<div></div>
<div></div>
</a>
<header id="sidemenu" class="sidenavs">
<a href="#" class="close-btn">×</a>
<div class="sidebar-btn">
<p><a href="#">About</a></p>
<p><a href="#">Services</a></p>
<p><a href="#">Clients</a></p>
<p><a href="#">Contact</a></p>
</div>
</header>
</div>
.hamburger-menu div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
transition: .5s;
/* アニメーションの時間を0.5秒に指定 */
transform:skewX(0deg);
/* X軸(横)の傾斜角度を指定 */
}
.hamburger-menu:hover div {
opacity:0.6;
/* 透明度を指定 */
transform:skewX(70deg);
/* X軸(横)の傾斜角度を指定 */
}
.hamburger-menu + .sidenavs:target {
overflow-x: visible;
/* ボックスからはみ出る箇所をそのまま表示 */
width: 100%;
display:block;
}
.sidenavs:target {
overflow-x: hidden;
/* ボックスからはみ出る箇所を隠す */
width: 0;
}
/* ハンバーガーメニュー表示時 */
.sidenavs {
height: 100%;
width: 0;
position: fixed;
/* 画像の配置を指定 */
z-index: 1;
top: 0;
left: 0;
background-color: black;
overflow-x: hidden;
/* 横スクロールを無効にする */
padding-top: 60px;
transition: 0.5s;
/* アニメーションの時間を0.5秒に指定 */
}
/* ハンバーガーメニュー表示時のリンク */
.sidenavs a {
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
/* アニメーションの時間を0.3秒に指定 */
font-weight:bold;
}
/* マウスオーバー後のリンク */
.sidenavs a:hover {
color: white;
}
.sidebar-btn a {
padding: 8px 8px 8px 8px;
border:1px solid white;
border-radius:10px;
/* ボーダーにradiusで丸みをつける */
transform:rotate(0deg) translate(0px,0px);
/* Z軸(平面)の回転角度とXY軸の移動距離を指定 */
}
.sidebar-btn a:hover {
color: white;
transform:rotate(-3deg) translate(3px,5px);
/* Z軸(平面)の回転角度とXY軸の移動距離を指定 */
}
.sidenavs p {
margin:30px auto;
width:250px;
border:1px solid white;
border-radius:10px;
/* ボーダーにradiusで丸みをつける */
}
/* クローズボタン */
.sidenavs .close-btn {
position: absolute;
/* 親要素との絶対位置を指定 */
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
ここがポイント!
- シンプルなハンバーガーメニューのサンプルを作成
- ハンバーガーメニューをクリックするとサイドバーが表示される
- ハンバーガーメニューをhoverするとskewが実行されて横に70°傾く
- transitionプロパティを指定して開始から終了までの自然なアニメーションを実現
- position: absoluteで親要素との絶対位置を指定
- サイドバーの背景色を黒にし、文字の色をグレー、hover時に白くなるよう指定
- サイドバーの文字をborderで囲ってボタンを作り、その背面にも同じようにborderを用意
- サイドバーのボタンをhoverするとtransform:rotateとtranslateが実行されボタンが今にも立体的に崩れ落ちそうになるように回転角度と移動距離を調整(transformの使い方については【transform完全網羅】hoverで動き出す!transformを網羅できるCSSボタンアニメーション16選)
\初心者でも安心なサポート体制&高単価案件/
月収50万円以上のフリーランス案件を探してみる >>
2.ボタンが今まさにスベり出すかのような動きをするハンバーガーメニュー
動きは下の画像のような感じになります
コードを見る
<div>
<a href="#sidemenu" class="hamburger-menu">
<div></div>
<div></div>
<div></div>
</a>
<header id="sidemenu" class="sidenavs">
<a href="#" class="close-btn">×</a>
<div class="sidebar-btn">
<p><a href="#">About</a></p>
<p><a href="#">Services</a></p>
<p><a href="#">Clients</a></p>
<p><a href="#">Contact</a></p>
</div>
</header>
</div>
.hamburger-menu div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
transition: .5s;
/* アニメーションの時間を0.5秒に指定 */
transform:skewY(0deg);
/* X軸(縦)の傾斜角度を指定 */
}
.hamburger-menu:hover div {
opacity:0.6;
/* 透明度を指定 */
transform:skewY(-5deg);
/* X軸(縦)の傾斜角度を指定 */
}
.hamburger-menu + .sidenavs:target {
overflow-x: visible;
/* ボックスからはみ出る箇所をそのまま表示 */
width: 100%;
display:block;
}
.sidenavs:target {
overflow-x: hidden;
/* ボックスからはみ出る箇所を隠す */
width: 0;
}
/* ハンバーガーメニュー表示時 */
.sidenavs {
height: 100%;
width: 0;
position: fixed;
/* 画像の配置を指定 */
z-index: 1;
top: 0;
left: 0;
background-color: black;
overflow-x: hidden;
/* 横スクロールを無効にする */
padding-top: 60px;
transition: 0.5s;
/* アニメーションの時間を0.5秒に指定 */
}
/* ハンバーガーメニュー表示時のリンク */
.sidenavs a {
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
/* アニメーションの時間を0.3秒に指定 */
font-weight:bold;
}
/* マウスオーバー後のリンク */
.sidenavs a:hover {
color: white;
}
.sidebar-btn a {
padding: 8px 8px 8px 8px;
border:1px solid white;
border-radius:10px;
/* ボーダーにradiusで丸みをつける */
transform:rotate(0deg) translate(0px,0px) skew(0deg,0deg);
/* Z軸(平面)の回転角度とXY軸の移動距離、傾斜角度を指定 */
}
.sidebar-btn a:hover {
color: white;
transform:rotate(-3deg) translate(4px,4px) skew(4deg,3deg);
/* Z軸(平面)の回転角度とXY軸の移動距離、傾斜角度を指定 */
}
.sidenavs p {
margin:30px auto;
width:250px;
border:1px solid white;
border-radius:10px;
/* ボーダーにradiusで丸みをつける */
}
/* クローズボタン */
.sidenavs .close-btn {
position: absolute;
/* 親要素との絶対位置を指定 */
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
ここがポイント!
- シンプルなハンバーガーメニューのサンプルを作成
- ハンバーガーメニューをクリックするとサイドバーが表示される
- ハンバーガーメニューをhoverするとskewが実行されて縦に5°傾く
- transitionプロパティを指定して開始から終了までの自然なアニメーションを実現
- position: absoluteで親要素との絶対位置を指定
- サイドバーの背景色を黒にし、文字の色をグレー、hover時に白くなるよう指定
- サイドバーの文字をborderで囲ってボタンを作り、その背面にも同じようにborderを用意
- サイドバーのボタンをhoverするとtransform:rotateとtranslate、skewが実行されボタンがまるで浮き上がりながらスベり出すかのように回転角度と移動距離、傾斜角度を調整(transformの使い方については【transform完全網羅】hoverで動き出す!transformを網羅できるCSSボタンアニメーション16選)
\初心者でも安心なサポート体制&高単価案件/
月収50万円以上のフリーランス案件を探してみる >>
3. ボタンが3Dで挨拶するかのように動き出すハンバーガーメニュー
動きは下の画像のような感じになります
コードを見る
<div>
<a href="#sidemenu" class="hamburger-menu">
<div></div>
<div></div>
<div></div>
</a>
<header id="sidemenu" class="sidenavs">
<a href="#" class="close-btn">×</a>
<div class="sidebar-btn">
<p><a href="#">About</a></p>
<p><a href="#">Services</a></p>
<p><a href="#">Clients</a></p>
<p><a href="#">Contact</a></p>
</div>
</header>
</div>
.hamburger-menu div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
transition: .5s;
/* アニメーションの時間を0.5秒に指定 */
transform:skew(0deg,0deg);
/* XY軸(横縦)の傾斜角度を指定 */
}
.hamburger-menu:hover div {
opacity:0.6;
/* 透明度を指定 */
transform:skew(70deg,-15deg);
/* XY軸(横縦)の傾斜角度を指定 */
}
.hamburger-menu + .sidenavs:target {
overflow-x: visible;
/* ボックスからはみ出る箇所をそのまま表示 */
width: 100%;
display:block;
}
.sidenavs:target {
overflow-x: hidden;
/* ボックスからはみ出る箇所を隠す */
width: 0;
}
/* ハンバーガーメニュー表示時 */
.sidenavs {
height: 100%;
width: 0;
position: fixed;
/* 画像の配置を指定 */
z-index: 1;
top: 0;
left: 0;
background-color: black;
overflow-x: hidden;
/* 横スクロールを無効にする */
padding-top: 60px;
transition: 0.5s;
/* アニメーションの時間を0.5秒に指定 */
}
/* ハンバーガーメニュー表示時のリンク */
.sidenavs a {
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
/* アニメーションの時間を0.3秒に指定 */
font-weight:bold;
}
/* マウスオーバー後のリンク */
.sidenavs a:hover {
color: white;
}
.sidebar-btn a {
padding: 8px 8px 8px 8px;
border:1px solid white;
border-radius:10px;
/* ボーダーにradiusで丸みをつける */
transform:translate(0px,0px) skew(0deg,0deg);
/* XY軸の移動距離、傾斜角度を指定 */
}
.sidebar-btn a:hover {
color: white;
transform:translate(5px,-5px) skew(-5deg,3deg);
/* XY軸の移動距離、傾斜角度を指定 */
}
.sidenavs p {
margin:30px auto;
width:250px;
border:1px solid white;
border-radius:10px;
/* ボーダーにradiusで丸みをつける */
}
/* クローズボタン */
.sidenavs .close-btn {
position: absolute;
/* 親要素との絶対位置を指定 */
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
ここがポイント!
- シンプルなハンバーガーメニューのサンプルを作成
- ハンバーガーメニューをクリックするとサイドバーが表示される
- ハンバーガーメニューをhoverするとskewが実行されて大きく傾き立体的になる
- transitionプロパティを指定して開始から終了までの自然なアニメーションを実現
- position: absoluteで親要素との絶対位置を指定
- サイドバーの背景色を黒にし、文字の色をグレー、hover時に白くなるよう指定
- サイドバーの文字をborderで囲ってボタンを作り、その背面にも同じようにborderを用意
- サイドバーのボタンをhoverするとtransform:translateとskewが実行されボタンがまるで挨拶でもするかのように浮き上がるよう移動距離と傾斜角度を調整(transformの使い方については【transform完全網羅】hoverで動き出す!transformを網羅できるCSSボタンアニメーション16選)
\初心者でも安心なサポート体制&高単価案件/
月収50万円以上のフリーランス案件を探してみる >>
『絶対にリモートワーク!』という方におすすめの求人サイトをご紹介!
クラウドテック
この講座のポイント
対象
Webデザイナー・エンジニア・グラフィックデザイナー・PM・マーケター・ライター
公式サイト
クラウドテック公式ページ
特徴
- クラウドソーシング企業大手のクラウドワークスが運営する求人サイト
- 実務未経験者でもOK
- 登録社数14万社
- フリーランス・個人事業主向け案件がケタ違いに多い
- 報酬額や勤務地・職種など希望が通りやすい
- Web制作・コーディングの高単価案件が多い
- リモートワーク案件数は業界トップクラス
- 最短3日で案件を獲得できる
現役Webデザイナーの筆者イチオシの求人サイト!フリーランス向けWeb制作案件なら確実に業界トップクラス。営業かけずに案件に困らなくなる一番の近道です。
ふたご
\ エンジニア・Webデザイナーの実務未経験OK・リモート案件数トップクラスの求人サイト /
無料登録をして案件を見てみる >>
まとめ
HTMLとCSSを使うと今回紹介したようなことも簡単にできてしまうんです。
『CSSアニメーションやエフェクトだけではなくWebサイトをゼロから作って稼いでいきたい』
『3ヶ月くらいで最低でも月10万円は稼ぎたい』
『営業とかやったことないけどWeb制作だけで稼いでいきたい』
こんな方のためにWeb制作で月80万超稼ぐ筆者が自身の経験を踏まえて【失敗しない】Webデザイナー(Web制作)独学ロードマップを執筆しました。
少額の投資で3ヶ月後には月10〜30万稼げるよう設計してあります。
(学習教材やAdobeなど最低限のコストはかかります)
ロードマップの構成
- Web制作に特化した『確実に身に付く』学習方法
- Web制作会社が喰いつく理想的なポートフォリオの作成手順
- 返信率10%以上!Web制作会社へのメール営業
有料公開も考えましたが「Webデザイナー(Web制作)はまだまだ稼げることを証明したい!」という思いが強く、期間限定で無料公開をすることにしました。
2021年半ばまでは無料公開する予定ではありますが前倒しすることもあり得ますのでご興味ある方はお早めにどうぞ!