マーカーネット株式会社

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

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

関連記事

Dropboxを使ってスタティックサイトを簡単に作れるサービス「Brace」

Dropboxを使ってスタティックサイトを簡単に作れるサービス「Brace」

今ではスタティックなWebサイトからでもHTML5と最新のJavaScript環境(各種の既製ライブラリ、フレームワークなど)があれば、相当複雑高度なサービスを提供できますよね。 そんなスタティックな …

【WEBデザインレシピ】 暑い夏にヒヤッとするホラーなデザインの作り方

【WEBデザインレシピ】 暑い夏にヒヤッとするホラーなデザインの作り方

もうすぐ夏がきますね! 今年は冷夏という噂も耳にしますが、日本の各地でちらほら真夏日が記録されていたりして… そこで今日は夏の暑さも吹き飛ぶ!?ホラーデザインの簡単レシピをご紹介させていただきます。 …

WEB制作に便利!CSS3ボタンジェネレーター3選

WEB制作に便利!CSS3ボタンジェネレーター3選

もちろん使わない派の方もいるかもしれませんが、私は便利なツールがあればどんどん使っちゃいます。 WEB制作の時短にもつながる便利なジェネレーターをご紹介します。   「CSS3 Button …

手作り感溢れる癒しのWEBデザイン

手作り感溢れる癒しのWEBデザイン

フラットデザインやシンプル系、クール系のデザインとは違った手作り感溢れるデザインは気持ちが伝わりほっこりさせてくれます。 トレンドのデザインは進んでゆきますが、手作り系のデザインは今も昔もずっと残って …

jQueryを使ってみよう【開閉式メニューを作る編】

html・CSSでのマークアップは何となく分かるけどjQueryはちょっと分からないという方、 今からjQueryを使ってみようと思っている方必見。 jQueryの便利な使い方をご紹介します。 jQu …