参考コード
HTML部分
<li class=“gnav__item nav_hover“><a class=“gnav__item__link“ href=“<?php echo home_url(); ?>/topics-all“>トピックス</a>
<ul class=“child_nav“ id=“child_nav“>
<li>お知らせ</li>
<li>イベント</li>
<li>リリース情報</li>
<li>製品情報</li>
</ul>
</li>
CSS部分
/*グロナビ*/
.child_nav{
position: absolute;
font-size: 1.3rem;
background: #fff;
width:140px;
opacity:0;
}
.child_nav2{
position: absolute;
right:500px;
font-size: 1.3rem;
background: #fff;
width:140px;
opacity:0;
}
.child_nav li{
margin:0 auto;
width:55%;
display:none;
}
.child_nav2 li{
margin:0 auto;
width:55%;
}
.child_nav li:before{
content:”-“;
margin-right:5px;
color:#009044;
}
.child_nav2 li:before{
content:”-“;
margin-right:5px;
color:#009044;
}
JS部分
<scripttype=“text/javascript“>
$(function(){
$(‘.nav_hover‘).mouseenter(function(){
$(‘.child_nav‘).addClass(“child_nav2“);
$(‘.child_nav‘).removeClass(“child_nav“);
$(‘.child_nav2‘).css(‘opacity‘,‘1‘).css(‘transition‘,‘0.5s‘).animate({ right:400 }, 150);
$(‘.child_nav2 li‘).css(‘display‘,‘block‘);
$(‘.child_nav2‘).css(‘visibility‘,‘inherit‘);
});
$(‘.nav_hover‘).mouseleave(function(){
$(‘.child_nav2‘).removeClass(“child_nav2“);
$(‘#child_nav‘).addClass(“child_nav“);
$(‘.child_nav‘).css(‘visibility‘,‘hidden‘);
$(‘.child_nav‘).css(‘opacity‘,‘0‘).css(‘transition‘,‘0.5s‘).animate({ right:500 }, 150);
});
});
</script>
動きの説明
マウスを載せるor離す(mouseenter,mouseleave)の際に色々なcssの変更、クラス付与、削除を行っている。
その中で今回はアニメーションを使い、弱パララックスみたいな事をした。
position:absoluteで相対位置を作る。
元の位置を少し左に設定かつ非表示、ホバーした際に、表示したい場所に移動させることで、パララックスぽく設定！
