この間はレスポンシブでも使える行ごとのブロック要素の高さを自動で合わせるJavaScriptをご紹介致しました。
レスポンシブにも対応！行ごとのブロック要素の高さを自動で合わせる方法。
レスポンシブでブラウザの幅に合わせてグローバルナビゲーションを上手く表示させたいですよね。
今回は「jquery.horizontalNav.js」というJavaScriptをご紹介したいと思います。
Contents
デモ
まずは「jquery.horizontalNav.js」を使用しない場合はどうなるかを見てみます。
「class=”full-width”」を外せば「jquery.horizontalNav.js」を無効にできます。
無効のままだとボタンが左に寄ったままになります。
ブラウザの幅を小さくするとボタンは下に落ちてしまいます。
次に「class=”full-width”」を記述して「jquery.horizontalNav.js」を有効にしてみます。
横幅いっぱいまでボタンが広がります。
ブラウザの幅を小さくしてもボタンが下に落ちません。
まずjQueryを読み込ませます。
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>
そのあとに「jquery.horizontalNav.js」を読み込みます。
<script src=”[ファイルへのパス]/jquery.horizontalNav.js”></script>
これで設置完了です。
htmlソースの記述
リスト要素で記述します。
今回はデモなのでリンクは「#」にしています。
<div id=”demo_nav” class=”full-width”>
<ul>
<li><a href=”#”>HOME</a></li>
<li><a href=”#”>サービス</a></li>
<li><a href=”#”>会社概要</a></li>
<li><a href=”#”>お問い合わせ</a></li>
</ul>
</div>
<ul>
<li><a href=”#”>HOME</a></li>
<li><a href=”#”>サービス</a></li>
<li><a href=”#”>会社概要</a></li>
<li><a href=”#”>お問い合わせ</a></li>
</ul>
</div>
CSSの記述
CSSで見た目を整えます。
#demo_nav ul {
background: #F49224;
text-align: center;
list-style-type: none;
list-style-image: none;
overflow: hidden;
}
#demo_nav li {
float: left;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFF;
}
#demo_nav li a {
display: block;
padding: 10px 20px;
color: #fff;
}
#demo_nav li:first-child {
border-left: 0 none;
}
#demo_nav li a:hover {
background-color: #FF871A;
}
background: #F49224;
text-align: center;
list-style-type: none;
list-style-image: none;
overflow: hidden;
}
#demo_nav li {
float: left;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFF;
}
#demo_nav li a {
display: block;
padding: 10px 20px;
color: #fff;
}
#demo_nav li:first-child {
border-left: 0 none;
}
#demo_nav li a:hover {
background-color: #FF871A;
}
設定の記述
ulタグの親要素に付けたクラスを指定します。
<script>
$(document).ready(function() {
$(‘.full-width’).horizontalNav({});
});
</script>
$(document).ready(function() {
$(‘.full-width’).horizontalNav({});
});
</script>
これで設置完了です。
色々な場面で使えそうなJavaScriptなので、ぜひご活用ください。
ダウンロードは下記からになります。
http://sebnitu.github.io/HorizontalNav/