マーカーネット株式会社

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

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

関連記事

【グラフィック V.S. Webデザイン】グラフィック制作とWeb制作の違い-3-

約3週間に1回の登場になりますが、デザイナーのOです。 前回に続けて、Webとグラフィック制作との違いについて、続いて紹介していきたいと思います。 今回は最終回となりますので、最後まで読んでいただけれ …

食べ物の写真を美味しそうにみせるフォトショの小ネタ

こんにちは! デザイナーの木野子です。 マーカーネットブログを、今回初めての担当することになりました! ここでは、私が普段web製作で使っている、 PhotoshopやIllustratorの小ネタな …

【これぞPhotoshopマジック】イラスト風・水彩風・レトロ風に写真を加工するワザ

【これぞPhotoshopマジック】イラスト風・水彩風・レトロ風に写真を加工するワザ

Webデザインを制作する中で、写真素材を使用することが多々あります。 これらの素材にひと手間加えることで、写真の魅力がグッと加わったり、 サイトの印象を変えることができたり、ポイントにもなったりします …

もう怖くない!色の配色

皆さん! こんばんは!! webデザインを新人デザイナーKです。 元々色選びに才能が全くない私は、デザインをする際に色んな参考サイトを メチャクチャ調べてから制作に入ります。 でもどうしても配色だけは …

デザイナーの常識!? いいデザインと悪いデザインの見分け方 スマホサイト編

こんにちは、デザイナーのAです。 いいデザインと悪いデザインの見分け方 その(1) いいデザインと悪いデザインの見分け方 その(2) いいデザインと悪いデザインの見分け方 その(3) いいデザインと悪 …