グローバルナビゲーションとは？グローバルナビゲーションの役割とデザイン例

 

グローバルナビゲーションとは？

ハンバーガーメニューについては下記の記事でも解説しています。

グローバルナビゲーションの役割

ユーザーにどんなコンテンツがあるかわかる

パンくずリストについては下記の記事で解説しています。

検索エンジンに重要なコンテンツであると認識させる

クローラーについては下記の記事で解説しています。

グローバルナビゲーションの作成ポイント

グローバルナビゲーションのデザインは基本的に統一する

パンくずリストを設置する

メニューの数は7つ程度にする

メニューの並び順も意識

• 　ラインナップ→購入サポート→販売店検索→中古車検索→インフォメーション→MyTOYOTA

 

リストタグ(ul、ol、li)を使う

テキストで作成する

参考URL：検索エンジンにとって重要なナビゲーション

グローバルナビゲーションのデザイン例

一般的なグローバルナビゲーションの例

<navi id="navi">
　        <ul id="menu">
            <li><a href="#">メニュー1</a>
                <ul class="sub-menu">
                    <li><a href="#"<i class="fa fa-caret-right" aria-hidden="true">サブメニュー</a></li>
                </ul>
            </li>
            <li><a href="#">メニュー2</a>
                <ul class="sub-menu">
                    <li><a href="#"<i class="fa fa-caret-right" aria-hidden="true">サブメニュー</a></li>
                </ul>
            </li>
            <li><a href="#">メニュー3</a>
                <ul class="sub-menu">
                    <li><a href="#"<i class="fa fa-caret-right" aria-hidden="true">サブメニュー</a></li>
                </ul>
            </li>
        </ul>

#navi {
    position: relative;
    margin: 30px 35px;
　  width: 100%;
}


#menu {
    display: block;
    height: auto;
    margin: 0;
    padding: 0;
}
#menu li {
    float: left;
    width: 33%;
    text-align: center;
    list-style: none;    /*リストの黒い点を削除*/
    position: relative;  /*z-indexの指定や子要素の基準とするために指定*/
    z-index: 1;  /*ドロップダウンしたメニューが隠れないように*/
}
#menu li a {
　　padding: 0 20px 10px;
    border-top: none;
    border-right: none;
    background: none;
    color: #d9004e;
    display: inline-block;
    margin: auto;
    line-height: 1.3;
    text-align: left;
}
#menu li a:hover {
    background: none;
    color: #d9004e;
    text-decoration: underline;
}
#menu li a:active {
    color: #d9004e;
}
#menu li ul.sub-menu {
    display: none;  /*サブメニューは最初は非表示*/
    position: absolute;
    top: 0px;
    padding: 20px 10px;
    background: rgb(255, 94, 152);
    margin-top: 20px;
}
#menu li ul.sub-menu a{
    color: #fff;
    line-height: 1.2;
    margin-bottom: 1em;
}
#menu li a i{
    margin-left: -9px;
}
#menu li:hover ul.sub-menu {
    display: block;    /*マウスオーバー時にサブメニューを表示*/
}
#menu li ul.sub-menu li {
    float: none;
    width: 100%;
    text-align: left;
}

サイドにグローバルナビゲーションを配置する例

<navi id="navi">
　        <ul id="menu">
            <li><a href="#">メニュー1</a></li>
            <li><a href="#">メニュー2</a></li>
            <li><a href="#">メニュー3</a></li>
        </ul>
</body>

#nav ul {
    position: relative;
}
#menu,
#menu a{
    color: #fff;
}
#menu li a{
    background: #242424;
    padding: 30px 25px;
    list-style: none;
    border-bottom: 1px solid #222;
    position: relative;
}


#menu {
  list-style-position: inside;
  margin: 0 0 2em;
  padding: 0;
}

#menu li {
  margin: 0;
  list-style: none; 
  padding: 5px 0 4px;
  border-bottom: 1px solid #000000;
}

#menu li a { text-decoration: none; }

#menu li a:hover { text-decoration: underline;}

まとめ