HTML
ナビ:下線がマウスに追随
★ナビ:下線がマウスに追随
※ class=”current” を設定
ここがバー表示
HTML
<nav id="globalNav"> <div id="nav" class="clearfix"><span></span> <ul> <li class="current">ホーム</li> <li><a href="#">会社案内</a></li> <li><a href="#">事業案内</a></li> <li><a href="#">導入事例</a></li> <li><a href="#">採用情報</a></li> <li><a href="#">お知らせ</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </div> </nav> <!-- /ID globalNav -->
CSS
#nav { position: relative; } #nav a {text-decoration:none; } #nav span { background: #1D7000; height: 5px; display: block; position: absolute; left: 0; bottom: 0; } #globalNav { display: block; margin: 0; padding: 0; height: 67px; clear: both; } #globalNav ul { display: block; margin: 0; padding: 0; width: 100%; list-style: none; } #globalNav li { display: inline; } #globalNav li.current { display: block; margin: 0; padding: 30px 0; width: 14%; float: left; text-align: center; list-style: none; background: #DFD; border-right: 2px solid #FFF; color: #063; letter-spacing: 0.1em; } #globalNav li a { display: block; margin: 0; padding: 30px 0; width: 14%; float: left; text-align: center; list-style: none; background: #EEE; border-right: 2px solid #FFF; color: #333; letter-spacing: 0.1em; }
JS
<script src="js/jquery.js" type="text/javascript"></script> <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} ,'fast'); }); // マウスアウトでもどる $('#nav a').mouseout(function(){ $('#nav span').stop().animate({ width: $('#nav .current').outerWidth(), left: $('#nav .current').position().left}); }); }); </script>