0

レスポンシブ Web サイトのモバイル バージョン用に、ページの上部にメニュー アイコンを付加するスクリプトを使用しています。2 つの水平ナビゲーション バー (ページの上部に 1 つ、さらに下に 1 つ) を組み合わせて、サブメニューを含む 1 つの垂直メニューにします。その部分は完璧に機能します。

ただし、親がクリックされるまでサブメニューを非表示にする機能をもう1つ追加したいと思います。これにより、最初のモバイルメニューがそれほど長くなりません。サブメニューを持つ 10 個のトップレベル リンクのうち 3 個があります。これら 3 つはライブ リンク自体であり、プレースホルダーではありません。したがって、サブメニューを開いて、親と子の両方をクリック可能にする必要があります。

サイトのモバイル バージョンでクリックするとメニュー全体が表示される jquery を次に示します。

jQuery(document).ready(function($){
/* prepend menu icon */
$('#topwrap').prepend('<div id="menu-icon"></div>');

/* toggle nav */
$("#menu-icon").on("click", function(){
$("#topnav,#mainnav").slideToggle();
$(this).toggleClass("active");

});
});

メニューのモバイル バージョンの CSS は次のとおりです。

#menu-icon {
display: block;
float: right;
width: 65px;height: 62px;
margin: 10px 0 0 20px;
background-image: url(images/menuicon.png);
background-repeat: no-repeat; background-position: right top;
}
#topnav {display:none;
z-index: 50; 
position: absolute; 
top:110px; 
right:30px;
background-color: #fff5b9;width: 70%; height: auto;
margin: 0 auto 10px auto;
padding: 10px;
-webkit-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
border-top: 2px solid #8e9360;
border-right: 2px solid #8e9360;
border-left: 2px solid #8e9360;
 text-decoration: none; 
 }
#topnav li {
margin: 0 0 0 -10px;
padding-bottom: 15px;
list-style: none;
}

#mainnav {
display: none;
z-index: 50;
position: absolute; 
top:320px; 
right:30px;
background-color: #fff5b9;width: 70%; margin: -10px auto 10px auto;
padding: 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius:0 0 10px 10px;
border-right: 2px solid #8e9360;
border-left: 2px solid #8e9360;
border-bottom: 2px solid #8e9360;
text-decoration: none;
}
#mainnav li {margin: 0 0 0 -10px;
padding: 10px 0;
list-style: none;
}
#mainnav ul ul {
margin-bottom: 0;
}

#topnav a, #mainnav a {text-decoration: none;
font: 600 14px/14px 'Open Sans', sans-serif;
color: #1e320d;}

html は標準のネストされた ul、li、ul、li です。

サイトのモバイル バージョンのサブメニューに適用するためだけに必要なため、mobilemenu.js スクリプトまたは同じドキュメントにスクリプトを含めたいと考えています。

私は HTML/CSS の人間で、php と js/jquery の貼り付けをカットするのは得意ですが、js/jquery や php を書くことは得意ではありません。サイトは WordPress で構築されており、私はまだテーマのスタイリングと微調整を行っており、コンテンツはまだありませんが、ライブで見ることができます

http://64.17.148.68/

キャンプ、キャビン、リバートリップのサブメニュー

大変助かります！

4

1 に答える 1

0

試す

// first hide all submenus
$(".sub-menu").hide();

// add click handler to links you know have a submenu
$("a:contains('Camping'), a:contains('Cabins'), a:contains('River Trips')").click(
    // find next submenu and show/hide it
    $(this).parent("li").next(".sub-menu").slideToggle();
);

それはテストされておらず、私はそれが機能していないことをかなり確信しています:)、しかしあなたを正しい道に導くはずです。

于 2013-03-24T04:14:29.430 に答える