ナビ：画像入れ替わり滋賀県守山市のホームページ制作

★画像入れ替わり：マウスオーバー
————-
HTML

<div id="nav">
  <nav class="gNavi">
    <ul>
      <li><a href="#"><img src="img/nav/gmenu01.png" alt="ホーム"></a></li>
      <li><a href="#><img src="img/nav/gmenu02.png" alt="取扱い商品"></a></li>
      <li><a href="#"><img src="img/nav/gmenu03.png" alt="導入事例"></a></li>
      <li><a href="#"><img src="img/nav/gmenu04.png" alt="導入までの流れ"></a></li>
      <li><a href="#"><img src="img/nav/gmenu05.png" alt="よくある質問"></a></li>
      <li><a href="#"><img src="img/nav/gmenu06.png" alt="お知らせ"></a></li>
      <li><a href="#"><img src="img/nav/gmenu07.png" alt="会社案内"></a></li>
    </ul>
  </nav>
</div>
<!--ID nav-->

————-
CSS

#nav {
    width: 100% !important;
    text-align: center;
    display: block;
    clear: both;
}
 
#nav .gNavi {
    width: 100%;
    max-width: 1000px;
    margin: 0px auto 0px;
    padding: 15px 0px 0px;
    text-align: center;
    display: block;
}
 
#nav .gNavi ul {
    width: 100%;
    display: table;
    border-right: 1px dotted #CCCCCC;
}
 
#nav .gNavi li {
    display: block;
    text-align: center;
    float: left;
    width: 14.1%;
    height: 65px;
    border-left: 1px dotted #CCCCCC;
    overflow: hidden;
}

————-
JS

<script type="text/javascript">
$(function() {
    $('.gNavi li img')
    .hover(
        function(){
            $(this).stop().animate({'marginTop':'-46%'},'fast');
        },
        function () {
            $(this).stop().animate({'marginTop':'0%'},'fast');
        }
    );
});
</script>