よくメニューとかグローバルナビで使われているやつで、マウスホバーすると、それにあわせて付いてくる線(バー)をCSSだけで実装する方法。

JavaScriptでやることが多いと思いますけど、CSSだけでできるんじゃないかと思ってやってみた結果です。CSSの間接セレクタを利用することで、大変簡単にできました。

追従してくるバーのデモ

マウスをのせると黒いバーがアニメーションしながらついてきます。古いIEには対応していませんので、Chrome等のモダンブラウザでご覧ください。

マウスが離れると定位置へ戻るという、まぁ、よく見るやつですね。以下でやり方を説明しています。HTMLとCSSだけです。

実装方法

HTML

<nav class="global-nav">
    <p><a href="#">Menu name</a></p>
    <p><a href="#">Menu name</a></p>
    <p><a href="#">Menu name</a></p>
    <p><a href="#">Menu name</a></p>
    <span class="global-nav--bar"></span>
</nav>

ul要素を使うと間接セレクタがうまく反応しないので、p要素でマークアップしてます。全体をnav要素で囲んでいますが、ここはdivでも何でもいいです。

CSS

/* メニュー全体のスタイル */
.global-nav {
    position: relative;
    width: 100%;
    height: 60px;
    line-height: 60px;
    max-width: 1000px;
    margin: 0 auto;
}

/* 各メニューのスタイル */
.global-nav p {
    float: left;
    width: 25%;
}
.global-nav p a {
    display: block;
    color: #1c1c1c;
}

/* 黒いバーのスタイル */
.global-nav--bar {
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    width: 25%;
    height: 5px;
    background: #000;
    -webkit-transition: all .5s;
    transition: all .5s;
}

/* ホバーでバーの位置を変化 */
.global-nav p:nth-child(1):hover ~ .global-nav--bar {
    left: 0;
}
.global-nav p:nth-child(2):hover ~ .global-nav--bar {
    left: 25%;
}
.global-nav p:nth-child(3):hover ~ .global-nav--bar {
    left: 50%;
}
.global-nav p:nth-child(4):hover ~ .global-nav--bar {
    left: 75%;
}

色や大きさ等は適時調整してください。

ハイライト部分でホバー時のスタイルを指定しています。間接セレクタを利用し、ホバー時にleftプロパティの数値を変化(p要素のwidthの倍数)させ、transitionでアニメーションを加えることで、追従するように見せています。

---

これだけだと、黒いバーは左端に固定されたままとなってしまい、たとえページが変わったとしてもそのままなので、あまりよろしくありません。できれば、現在のページに合わせて黒いバーも移動させたいところです。

色々なやり方があると思いますが、ここではWordPress等の動的なサイトでよくやるカレント表示を応用して、黒いバーの位置をページによって変化させる方法を紹介します。

ページによって黒いバーの定位置を変える

上記に記載したHTMLとCSSへ、それぞれ以下を追加します。

HTML

現在のページとリンクするp要素へクラス(.current)を付与します。

<nav class="global-nav">
    <p><a href="#">Menu name</a></p>
    <p><a href="#">Menu name</a></p>
    <p class="current"><a href="#">Menu name</a></p>
    <p><a href="#">Menu name</a></p>
    <span class="global-nav--bar"></span>
</nav>

現在のページへ動的にクラスを付与する方法については、ここでは触れませんが、WordPressであれば「wordpress カレント」で検索すると色々と情報が出てきますので、そちらを参考にしてください。静的サイトであれば、それぞれのページとリンクするp要素へ、クラスを付与すればいいだけです。

CSS

CSSに以下のコードを追加します。

.global-nav p:nth-child(1).current ~ .global-nav--bar {
    left: 0;
}
.global-nav p:nth-child(2).current ~ .global-nav--bar {
    left: 25%;
}
.global-nav p:nth-child(3).current ~ .global-nav--bar {
    left: 50%;
}
.global-nav p:nth-child(4).current ~ .global-nav--bar {
    left: 75%;
}

ここでも間接セレクタを利用し、それぞれの位置にクラスが付与されていたら黒いバーの位置を変化させる、というようなスタイルを指定しています。

デモ

3番目のp要素にクラスを付与しています。

クラスを付けた位置(3番目)へ、黒いバーも移動していることが分かると思います。当然、別の場所へマウスホバーすれば、アニメーションして追従してきます。

クラスの位置が変われば、黒いバーの位置も自動的に変わるので、これで表示中のページとリンクした定位置の移動が可能となるわけです。

おわり

最近よく使うんですけど、間接セレクタってホント有能ですよね。対応してないブラウザもありますけど、そんなものは無視して、じゃんじゃん使っていきたいと思っています(希望)。