0
我在我的一個網站中應用了一個大型菜單，即http://www.risenotes.com，但是當我嘗試將其轉換爲移動視圖的單個縮短菜單時，它不起作用。我最初的移動視圖成功，但只有兩個視圖中的任何一個工作。任何人都可以引導任何JavaScript代碼來顯示作爲普通手機菜單的超級菜單。大型菜單轉換爲移動下拉列表
我試過使用下面的javascript，但它只在我的移動版本的工作中成功，只有在常規網站版本失敗時。另外，請在http://www.risequotes.com上安裝一個完美的手機菜單。該網站是建立在WordPress的，而我的超級菜單網站是一個基於PHP的網站。有沒有辦法將我的wordpress菜單樣式應用於我的php網站？我的意思是一些腳本。
我已經嘗試過下面的腳本，其工作轉換爲移動菜單（包括圖標），但我需要一個更復雜的版本。
<script type="text/javascript">
function responsiveMobileMenu() { \t
\t \t $('.rmm').each(function() {
\t \t \t
\t \t \t
\t \t \t
\t \t \t $(this).children('ul').addClass('rmm-main-list'); \t // mark main menu list
\t \t \t
\t \t \t
\t \t \t var $style = $(this).attr('data-menu-style'); \t // get menu style
\t \t \t \t if (typeof $style == 'undefined' || $style == false)
\t \t \t \t \t {
\t \t \t \t \t \t $(this).addClass('graphite'); // set graphite style if style is not defined
\t \t \t \t \t }
\t \t \t \t else {
\t \t \t \t \t \t $(this).addClass($style);
\t \t \t \t \t }
\t \t \t \t \t
\t \t \t \t \t
\t \t \t /* \t width of menu list (non-toggled) */
\t \t \t
\t \t \t var $width = 0;
\t \t \t \t $(this).find('ul li').each(function() {
\t \t \t \t \t $width += $(this).outerWidth();
\t \t \t \t });
\t \t \t \t
\t \t \t // if modern browser
\t \t \t
\t \t \t if ($.support.leadingWhitespace) {
\t \t \t \t $(this).css('max-width' , $width*1.05+'px');
\t \t \t }
\t \t \t //
\t \t \t else {
\t \t \t \t $(this).css('width' , $width*1.05+'px');
\t \t \t }
\t \t
\t \t });
}
function getMobileMenu() {
\t /* \t build toggled dropdown menu list */
\t
\t $('.rmm').each(function() { \t
\t \t \t \t var menutitle = $(this).attr("data-menu-title");
\t \t \t \t if (menutitle == "") {
\t \t \t \t \t menutitle = "Menu";
\t \t \t \t }
\t \t \t \t else if (menutitle == undefined) {
\t \t \t \t \t menutitle = "Menu";
\t \t \t \t }
\t \t \t \t var $menulist = $(this).children('.rmm-main-list').html();
\t \t \t \t var $menucontrols ="<div class='rmm-toggled-controls'><div class='rmm-toggled-title'>" + menutitle + "</div><div class='rmm-button'><span> </span><span> </span><span> </span></div></div>";
\t \t \t \t $(this).prepend("<div class='rmm-toggled rmm-closed'>"+$menucontrols+"<ul>"+$menulist+"</ul></div>");
\t \t });
}
function adaptMenu() {
\t
\t /* \t toggle menu on resize */
\t
\t $('.rmm').each(function() {
\t \t \t var $width = $(this).css('max-width');
\t \t \t $width = $width.replace('px', '');
\t \t \t if ($(this).parent().width() < $width*1.05) {
\t \t \t \t $(this).children('.rmm-main-list').hide(0);
\t \t \t \t $(this).children('.rmm-toggled').show(0);
\t \t \t }
\t \t \t else {
\t \t \t \t $(this).children('.rmm-main-list').show(0);
\t \t \t \t $(this).children('.rmm-toggled').hide(0);
\t \t \t }
\t \t });
\t \t
}
$(function() {
\t responsiveMobileMenu();
\t getMobileMenu();
\t adaptMenu();
\t
\t /* slide down mobile menu on click */
\t
\t $('.rmm-toggled, .rmm-toggled .rmm-button').click(function(){
\t \t if ($(this).is(".rmm-closed")) {
\t \t \t $(this).find('ul').stop().show(300);
\t \t \t $(this).removeClass("rmm-closed");
\t \t }
\t \t else {
\t \t \t $(this).find('ul').stop().hide(300);
\t \t \t $(this).addClass("rmm-closed");
\t \t }
\t \t
\t }); \t
});
\t /* \t hide mobile menu on resize */
$(window).resize(function() {
\t adaptMenu();
});
</script>我目前使用CSS的隱藏移動視圖，只顯示父列出菜單。