マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

javascript(jquery) WEB制作

レスポンシブにも対応!② グローバルナビゲーションを作成してみました。

投稿日:2014年12月4日 更新日:

この間はレスポンシブでも使える行ごとのブロック要素の高さを自動で合わせるJavaScriptをご紹介致しました。
レスポンシブにも対応!行ごとのブロック要素の高さを自動で合わせる方法。

レスポンシブでブラウザの幅に合わせてグローバルナビゲーションを上手く表示させたいですよね。
今回は「jquery.horizontalNav.js」というJavaScriptをご紹介したいと思います。

デモ

「jquery.horizontalNav.js」無効にした場合

まずは「jquery.horizontalNav.js」を使用しない場合はどうなるかを見てみます。
「class=”full-width”」を外せば「jquery.horizontalNav.js」を無効にできます。

無効のままだとボタンが左に寄ったままになります。
ブラウザの幅を小さくするとボタンは下に落ちてしまいます。

「jquery.horizontalNav.js」有効にした場合

次に「class=”full-width”」を記述して「jquery.horizontalNav.js」を有効にしてみます。

横幅いっぱいまでボタンが広がります。
ブラウザの幅を小さくしてもボタンが下に落ちません。

「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>

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;
}

設定の記述

ulタグの親要素に付けたクラスを指定します。

<script>
$(document).ready(function() {
$(‘.full-width’).horizontalNav({});
});
</script>

これで設置完了です。
色々な場面で使えそうなJavaScriptなので、ぜひご活用ください。

ダウンロードは下記からになります。
http://sebnitu.github.io/HorizontalNav/


-javascript(jquery), WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【超便利】作業効率化ができるタブ表示拡張機能

突然ですが皆様、画面がごちゃごちゃになったこと、ありませんか?   Macをお使いの方は、“タブでまとめればいいじゃん!”と思うかもしれませんが、 windowsユーザーはそうはいきませんよ …

【Illustrator】アーガイル模様の作り方

みなさまこんにちは、新人Aです。 今日はまたIllustratorを使って、パターンのお話を。 以前は七宝柄、タータンチェックときて・・・今日はアーガイル柄を作りたいと思います。 アーガイル柄といえば …

データベース(MySQL)の日付操作について

データベース(MySQL)で普段よく使いますが、 なかなか覚えられない、日付の操作のSQLについて書きます。 以下のようなニュースのテーブルが存在します。 CREATE TABLE IF NOT EX …

多言語対応で1000億円の経済効果!WEBサイトも多言語化を

多言語対応で1000億円の経済効果!WEBサイトも多言語化を

近ごろのニュースで、訪日観光客の増加という記事をよく見かけるようになりました。東京の街を歩いても日本への訪日客が増えたことを実感できるほど外国語が飛び交ってますね。2015年は【多言語化元年】と言われ …

手軽に雰囲気を変える!無料英字webフォントのまとめ -個性的編-

手軽に雰囲気を変える!無料英字webフォントのまとめ -個性的編-

webフォントは日本のホームページには今一歩馴染みが無いかもしれませんが これから先、SEOを視野に入れたものはほぼテキストで作成することが望まれます。 今回はその第一弾として「個性的な英字フォント( …