★月々100円（税抜）からオンラインショップを運営！
独自SSL・高機能カート・クレジット決済が簡単導入
どうも。WEBおじさんです。
今日は、サイトに取り入れると「お？やるやん」と思われるような動きを書こうと思います。
言っておきますが、本ブログはあくまでWEB制作初心者～中級者あたりをターゲットにしていますので、上級者さんたちは温かい目で見守っていただけると心が安らぎますｗ
ということで、まず一つ目。
スクロールしたらウィンドウ上部に留まるナビゲーション
よくありますね。スクロールしたらウィンドウの上部にずっと表示されているナビゲーション。
やっぱサイトってページのコンテンツ量と内容によりますが、どうしてもスクロールしてしまうくらいのボリュームがありますよね。
その時に、別のページに移動したいと思った時にわざわざ上に戻るのってダルクナイ？みたいな話になるんですよ。
これに関しては対処法がいくつかあるのですが、その一つがナビゲーションを追従させるパターン。
では早速。
デモを見ていただけるとわかりますが、見事にナビゲーションがついてきております。
そのソースは以下。
【HTML】
<nav>
<ul>
<li><a href=”#”>メニューボタン1</a></li>
<li><a href=”#”>メニューボタン2</a></li>
<li><a href=”#”>メニューボタン3</a></li>
</ul>
</nav>
【CSS】
nav {
position:fixed;
top:0;
left:0;
}
li a {
width:100px;
padding:8px;
text-align:center;
font-size:85%;
border-radius:8px;
background-color:#0cf;
color:#fff;
}
li a:hover {
background-color:#6df;
}
こんな感じです。
実は、これってCSSだけで実現できたりします。
ただし、ナビゲーションが最初から一番上にあるということが条件ですが。
ナビゲーションが上から少し離れた位置にある場合はJSを使う必要があります。
今回は簡単に、ということがテーマなので、こちらは別の機会にさせていただきます。
ということで、これだけで実現できてしまいました。
お手軽ですねー。
上のCSSには実際関係ない装飾もあります。
liタグのCSSなんかは特に必要ないですねｗ
まぁ、でもちょっとした装飾なので、これもどうやってるのかわからない方はCSSを分解して調べて自分のものにしちゃうといいと思います。
では、次。
スマホで大活躍！
メニューを出し入れするヤツ！
スマホでよく使われているメニューがありますね。
アイコンをタップすると横とか上とかからナビゲーションが出てくるヤツ！
もうこれができればスマホサイトはできたも同然！ｗ
ということで、いってみましょう。
今回は上から出るヤツと左から出るヤツの2パターン！
こちらはjQueryを使います。
jQueryの書き方は人それぞれなので、違う書き方でも同じ動きをすることができます。
これについては深く追求しないでください。
要はエラーが出ずに動けばいいのですからｗ
ソースはこちらから。
【HTML】
<div id=”headnav”>
<nav>
<ul>
<li><p>上ナビナビ</p></li>
<li><a href=”#”>メニュー1</a></li>
<li><a href=”#”>メニュー2</a></li>
<li><a href=”#”>メニュー3</a></li>
</ul>
</nav>
<p id=”hnav” class=”btn”>上ナビ</p>
</div>
<div id=”sidenav”>
<nav>
<ul>
<li><p>左ナビナビ</p></li>
<li><a href=”#”>メニューA</a></li>
<li><a href=”#”>メニューB</a></li>
<li><a href=”#”>メニューC</a></li>
</ul>
</nav>
<p id=”lnav” class=”btn”>左ナビ</p>
</div>
【CSS】※ulのスタイルは上のものを流用するため割愛
#headnav {
width:100%;
}
#headnav nav {
display:none;
}
#sidenav {
width:300px;
display:flex;
}
#sidenav nav {
display:none;
}
.btn {
background-color:#111;
border-radius:8px;
padding:10px;
text-align:center;
color:#fff;
width:100px;
cursor:pointer;
}
.btn:hover { background-color:#aaa; }
【jQuery】
$(document).on(‘click’,’#hnav’,function(){
$(‘#headnav nav’).slideToggle(‘fast’);
});
$(document).on(‘click’,’#lnav’,function(){
$(‘#sidenav nav’).slideToggle(‘fast’);
});
こんな感じですね。
今回はjQueryで「slideToggle」というお手軽関数を使いました。
これは、クリックイベントでslideUpとslideDownを表示状態に応じて繰り返し実行されるものです。
表示されていれば閉じて、閉じていれば開く、というものです。
しかし、実はこちら動きは縦の動きなのです。
横のスライドではないんですねー。
でも、flexを併用することで左から出てきた、みたいな動きに見えるので時間がない時はこれでもいいんじゃないかな。
もし時間があるのであれば、animateとかでネガティブマージンを使ったりwidthを操作したり、いろいろやりようはありますね。
ということで、使えるようになるとちょっと嬉しい動きの書き方を紹介しました。
これをうまいことサイトへ組み込んでいくと、ユーザビリティも良くなるし、動きもちょっとできる風に見せることができるのでうまいこと使ってみては如何でしょうか！
以上、WEBおじさんでした！また次回！
