- MENUを押すと、にゅーんと伸びる
- MENUの横のキャレットが上向きになる
- スクロールすると、上部に張り付く
html
<ul class="sp" id="spMenu">
<li class="spMenuBtn">MENU<b class="caret"></b></li>
<ul>
<li><a href="<?php echo esc_url( home_url() ); ?>">HOME</a></li>
<li><a href="<?php echo esc_url( home_url( '/about' ) ); ?>">ABOUT</a></li>
<li><a href="<?php echo esc_url( home_url( '/gallery' ) ); ?>">GALLERY</a></li>
<li><a href="<?php echo esc_url( home_url( '/blog' ) ); ?>">BLOG</a></li>
<li><a href="<?php echo esc_url( home_url( '/contact' ) ); ?>">CONTACT</a></li>
</ul>
</ul>
#spMenu{
text-align:center;
width:100%;
}
#spMenu li{
padding:12px 0;
}
#spMenu ul{
display:none;
}
.caret {
border-top: solid 4px #000;
border-left: solid 4px transparent;
border-right: solid 4px transparent;
border-bottom: solid 4px transparent;
vertical-align: bottom;
margin-left:10px;
line-height:0.3;
}
.spMenuActive .caret{
border-bottom: solid 4px #000;
border-top:solid 4px transparent;
border-left: solid 4px transparent;
border-right: solid 4px transparent;
vertical-align: top;
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index : 9999;
}
jQuery(function($){
$("#spMenu > li").on("click", function() {
$(this).toggleClass("spMenuActive");
$(this).next().slideToggle();
});
});
jQuery(function($) {
var spMenu = $('#spMenu');
var spMenuTop = spMenu.offset().top;
$(window).scroll(function () {
var winTop = $(this).scrollTop();
if (winTop >= spMenuTop) {
spMenu.addClass('fixed')
} else if (winTop <= spMenuTop) {
spMenu.removeClass('fixed')
}
});
});