前回のシリーズでメニューの入れ方、やりましたね??
これを参考に、メニューを入れてみましょう!!
ふわっとしたアニメーションができれば、OKです。
まずは、がんばって作ってみましょう!!
スポンサードリンク
できましたか?
では、一つずつ作業していきます!!
①index.html内の作業
メニューをつくるので、いじるのは、
と、いうのは何となくOKだと思います。
<div id="top_nav">
</div>
ここにリンク入れていれていきます。
書き方は、
<a href="#top" ><button class="button_topnav" type="submit">TOP</button></a>
という感じになります。
リンク先が#○○となっているのは、ページ内にアンカーを置いてリンクさせるからです。
②css.css内の作業
まず必要なのが、
リンク先が#○○となっているのは、ページ内にアンカーを置いてリンクさせるからです。
②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;}