みなさんこんにちは、 masa です。サイトのメインメニューというのはアイキャッチとともに非常に目立ち、ユーザーが最初に操作する可能性が高いパーツですよね。デザイナーのみなさんが個性を出しやすいと同時に、デザインに悩みがちなメニューですが、今日はマウスホバー時にアンダーバーを追随させる方法をご紹介します。
まずはこちらの DEMO をご覧ください。
マウスをホバーするとホームにいたバーが追いかけてくるメニューです。
上記のものを作る際には HTML, CSS, jQuery を使います。
(HTML)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../css/sample.css">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
</head>
<body>
<div id="menu">
<div id="nav"> // 以下ご自由にメニューを書き換えてください
<a href="">サービス</a>
<a href="">お問い合わせ</a>
<a href="">開発プロセス</a>
<a href="">技術ブログ</a>
<a href="">会社情報</a>
<a class="current" href="">ホーム</a>
<span></span>
</div><!-- nav -->
</div><!-- menu -->
<script>
$(function() {
$('#nav span').css({
width: $('#nav .current').outerWidth(),
left: $('#nav .current').position().left
});
$('#nav a').mouseover(function(){
$('#nav span').stop().animate({
width: $(this).outerWidth(),
left: $(this).position().left}
,{ duration: 170, easing: 'linear', });
//上記でバーの移動スピードとイージング方法を設定できます
});
});
</script>
</body>
</html>
(CSS)
#menu {
font-size: 16px;
width: 100%;
padding: 12px 0;
text-align: center;
background: #2C3E50;
}
#menu a {
margin: 0 4% 0 0;
text-decoration: none;
color: white;
}
#menu a:visited {
text-decoration: none;
color: white;
}
#menu a:hover {
text-decoration: none;
}
#nav {
position: relative;
}
#nav a {
padding:10px;
}
#nav span {
background: #FD9802; //バーの色を設定できます
height: 2px; //バーの太さを設定できます
display: block;
position: absolute;
width: 30px;
left: 0
}
#nav a:hover {
cursor: pointer;
}
これだけです。バーの移動スピードが遅すぎるとユーザーがストレスを感じる可能性もありますので、個人的には 170ms あたりがオススメです。CSS デザインを変えてオリジナルのメニューを作成してみてくださいね。
