にょきっと出てくるナビゲーションカスタマイズ

前々回の記事でふんわり出てくるナビゲーションの付け方を書きました。

今日はふんわりではなく、にょきっとスライドインしてくるナビゲーションの付け方を解説します！


まあやり方は簡単です。前回のナビゲーションはフェードインだったのをスライドするように変えるだけです。

今日は、どこをどう変えたら’ふんわり’が’にょきっと’に変わるのか解説しながら書いて行きます。

わかりやすいように、ふんわりのコードを元に、変えて行ってみます。

まずは前々回の記事のふんわりのフリープラグインです！

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#menu").hide(); //#menuを最初に非表示
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 200) { //トップから200pxスクロールしたら？
$('#menu').fadeIn(); //#menuをフェードインしなさい！
} else { //それ以外は？（それ以外とは、ここでは200px以下という事になります。）
$('#menu').fadeOut(); //#menuをフェードアウトしなさい！
}
});
});
});
</script>

<ul id="menu">
<li><a href="ここにメニュー１のURL">メニュー１</a></li>
<li><a href="ここにメニュー２のURL">メニュー２</a></li>
<li><a href="ここにメニュー３のURL">メニュー３</a></li>
<li><a href="ここにメニュー４のURL">メニュー４</a></li>
<li><a href="ここにメニュー５のURL">メニュー５</a></li>
<li><a href="ここにメニュー６のURL">メニュー６</a></li>
<li><a href="ここにメニュー７のURL">メニュー７</a></li>
</ul>

こんな感じのコードでした。

上記のコードを元に下記のように変更します！

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#menu").hide(); //←この一行を消す
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 200) { //トップから200pxスクロールしたら？
$("#menu").animate({"bottom": "0px"}, 100); //←変更　#menuをスライドインしなさい！
} else { //それ以外は？（それ以外とは、ここでは200px以下という事になります。）
$("#menu").animate({"bottom": "-60px"}, 100); //←変更　#menuをスライドアウトしなさい！
}
});
});
});
</script>

このようにanimateを使ってスライドさせると簡単に出来ますね！

あとはCSSもちょこっとだけ変更しときます。

#menu {
list-style:none;
margin:0;
padding:18px 0; /*背景と文字の余白*/
position: fixed;
left:0;
bottom:-60px; /*←変更　-60pxに設定してはじめにメニューバーを見えなくする。*/
width:100%;
background-color:#111111; /*背景の色*/
text-align:center;
z-index:9999;
}

#menu li {
display:inline-block;
*display:inline;
*zoom:1;
padding:0 20px; /*メニュー同士のスペース*/
}

#menu li a {
font-size:12px; /*文字の大きさ*/
color:#ffffff; /*文字の色*/
}

これでにょきっとメニューの完成です！

結構簡単だったでしょ？

ようはJqueryの一部分を変えるだけで表現も簡単に変更出来ます！

では！またまた～



愚痴-------------------------------------------------------------------------

強制的に新しいアメブロの記事編集エディタにされて、
超絶使いにくいんですがっ！！！
なんとかして；；

-------------------------------------------------------------------------------