レスポンシブ対応！上部固定メニューをjQueryとCSSで簡単につくってみた
最近よく見かける上部固定メニュー。今、ユニクロサイトでも採用されていますね。
先日、サイト制作で実際に上部固定メニューを実装したので、作り方を紹介したいと思います。意外と簡単にできました。
上部固定メニューのサンプルはこちら
jQueryをHEAD内に記述
まずは、HEAD内に「viewport」を記述。viewportはスマホでもサイトが適切に表示されるようしているので忘れずに。次に、jQueryを呼び込みます。最後に上部固定されるようにjavascriptを記述します。
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var box = $(".nav");
var boxTop = box.offset().top;
$(window).scroll(function () {
if($(window).scrollTop() >= boxTop) {
box.addClass("fixed");
$("body").css("margin-top","0px");
} else {
box.removeClass("fixed");
$("body").css("margin-top","0px");
}
});
});
</script>
</head>
ナビゲーション部分をマークアップ
<div class="nav"> <ul class="nav_list"> <li><a href="#" class="nav_link_home">HOME</a></li> <li><a href="#" class="nav_link_company">会社概要</a></li> <li><a href="#" class="nav_link_news">ニュース</a></li> <li><a href="#" class="nav_link_blog">ブログ</a></li> <li><a href="#" class="nav_link_recruit">採用情報</a></li> </ul> </div>
ナビゲーションのCSS設定
初期設定CSS
「clearfix」を設定します。clearfixは簡単に言うと「floatを解除する手法」です。
html {
font-size : 75%;
}
body{
margin:0;
padding:0;
background-color:#e6e6e6;
font-family: " メイリオ",Meiryo,Osaka," ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro"," ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}
#container, .nav {
width: 100%;
margin: 0 auto;
}
/* clearfix */
.nav_list:after {
display: block;
visibility: hidden;
clear: both;
height: 0;
content: ".";
font-size: 0;
}
ナビゲーション部分のCSS
「.nav」を「width100％」で設定しているので「.nav_list li」の「width20％」にする事で自動的にli要素の幅が5分割になります。ページをスクロールしてナビゲーションを上部固定させるには、「position:fixed;」を設定します。「top:0;」で固定させる位置を設定します。
.nav{
margin:0;
padding:0;
background-color:#ffffff;
}
.nav_list{
margin:0;
padding:0;
}
.nav_list li {
float: left;
width:20%;
text-align: center;
list-style-type: none;
}
.nav_list li a{
color:#000000;
text-decoration:none;
margin:0;
padding:0.75em 0;
font-size: 100%;
display:block;
}
.nav_list li a:hover{
color:#ff0000;
}
.nav_link_home{
border-bottom:3px solid #ff0000;
border-right:1px solid #eeeeee;
}
.nav_link_company{
border-bottom:3px solid #4169e1;
border-right:1px solid #eeeeee;
}
.nav_link_news{
border-bottom:3px solid #8fbc8f;
border-right:1px solid #eeeeee;
}
.nav_link_blog{
border-bottom:3px solid #6a5acd;
border-right:1px solid #eeeeee;
}
.nav_link_recruit{
border-bottom:3px solid #ffa500;
}
.fixed{
position:fixed;
top:0;
max-width: 980px;
margin:0 auto;
}
レスポンシブ対応用にメディアクリエを追加
デバイスが1024px以上の場合、ナビゲーション最大幅を「max-width」で980pxに設定します。
@media screen and (min-width: 1024px) {
#container {
max-width: 980px;
padding: 20px 0;
}
html{font-size:100%;}
}
まとめ
どうですか？思いのほか簡単にできましたよ。頻繁に目にするようになった上部固定ナビゲーション。ページをスクロールしてもナビゲーションが常に表示されているので、次コンテンツに移動したいユーザーがいちいち上部メニューに戻る手間を省くことができます。それに、スマホサイトは自然と縦長になってしまいます、固定ナビゲーション導入するば、今より親切なサイトになると思います。
