レスポンシブウェブサイトのドロップキックメニューに問題があります。サイトがiphoneサイズに入ると、dropkick.jsを使用してこのドロップキックメニューに変更されます。これはドロップダウンです。
私のHTML:
<div id="mobilemenu">
<a href="#" id="pull">Menu</a>
</div>
上記のコードは、320px幅でサイトを表示した場合にのみ表示されます。
私のJavascript:
<script type="text/javascript">
$(function () {
var pull1 = $('#pull');
menu1 = $('ul.menuresponsive');
menuHeight = menu1.height();
$(pull1).on('click', function (e) {
e.preventDefault();
menu1.slideToggle();
});
$(window).resize(function () {
var w = $(window).width();
if (w > 320 && menu.is(':hidden')) {
menu1.removeAttr('style');
}
});
});
</script>
私はJavascriptについてあまりよく知りません、これはチュートリアルから取られました。
サイトが320pxにあるときの私のCSS:
/* Menu */
#mobilemenu { display:block !important; margin-bottom:20px; }
#mobilemenu ul { margin:12px 0 0 0 !important; list-style:none; padding:0 10px 0 10px }
#mobilemenu ul li { float:none !important; font-size:16px; padding:5px 0 5px; font-weight:bold; border-bottom:1px solid #000; }
#mobilemenu ul li a { color:#333; text-decoration:none; }
/* Drop */
#mobilemenu ul li ul li { font-size:14px; font-weight:normal; border:none; color:#000; }
/* Pull */
#pull { display:block !important; text-align:center; color:#fff; text-decoration:none; padding:10px 0 10px 0; font-size:16px; font-weight:bold; }
#menu { display:none; }
今のところ、メニューは下図のように常に開いているので、デフォルトで閉じてほしいのですが、解決策が見つからないようです。
私のメニューはとしてレンダリングされ、<ul>
動的<li>
に<div id="mobilemenu">