問題
ナビゲーションの子ページのメニューを幅いっぱいでロールオーバーで表示させるには？
解決策
- ナビゲーションの各メニューのliタグ内に子ページのメニューを入れ込みます。
- 子ページのメニューを「margin: 0 -500%;」と「padding: 10px 500%;」で領域を作ります。
- そのままだと子ページのメニューがページの幅をオーバーしてしまうため、コンテンツを囲っているタグに「overflow: hidden;」を設定し、はみ出した部分を非表示にします。
- ロールオーバーで子ページのメニューを「slideDown」で表示させます。
ナビゲーションの子ページのメニュー
ナビゲーションの子ページのメニューを幅いっぱいでロールオーバーで表示させる方法をご紹介します。
DEMOはこちら
ナビゲーションの構築
ナビゲーションの構築を行います。
HTML
<ul class="navs-list clearfix">
<li>
<a href="#">MENU01</a>
<div class="subnav-box">
<ul>
<li>
<a href="#">MENU01_1</a>
</li>
<li>
<a href="#">MENU01_2</a>
</li>
<li>
<a href="#">MENU01_3</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">MENU02</a>
</li>
<li>
<a href="#">MENU03</a>
<div class="subnav-box">
<ul>
<li>
<a href="#">MENU03_1</a>
</li>
<li>
<a href="#">MENU03_2</a>
</li>
<li>
<a href="#">MENU03_3</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">MENU04</a>
<div class="subnav-box">
<ul>
<li>
<a href="#">MENU04_1</a>
</li>
<li>
<a href="#">MENU04_2</a>
</li>
<li>
<a href="#">MENU04_3</a>
</li>
</ul>
</div>
</li>
</ul>CSS
.navs-list{
background-color: #ffffff;
letter-spacing: -.4em;
position: relative;
}
.navs-list > li{
display: inline-block;
vertical-align: top;
width: 25%;
text-align: center;
letter-spacing: normal;
}
.navs-list > li > a{
display: block;
height: 70px;
padding: 10px;
color: #F15A24;
font-weight: bold;
border-top: 1px solid #F15A24;
border-bottom: 1px solid #F15A24;
border-left: 1px solid #F15A24;
position: relative;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}
.navs-list > li:last-child > a{
border-right: 1px solid #F15A24;
}
.navs-list > li > a:hover,
.navs-list > li.on > a{
color: #ffffff;
background-color: #F15A24;
}
.navs-list > li > .subnav-box{
display: none;
width: 100%;
position: absolute;
top: 70px;
left: 0;
right: 0;
background-color: #F15A24;
margin: 0 -500%;
padding: 10px 500%;
z-index: 7000;
overflow: hidden;
}
.navs-list > li ul{
margin-bottom: 0;
padding: 10px;
}
.navs-list > li ul > li{
display: inline-block;
vertical-align: top;
margin-right: 10px;
}
.navs-list > li ul > li:last-child{
margin-right: none;
}
.navs-list > li ul > li > a{
display: inline-block;
color: #ffffff;
}
.post-wrapper > .outlines{
overflow: hidden;
}ポイント!
- 子ページのメニューを「margin: 0 -500%;」と「padding: 10px 500%;」で領域を作ります。
- そのままだと子ページのメニューがページの幅をオーバーしてしまうため、コンテンツを囲っているタグに「overflow: hidden;」を設定し、はみ出した部分を非表示にします。
子ページのメニューを格納しているliタグにクラスを追加
子ページのメニューを格納しているliタグにクラスを追加します。
$('.navs-list > li').each(function(){
if( $(this).find('.subnav-box').length !== -1 ){
$(this).addClass('parent');
}
})ナビゲーションのメニューのロールオーバー時の処理
ナビゲーションのメニューのロールオーバー時の処理を追加します。
$('.navs-list > li').on({
"mouseover": function (event) {
$('.navs-list > li').find('.subnav-box').stop(true, true);
$(this).siblings('li').find('.subnav-box').slideUp(500);
if( $(this).hasClass('parent') ){
if($(this).find('.subnav-box').length){
$(this).find('.subnav-box').slideDown(500);
}
}
}
});- 「stop(true, true)」で現在のアニメーション処理を最後まで実行させて、次に実行待ちのアニメーションを破棄させます。
- 「$(this).siblings(‘li’).find(‘.subnav-box’).slideUp(500)」で一通りの子メニューをスライドで非表示にします。
- 子メニューがある場合、「slideDown(500)」でスライドで表示させます。
ナビゲーションからカーソルが外れた時の処理
ナビゲーションからカーソルが外れた時の処理を追加します。
$('.navs-list').on({
"mouseleave": function (event) {
$('.navs-list > li').find('.subnav-box').stop(true, true);
$('.navs-list > li').find('.subnav-box').slideUp(500);
}
});- 「mouseleave」でカーソルが外れた時の処理をナビゲーション本体に行います。
- 「stop(true, true)」で現在のアニメーション処理を最後まで実行させて、次に実行待ちのアニメーションを破棄させます。
- 「$(‘.navs-list > li’).find(‘.subnav-box’).slideUp(500)」で全ての子メニューをスライドで非表示にします。
コメント