今回は3種類ハンバーガーメニューの仲間たちをCSSのみでオシャレ&スタイリッシュに実装しました。
一般的なハンバーガーメニューアイコンではなく円形の点を使ったり、長さの異なるボーダーを使ったりして少し遊び心のあるデザインとなっています。
マテリアルデザインなのでそのまますぐにでもコピペして使用できるように仕上がっています。
htmlとcssだけしか使っていません。
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。
こちらのデザイン・コードはすべて完全オリジナルなのでコピペ大歓迎です。
1. ケバブメニューを使った場面を選ばないマテリアルデザイン
動きは下の画像のような感じになります
![]()
コードを見る
<div>
<div class="hamburger">
<div class="borders">
<a href="#sidemenu" class="hamburger-menu">
<div></div>
<div></div>
<div></div>
</a>
</div>
</div>
<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: 8px;
height: 8px;
background-color: black;
margin: 5px auto;
border-radius:100px;
/* radiusで丸みをつける */
}
.hamburger .borders {
padding-top:1px;
}
.hamburger {
width:52px;
height:50px;
border:2px solid white;
border-radius:10px;
/* ボーダーにradiusで丸みをつける */
transition: .5s;
/* アニメーションの時間を0.5秒に指定 */
opacity:1;
/* 透明度を指定 */
background:#f1f1f1;
}
.hamburger:hover {
opacity:0.5;
/* 透明度を指定 */
}
.hamburger + .sidenavs:target {
overflow-x: visible;
/* ボックスからはみ出る箇所をそのまま表示 */
width: 50%;
/* サイドメニューの幅 */
display:block;
}
.sidenavs:target {
overflow-x: hidden;
/* ボックスからはみ出る箇所を隠す */
width: 0;
}
/* ハンバーガーメニュー表示時 */
.sidenavs {
height: 100%;
width: 0;
position: fixed;
/* 画像の配置を指定 */
z-index: 1;
top: 0;
left: 0;
background-image:url("https://source.unsplash.com/1000x800");
/* サイドバーの背景画像を指定 */
overflow-x: hidden;
/* 横スクロールを無効にする */
padding-top: 60px;
transition: 0.5s;
/* アニメーションの時間を0.5秒に指定 */
}
/* ハンバーガーメニュー表示時のリンク */
.sidenavs a {
text-decoration: none;
font-size: 25px;
color: white;
display: block;
transition: 0.5s;
/* アニメーションの時間を0.5秒に指定 */
font-weight:bold;
}
/* マウスオーバー後のリンク */
.sidenavs a:hover {
color: black;
}
.sidebar-btn a {
padding: 8px 8px 8px 8px;
border:1px solid white;
border-radius:10px;
/* ボーダーにradiusで丸みをつける */
transform:translate(0px,0px);
/* XY軸の移動距離を指定 */
}
.sidebar-btn a:hover {
color: black;
transform:translate(8px,10px);
/* XY軸の移動距離を指定 */
border:2px solid black;
}
.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;
}
ここがポイント!
- 円形の点を縦に3つ並べることで「ケバブメニュー」を実現
- borderで囲み背景をグレーにしボタン感を演出したケバブメニューのサンプルを作成
- ケバブメニューをクリックするとサイドバーが表示される
- ケバブメニューをhoverするとopacityが実行されて透明化する
- サイドバーのwidthを20%に調整
- サイドバーに背景画像を指定
- transitionプロパティを指定して開始から終了までの自然なアニメーションを実現
- position: absoluteで親要素との絶対位置を指定
- サイドバーの文字をborderで囲ってボタンを作り、その背面にも同じようにborderを用意
- サイドバーのボタンをhoverするとtransform:translateが実行されボタンが立体的にかわいい動きのアニメーションになるように移動距離を調整(transformの使い方については【transform完全網羅】hoverで動き出す!transformを網羅できるCSSボタンアニメーション16選)
2. ミートボールメニューを使った洗練されたマテリアルデザイン
動きは下の画像のような感じになります
![]()


