やわらかしかっけい

なんでもすぐに忘れてしまう自分のために

めちゃよく使う、スマホ用ドロップダウンメニュー

  • 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>

CSS

#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

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')
        }
    });
});  
  • WordPressjQueryの時、$(function(){ がだめなのを毎回忘れるよね。