pcとsp時での条件分岐

2018.04.06

pcで見たときのメニューボタンを押したときのスライドの動きは横から、spの表示の時には上から表示させる方法です。
以下では、ウィンドウサイズを拾得して、その画面サイズが768px以下の時に、動きを切り替えています。

<script type="text/javascript">
$(function(){
$('.trigger').on('click',function(){
	  
   if (jQuery(window).width() < 768) {
	   $('.slide').slideToggle();
    } else {
       $(".menu-trigger,body,.blur").toggleClass('active');
	   $(".slide").animate({
           width: 'toggle',
       }, 400);
}						  
});
});
</script>

$(function(){

$('.trigger').on('click',function(){

if (jQuery(window).width() < 768) {

$('.slide').slideToggle();

} else {

$(".menu-trigger,body,.blur").toggleClass('active');

$(".slide").animate({

width: 'toggle',

}, 400);

}

});

</script>

応用次第でレスポンシブコーディングに役立てることが可能です。
また、iphoneやandoroidといった機種を指定での条件分岐も可能です。

if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
    スマートフォンでの処理
} else {
    pcの場合の処理
}

if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {

スマートフォンでの処理

} else {

pcの場合の処理

}

場合によって、使い分けるとよいでしょう