004

前回のシリーズでメニューの入れ方、やりましたね??

これを参考に、メニューを入れてみましょう!!

ふわっとしたアニメーションができれば、OKです。

まずは、がんばって作ってみましょう!! 

スポンサードリンク



できましたか?
では、一つずつ作業していきます!!

①index.html内の作業

メニューをつくるので、いじるのは、



<div id="top_nav">

</div> 
と、いうのは何となくOKだと思います。 

ここにリンク入れていれていきます。

書き方は、
<a href="#top" ><button class="button_topnav" type="submit">TOP</button></a>
という感じになります。

リンク先が#○○となっているのは、ページ内にアンカーを置いてリンクさせるからです。

②css.css内の作業

まず必要なのが、



#top_nav {

}
の作業です。

ここで色々指定してあげないと、レイアウトが好き勝手な感じになってしまいますからね。

とはいっても、作りながら変えていくところもあると思うので、ここでは枠の大きさ・色・配置だけ設定しておきます。


#top_nav {
width: 80%;
background-color: #008000;
float: none ;
}

こんな感じになりますね?
 
また、追加でアニメーションの設定もしちゃいましょう。これは、全シリーズからコピペ&一部変更でで大丈夫だと思います。
 button.button_topnav {
/*ボタンの中身を設定する部分*/
font-size: large;
padding: 20px;
background-color: #008000;
color: #FFFFFF;
border-style: none;
transition: background-color 1s,color 1s;
}
button.button_topnav:hover {
    background-color: #cccccc;
    color: #008000;
}
赤字部分が変更した部分です
 
そして、今回新たに、こんな感じにイジってみます。 
button.button_topnav {
/*ボタンの中身を設定する部分*/
font-size: large ;
padding: 20px;
background-color: #008000;
color: #FFFFFF;
border-style: none;
transition: 1s ease;
}
button.button_topnav:hover {
border-radius: 20px;
      background-color: #cccccc;
       color: #008000;
}
青字部分が変更した部分
 
これをしてあげるとアニメーションがパワーアップします。

004
マウスを乗せるとあら不思議って感じになります。

こちらはCSS3に対応しているのが条件ということで、一部のInternet Explorerでは再現できないみたいなので、予めご了承ください。
 
細かい部分の説明は省きますが、「CSS3 transition」で検索をしてあげると色んな情報が出てきますよ♪