【CSS】アニメーションメニュー(CSS3 Animation Menus)＜1＞

下記のアニメーションメニュー(CSS3 Animation Menus)は、Javascriptは一切使わず、CSSだけで実行したものです。こちらのサイトに掲載されているアニメーションメニューです。オリジナルソースとは若干違います。

下記のリストメニューにマウスオーバーしてみるとわかりますが、アイコンとメインタイトル、サブタイトルそれぞれが変化します。

リストメニューの基本構造は親要素の<ul>と子要素の<li>の組み合わせです。まずul要素を指定します。

 ul{
    padding: 0;
    margin: 20px auto;/*中央寄せに指定*/
    width: 100%;
    }

各リストメニュー<li>要素の基本枠を指定します。

 ul li{
    width: 100%;
    height: 100px;
    overflow: hidden;/*ボックスの範囲内に内容が入りきらず、はみ出た部分は表示しない*/
    display: block;/*ブロック要素の表示でメニューを縦型にする*/
    background: #fff;/*背景は白*/
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);/*メニューの外枠に影をつける*/
    margin-bottom: 5px;/*下のメニューとの間隔*/
    border-left: 10px solid #000;	/*メニューの左先頭は黒色・厚さは10pxに指定*/
	transition: all 300ms ease-in-out;
    /*メニューにマウスオーバーしたときにtransitionアニメーションを指定する*/
    /*ease-in-out：ゆっくり始まり、ゆっくり終了する*/
}

最後のリストメニューと<a>リンク要素についてのCSSを指定します。

 ul li:last-child{
    margin-bottom: 0px;
    /*最後のメニューの下マージンを0pxに指定*/
    }
 ul li a{ /*リンク要素の指定*/
	position:relative;/*相対位置に指定。これがアイコンとタイトルの基準位置になる*/
    text-align: left;/*左寄せに配置*/
    display: block;
    width: 100%;/*マウスオーバー時にメニューの幅全体がリンク対象になる*/
    height: 100%;/*マウスオーバー時にメニューの高さ全体がリンク対象になる*/
    color: #333;/*文字色*/
    }

メニューの左に表示されるアイコンについてCSSを指定します。ここで使われているアイコンは「Fontawesome」から引っ張ってきました。相対位置に指定したメニューの<a>リンク要素を基準にアイコンを絶対位置(position: absolute;)に指定します。

 .icons{
	position: absolute;/*絶対位置に指定*/
	font-size: 30px;
	text-shadow: 0px 0px 1px #333;
	line-height: 90px;
	width: 90px;
	left: 20px;
	text-align: center;
	transition: all 300ms linear;
    }

メインタイトルとサブタイトルの枠のサイズと位置を指定します。相対位置に指定したメニューの<a>リンク要素を基準にアイコンを絶対位置(position: absolute;)に指定します。

 .sub-menubar{
	position:absolute;/*絶対位置に指定*/
	left: 125px;
	width: 100%;
	max-height: 60px;
	top:25px;
    }

メインタイトルとサブタイトルのサイズや色を指定します。またマウスオーバーした際のtransitionアニメーションを指定します。

 .titles{
    font-size: 30px;
    transition: all 300ms linear;
    }
 .subtitles{
    font-size: 14px;
    color: #666;
    transition: all 300ms linear; 
    }

メニューにマウスオーバーした際にアイコンとメインタイトル、サブタイトルのそれぞれをどう変化させるかを指定します。ここまでがCSSのコーディングです。

 ul li:hover{
    border-color: #fff004;
    background: #000;
    }
 ul li:hover .icons{
    color: #fff004;
    text-shadow: 0px 0px 1px #fff004;
    font-size: 50px;
    }
 ul li:hover .titles{
    color: #fff004;
    font-size: 14px;
    }
 ul li:hover .subtitles{
    color: #fff;
    font-size: 30px;
    }

これからはHTMLソースです。下記のコードのように各リストメニューを記述します。

 <ul>
  <li>
   <a href="#">
   <span class="icons"><i class="fa fa-home"></i></span>
    <div class="sub-menubar">
      <p class="titles">TOP PAGE</p>
      <p class="subtitles">初心者のためのHTMLホームページ</p>
    </div>
   </a>
  </li>
    .
    .
    .
 </ul>

Prev12 Next