jQuery スクリプトと HTML/CSS を使用してレスポンシブ ナビゲーションを構築します。ただし、メインメニュー項目のサブメニュー項目に移動すると、アクティブなクラスを追加したいと思います。
ここにある現在の結果: http://www.neofelis.de
init.js と global.css にソース コードがあります。
次の質問は、アクティブでないメニューで上にスライドする方法です。例: 最初のメイン メニューがモバイル デバイスのスライド ダウンの下にあり、次のメイン メニュー項目をクリックしてスライド アップします。次に、他のメニューがスライドインするようにします。
$('body', context).once('accordionmenu', function () {
$('body').bind('responsivelayout', function (e, d) {
//Define your drupal menu id (only works with core menu block)
var menuid = "#block-menu-block-1";
//This condition will act under the 'mobile' size, and will not be executed on ie6 and ie7
if (d.to == 'mobile' && !$('html').hasClass('ie6') && !$('html').hasClass('ie7')) {
//Remove the ´hover´ event in the dropdown menu scrip below
$(menuid+' li').unbind();
//Add a span tag that will aft as the expand button, you can change the output of that button here
$(menuid+" ul.menu li.expanded").prepend( $("<span class='over' href='#'>Down</span>") );
//Create an open/close action on the accordion after clicking on the expand element
$(menuid+' ul.menu span.over').click(function (event) {
event.preventDefault();
if ($(this).siblings('ul').is( ":visible" )){
$(this).siblings('ul').slideUp('fast');
} else {
$(this).siblings('ul').slideDown('fast');
}
});
}
//this condition will work for all sizes exept mobile, but will act on ie6 and ie7 browsers
if (d.to != 'mobile' | $('html').hasClass('ie7') ) {
//remove the expand elements from the accordion menu
$(menuid+" span.over").remove();
//hide the open accordion items removing the display block style
$(menuid+" ul li ul").removeAttr("style");
//Simple hide/show event for the dropdown menus
$(menuid+' li').hover(
function(){
$('ul:first', $(this)).show();
},
function(){
$('ul', $(this)).hide();
}
);
}
});
});
}
}
}(jQuery));