ドロップダウンメニュー（レスポンシブ対応）jQuery編

WordPressの最近のテーマは大概、メニューなどレスポンシブ対応で、自動でドロップダウン式に切り替わるようになっていますが、古いテーマを利用するとか、手書きで書く場合など、使えるかなと思って、レシピ的にメモしておきます。
ドロップダウンメニューはCSSだけでも実現できますが、今回はjQueryです。

ddmenu.js

jQuery(document).ready(function($){

	var agent = navigator.userAgent;
	var list = jQuery("div.menu-container");

	function menuslide(){
	//メニュー表示非表示
	jQuery("p.navtitle").click(function(){
	if(jQuery(list).css("display")=="none"){
		jQuery(list).slideDown("normal");
	}else{
		jQuery(list).slideUp("normal");
	}
    });
    }

    if(agent.search(/iPhone/) != -1 || agent.search(/iPod/) != -1){
        menuslide();

    }else if(agent.search(/Android/) != -1){
        menuslide();

	}else{
		var replaceWidth = 700;
		function widthSize(){
			var windowWidth = parseInt(jQuery(window).width());
			if(windowWidth >= replaceWidth) {
				jQuery(list).css("display","block");
			} else if(windowWidth < replaceWidth) {
				jQuery(list).css("display","none");
			}
		}
		jQuery(window).resize(function(){widthSize();});
			widthSize();
			menuslide();
  }
});

CSS

@media screen and (min-width: 701px) {
    p.navtitle {
        display: none;
    }
}

@media (max-width: 700px) {
    /* @media (max-width: 700px) Reduce font-sizes for better readability on smaller devices */
p.navtitle {
        color: #ffffff;
        dispaly: block;
        cursor:pointer;
        line-height:1.4;
        font-size: 14px;
        font-weight:bold;
        margin: 1.2em 0 1.2em 5px;
    }
    #access div {
        margin: 0;
    }
    #access ul {
        margin: 0;
    }
    div.menu-menu-1-container {
        height: auto;
        width: 100%;
        display: none;
    }
    div.menu-container ul {
        width: 100%;
    }
    div.menu-container ul li {
        float: none;
        background: #222;
        width: 100%;
        padding: 0;
        text-align: left;
        font-size: 14px;
    }
    div.menu-container ul li a {
        border-bottom: solid 1px #666;
    }
    
   .nav-btn-ico {
      display: inline-block;
      position:relative;
      margin: 0 10px 3px 0;
      padding: 0;
      background: #ffffff;
    }
    .nav-btn-ico, .nav-btn-ico:before, .nav-btn-ico:after {
      width: 14px;
      height: 3px;
    }
    .nav-btn-ico:before, .nav-btn-ico:after {
      display: block;
      content: "";
      position:absolute;
      top: 50%;
      left: 0;
      background: #ffffff;
    }
    .nav-btn-ico:before {
      margin-top: -8px;
    }
    .nav-btn-ico:after {
      margin-top: 4px;
    }  
}