今回は横並びのナビゲーションバー3選【transform scale× hoverで動くCSSアニメーションデザイン】をご紹介。シンプルかつ洗練されたデザイン。hoverアニメーションでNavbarが拡大縮小する。Web制作で使える。コピペOK。HTML, CSSだけ
動きを見ていただければ使いたくなること間違いなしです!
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。
こちらのデザイン・コードはすべて完全オリジナルなのでコピペ大歓迎です。
※突然ですが超オトクな『無料プレゼント』のお知らせです・・
今から3日以内に『転職実績No. 1のプログラミングスクール DMM WEBCAMP』へ無料カウンセリング申込&参加された方のみ限定でもれなく【Amazonギフト券1,000円分】をGETできるキャンペーン
完全オンラインレッスンで個別メンター付き。1月中なら期間限定で5万円のキャッシュバックも
無料カウンセリング ▶︎
1. 【横に拡大縮小アニメーション】横並びナビゲーションデザイン
動きは下の画像のような感じになります
![]()
コードを見る
<div class="navigation">
<!-- 階層に分けてナビゲーションの骨組みを作成 -->
<ul>
<li class="button">
<p><a href="#">Home</a></p>
</li>
<li class="button">
<p><a href="#">About</a></p>
</li>
<li class="button">
<p><a href="#">Portfolio</a></p>
</li>
<li class="button">
<p><a href="#">blog</a></p>
</li>
</ul>
</div>
.navigation ul {
/* flexboxで要素を横並び+真ん中に指定 */
display: flex;
justify-content: center;
align-items: center;
margin-top: 10%;
}
.button{
display: block;
padding: 10px 100px;
}
.button p {
font-weight: 300;
/* カーソルを離した際のアニメーションの速度調整 */
transition:.5s all;
transform: scaleX(1.8);
}
.button a {
color:#333333;
/* リンク指定した要素のスタイルを削除 */
text-decoration:none;
}
.button:hover > p {
/* サイズ調整 */
transform: scaleX(1);
/* hover時の速度調整 */
transition: .3s;
text-shadow: 1px 1px 1px #f1f1f1;
font-weight: bold;
}
2. 【縦に拡大縮小アニメーション】横並びナビゲーションデザイン
動きは下の画像のような感じになります
![]()


コードを見る
<div class="navigation">
<!-- 階層に分けてナビゲーションの骨組みを作成 -->
<ul>
<li class="button">
<p><a href="#">Home</a></p>
</li>
<li class="button">
<p><a href="#">About</a></p>
</li>
<li class="button">
<p><a href="#">Portfolio</a></p>
</li>
<li class="button">
<p><a href="#">blog</a></p>
</li>
</ul>
</div>
.navigation ul {
/* flexboxで要素を横並び+真ん中に指定 */
display: flex;
justify-content: center;
align-items: center;
margin-top: 10%;
}
.button{
display: block;
padding: 10px 100px;
}
.button p {
font-weight: 300;
/* カーソルを離した際のアニメーションの速度調整 */
transition:.5s all;
transform: scaleY(1.8);
}
.button a {
color:#333333;
/* リンク指定した要素のスタイルを削除 */
text-decoration:none;
}
.button:hover > p {
/* サイズ調整 */
transform: scaleY(1);
/* hover時の速度調整 */
transition: .3s;
text-shadow: 1px 1px 1px #f1f1f1;
font-weight: bold;
}
3. 【3D拡大縮小アニメーション】横並びナビゲーションデザイン
動きは下の画像のような感じになります
![]()


コードを見る
<div class="navigation">
<!-- 階層に分けてナビゲーションの骨組みを作成 -->
<ul>
<li class="button">
<p><a href="#">Home</a></p>
</li>
<li class="button">
<p><a href="#">About</a></p>
</li>
<li class="button">
<p><a href="#">Portfolio</a></p>
</li>
<li class="button">
<p><a href="#">blog</a></p>
</li>
</ul>
</div>
.navigation ul {
/* flexboxで要素を横並び+真ん中に指定 */
display: flex;
justify-content: center;
align-items: center;
margin-top: 10%;
}
.button{
display: block;
padding: 10px 100px;
}
.button p {
font-weight: 300;
/* カーソルを離した際のアニメーションの速度調整 */
transition:.5s all;
transform: scaleX(1.5) scaleY(1.5);
}
.button a {
color:#333333;
/* リンク指定した要素のスタイルを削除 */
text-decoration:none;
}
.button:hover > p {
/* サイズ調整 */
transform: scaleX(1) scaleY(1);
/* hover時の速度調整 */
transition: .3s;
text-shadow: 1px 1px 1px #f1f1f1;
font-weight: bold;
}
【初心者向け】失敗しないプログラミングTIPS
そもそもWebデザインの基礎がわからない。。

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

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