問題 × 解決策

ナビゲーションの子ページのメニューを幅いっぱいでロールオーバーで表示させる方法

問題

ナビゲーションの子ページのメニューを幅いっぱいでロールオーバーで表示させるには?

解決策

  • ナビゲーションの各メニューの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)」で全ての子メニューをスライドで非表示にします。

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

4 + three =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