恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。

恵比寿のデザイン制作チームのブログです。

Webデザイン、
Web制作、
SEO対策の
ご依頼・ご相談

Contact

【超簡単】CSSだけで動きのあるナビを作成しよう

投稿日:2018-03-14 更新日:




css_slidebutton_top_2

今回はHTMLとCSSだけで簡単に実装できる、横からスライドするナビの作り方の紹介をします。

ちょっとしたエフェクトやアニメーションなら、javascriptを使わず、CSSを利用しての表現が可能です。

また、CSSは動作がスムーズで、Javascriptに比べると初心者にとってわかりやすいコード表記である点が良いところです。

それでは早速コードを見ていきましょう。
まずはHTMLで簡単なナビを作っていきます。

<body>
 <ul class="menu">
   <li class="menu-item1"><a href="#">Home</a></li>
   <li class="menu-item2"><a href="#">Profile</a></li>
   <li class="menu-item3"><a href="#">Work</a></li>
   <li class="menu-item4"><a href="#">Access</a></li>
   <li class="menu-item5"><a href="#">Contact</a></li>
 </ul>
</body>

次に、CSSのコードです。

.menu{
  list-style-type: none;
}

.menu li{
  margin-bottom:15px;
}

.menu li a{
  font-weight:bold;
  display:block;
  margin-left: -200px;
  width: 300px;
  padding: 8px 25px 8px 0px;
  color: #fff;
  text-align: right;
  border-radius: 0 40px 40px 0;
  transition:all 0.5s ease;
  text-decoration: none;
}

.menu-item1 a{background-color:#87ceeb;}
.menu-item2 a{background-color:#b686eb;}
.menu-item3 a{background-color:#eb86a6;}
.menu-item4 a{background-color:#ebdf86;}
.menu-item5 a{background-color:#86eb8e;}

.menu li a:hover{
  margin-left: -100px;
}

これで完成です。マウスをホバーするとメニューのリストがにょきっと飛び出してきますね。

sample-2

仕組みを説明すると、これは予めmargin-left:-200で要素をブラウザの左に隠しており、マウスホバーした時にmargin-left:-100の位置に要素が移動するようになっています。

※ホバーの際のmargin-leftの値を大きくしすぎると、メニューのリストのwidthが足りなくなってしまうので注意が必要です。

以上がCSSのみを使ってのスライドするナビの作り方になります。




この記事をシェアする

  • Twitter
  • Facebook
  • BookmarkB!
  • Pocket

Related Entries

この記事を書いた人

TOM

TOM

Webデザイナー、UI/UXデザインと共にJavascript、PHP等のプログラミング言語について日々勉強中。