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;
}
}