コードを見る
<div>
<div class="hamburger">
<div class="borders">
<a href="#sidemenu" class="hamburger-menu">
<div></div>
<div></div>
<div></div>
</a>
</div>
</div>
<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 {
display:flex;
}
.hamburger-menu div {
width: 8px;
height: 8px;
background-color: black;
margin:0 2px;
border-radius:100px;
/* radiusで丸みをつける */
}
.hamburger .borders {
padding-top:18px;
padding-left:6px;
}
.hamburger {
width:52px;
height:50px;
border:2px solid white;
border-radius:10px;
/* ボーダーにradiusで丸みをつける */
transition: .5s;
/* アニメーションの時間を0.5秒に指定 */
opacity:1;
/* 透明度を指定 */
background:#f1f1f1;
}
.hamburger:hover {
opacity:0.5;
/* 透明度を指定 */
}
.hamburger + .sidenavs:target {
overflow-x: visible;
/* ボックスからはみ出る箇所をそのまま表示 */
width: 50%;
/* サイドメニューの幅 */
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: 50px;
/* 文字サイズを大きめに調整 */
color: white;
display: block;
transition: 0.5s;
/* アニメーションの時間を0.5秒に指定 */
font-weight:bold;
}
/* マウスオーバー後のリンク */
.sidenavs a:hover {
color: white;
}
.sidebar-btn a {
padding: 8px 8px 8px 8px;
/* ボーダーにradiusで丸みをつける */
transform:translateY(0px);
/* Y軸の移動距離を指定 */
}
.sidebar-btn a:hover {
color: white;
transform:translateY(-15px);
/* Y軸の移動距離を指定 */
}
.sidenavs p {
margin:30px auto;
width:250px;
}
/* クローズボタン */
.sidenavs .close-btn {
position: absolute;
/* 親要素との絶対位置を指定 */
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
ここがポイント!
- 円形の点を横に3つ並べることで「ミートボールメニュー」を実現
- borderで囲み背景をグレーにしボタン感を演出したミートボールメニューのサンプルを作成
- ミートボールメニューをクリックするとサイドバーが表示される
- ミートボールメニューをhoverするとopacityが実行されて透明化する
- サイドバーのwidthを30%に調整
- transitionプロパティを指定して開始から終了までの自然なアニメーションを実現
- position: absoluteで親要素との絶対位置を指定
- サイドバーの背景色を黒にし、文字の色を白、文字サイズを大きめに指定
- サイドバーのボタンをhoverするとtransform:translateが実行されボタンが上に浮かび上がるように移動距離を調整(transformの使い方については【transform完全網羅】hoverで動き出す!transformを網羅できるCSSボタンアニメーション16選)
3. ドネルメニューを使ったアパレル系のWeb制作で重宝するマテリアルデザイン
動きは下の画像のような感じになります
![]()


コードを見る
<div>
<div class="hamburger">
<div class="borders">
<a href="#sidemenu" class="hamburger-menu">
<div class="first-border"></div>
<div class="second-border"></div>
<div class="third-border"></div>
</a>
</div>
</div>
<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 {
height: 5px;
background-color: black;
margin: 5px auto;
}
.hamburger-menu .first-border {
width: 25px;
/* メニューアイコンの線の長さを調整 */
}
.hamburger-menu .second-border {
width: 18px;
/* メニューアイコンの線の長さを調整 */
}
.hamburger-menu .third-border {
width: 12px;
/* メニューアイコンの線の長さを調整 */
}
.hamburger .borders {
padding-top:5px;
}
.hamburger {
width:52px;
height:50px;
border:2px solid white;
border-radius:10px;
/* ボーダーにradiusで丸みをつける */
transition: .5s;
/* アニメーションの時間を0.5秒に指定 */
opacity:1;
/* 透明度を指定 */
background:#f1f1f1;
}
.hamburger:hover {
opacity:0.5;
/* 透明度を指定 */
}
.hamburger + .sidenavs:target {
overflow-x: visible;
/* ボックスからはみ出る箇所をそのまま表示 */
width: 40%;
/* サイドメニューの幅 */
display:block;
}
.sidenavs:target {
overflow-x: hidden;
/* ボックスからはみ出る箇所を隠す */
width: 0;
}
/* ハンバーガーメニュー表示時 */
.sidenavs {
height: 100%;
width: 0;
position: fixed;
/* 画像の配置を指定 */
z-index: 1;
top: 0;
left: 0;
background-image:url("https://source.unsplash.com/1000x803");
/* サイドバーの背景画像を指定 */
overflow-x: hidden;
/* 横スクロールを無効にする */
padding-top: 60px;
transition: 0.5s;
/* アニメーションの時間を0.5秒に指定 */
}
/* ハンバーガーメニュー表示時のリンク */
.sidenavs a {
text-decoration: none;
font-size: 45px;
/* 文字サイズを大きめに調整 */
color: white;
display: block;
transition: 0.5s;
/* アニメーションの時間を0.5秒に指定 */
font-weight:bold;
}
/* マウスオーバー後のリンク */
.sidebar-btn a {
transform:skewX(0deg);
/* X軸の傾斜角度を指定 */
}
.sidebar-btn a:hover {
color: black;
transform:skewX(-20deg);
/* X軸の傾斜角度を指定 */
}
.sidenavs p {
margin:20px 80px;
/* サイドバーのボタン位置を調整 */
width:250px;
}
/* クローズボタン */
.sidenavs .close-btn {
position: absolute;
/* 親要素との絶対位置を指定 */
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
ここがポイント!
- 長さの異なるボーダーを縦に並べることで「ドネルメニュー(Doner Menu)」を実現
- borderで囲み背景をグレーにしボタン感を演出したドネルメニューのサンプルを作成
- ドネルメニューをクリックするとサイドバーが表示される
- ドネルメニューをhoverするとopacityが実行されて透明化する
- サイドバーのwidthを50%に調整
- サイドバーに背景画像を指定
- transitionプロパティを指定して開始から終了までの自然なアニメーションを実現
- position: absoluteで親要素との絶対位置を指定
- サイドバーの背景画像、文字の色を白、hover時に黒くなるよう指定
- サイドバーのボタンをhoverするとtransform:skewが実行されボタンが斜めに傾くアニメーションとなるように傾斜角度を調整(transformの使い方については【transform完全網羅】hoverで動き出す!transformを網羅できるCSSボタンアニメーション16選)
参考
そもそもWebデザインの基礎がわからない。。

ふたご
未経験からWeb制作で月50万稼げるようになったUdemy教材3選
でもなあ、独学だと心配だしプログラミングスクールで学びたい!。かといってお金はかけたくないし。。

ふたご
完全無料で一人前のエンジニアになれるプログラミングスクールあります
- プログラミング学習&サポートが無料!
- 誰もが知っている超優良企業への就職サポート付き!
- 学習言語:Java、PHP、HTML、CSSなど
話だけ聞いてみる