話題：ナビゲーションのいろいろ

ナビゲーションを作るときの考え方や、いろいろなナビゲーションについてまとめています。

ナビゲーションの種類

「ナビゲーション」と聞いて思い浮かべるナビゲーションのデザインは、いくつあるでしょうか。

...と、ほかにもいろいろあります。これからもきっと新たに発明されます。

さて、これからいくつかナビゲーションの作り方をご紹介したいのですが、メニューの基本となる考え方をまずご紹介します。

基本は「表示」と「非表示」の切り替え

メニューの多くは、どこかをクリックしたりホバーしたりした後に、どこからともなく現れます。これをどうやって作るかといえば、 

<div>
    <span>スイッチ</span>
</div>
<nav>
    <span>アイテム</span>
    <span>アイテム</span>
    <span>アイテム</span>
</nav>

というHTMLに対して、次のCSSを当てます。 

nav {
    display: none;
}

そうなのです。実は、メニューをあらかじめHTMLに書いたら、それをCSSで隠しておくのです。そして、スイッチを押したら、 

nav {
    display: flex;
}

などと、隠しておいたメニューが現れるようにします。（もちろん、displayの値はflexに限りません。）

では、どうやって隠しておいたものをクリックやホバーで現れるようにするか。

クリックの場合は、JavaScriptを使います。jQueryで書くとこうなります。 

$('div').click(function(){
    $('nav').toggle();
})

スイッチであるdivをクリックすると、そのたびにnavが現れては隠れる（トグル）。これを繰り返します。

ホバーの場合はCSSだけで済みます。 

nav {
    display: none;
}

div:hover + nav {
    display: flex;
}

スイッチであるdivにホバーしたとき、divの兄弟要素であるnavが現れるようにできます。

基本的にはこれだけです。

レイアウト・アニメーション・アイテム

ナビゲーションのデザインで考えることは、配置や向き、現れ方と隠れ方、項目の整理。大きくはこの3つです。

このうち特に難しいのは、項目の整理だと思います。ナビゲーションによってどのように誘導させたいか決まります。項目が完全に整理されたナビゲーションを作るマニュアルは存在しません。これからもそうでしょう。

配置や向きは、ナビゲーションやその項目の縦や横の並べ方です。画面の右上だったり、ヘッダーのすぐ下だったり、画面最下部だったりを決めることです。

現れ方や隠れ方は、スライド、フェードが多いですが、ちょっとしたエフェクトやアニメーションを付けたナビゲーションもあります。

この3つが異なるために、いろいろな名前のナビゲーションが存在していると私は思います。

「このようなナビゲーションが作りたいけど、作り方がわからない」というアイデアがございましたら、私までぜひご相談ください。

「これしかない」ではなく、「何でも自由に考えていいんだ、何でも自由に作っていいんだ」と思っていただければ、本ページを作った甲斐があります。

トップページへ戻る