マーカーネット株式会社

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

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

関連記事

Movable Type6を操作してみました

Movable Type6を操作してみました

先日リリースされました、movable type6を操作していました。 – ダッシュボード グーグルアナリティクスをアカウント設定しますと、 サイト情報欄に、アクセスの情報が表示されます。 …

【グローバルサイト運営担当者必見】多言語サイトSEOで絶対外せない3つのポイント!

弊社では英語、簡体中国語、繁体中国語、韓国語など世界主要言語でのSEOやサイト制作に取り組んでおります。 それぞれの言語のサイトのSEO対策の基本原則は変わらないですが、海外SEOの効率を向上させ、ア …

手軽に雰囲気を変える!無料英字webフォントのまとめ -素敵な明朝フォント編-

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

【Illustrator】基本図形で出来ちゃう!ハートマークの作り方

こんばんは、新人Aです。 今日は、Illustratorでハートを作る方法についてお話します! まぁ、素材サイトさんからデータをお借りしちゃえばそれで済む話なのですが… 理想の形が見当たらない!という …

先取り!春の色彩のトレンド

こんにちは! web初心者のKです。 暖かくなってきたこの頃、みなさまいかがお過ごしでしょうか? 本日は春に先駆けて、 春色が感じられるサイトを集めてみようと思います。 まずひとつ目はこちら! htt …