超级菜单转换为移动下拉列表

Question

我在我的某个网站http://www.risenotes.com中应用了一个大型菜单，但是当我尝试将其转换为移动视图的单个缩短菜单时，它不起作用。我最初成功移动视图，但只有两个视图中的任何一个都有效。任何人都可以指导任何javascript代码显示超级菜单作为常规移动菜单。

我尝试使用下面的javascript，但它在我的移动版本工作中取代了我，而常规网站版本失败了。另外，请在http://www.risequotes.com上安装一个完美的移动菜单。该网站是用wordpress构建的，而我的超级菜单网站是基于php的网站。有没有办法将我的wordpress菜单样式应用到我的php网站？我的意思是一些剧本。

我试过下面的脚本，它可以转换成移动菜单（包括图标），但我需要更复杂的版本。

    <script type="text/javascript">

function responsiveMobileMenu() {	
		$('.rmm').each(function() {
			
			
			
			$(this).children('ul').addClass('rmm-main-list');	// mark main menu list
			
			
			var $style = $(this).attr('data-menu-style');	// get menu style
				if ( typeof $style == 'undefined' ||  $style == false )
					{
						$(this).addClass('graphite'); // set graphite style if style is not defined
					}
				else {
						$(this).addClass($style);
					}
					
					
			/* 	width of menu list (non-toggled) */
			
			var $width = 0;
				$(this).find('ul li').each(function() {
					$width += $(this).outerWidth();
				});
				
			// if modern browser
			
			if ($.support.leadingWhitespace) {
				$(this).css('max-width' , $width*1.05+'px');
			}
			// 
			else {
				$(this).css('width' , $width*1.05+'px');
			}
		
	 	});
}
function getMobileMenu() {

	/* 	build toggled dropdown menu list */
	
	$('.rmm').each(function() {	
				var menutitle = $(this).attr("data-menu-title");
				if ( menutitle == "" ) {
					menutitle = "Menu";
				}
				else if ( menutitle == undefined ) {
					menutitle = "Menu";
				}
				var $menulist = $(this).children('.rmm-main-list').html();
				var $menucontrols ="<div class='rmm-toggled-controls'><div class='rmm-toggled-title'>" + menutitle + "</div><div class='rmm-button'><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></div></div>";
				$(this).prepend("<div class='rmm-toggled rmm-closed'>"+$menucontrols+"<ul>"+$menulist+"</ul></div>");

		});
}

function adaptMenu() {
	
	/* 	toggle menu on resize */
	
	$('.rmm').each(function() {
			var $width = $(this).css('max-width');
			$width = $width.replace('px', ''); 
			if ( $(this).parent().width() < $width*1.05 ) {
				$(this).children('.rmm-main-list').hide(0);
				$(this).children('.rmm-toggled').show(0);
			}
			else {
				$(this).children('.rmm-main-list').show(0);
				$(this).children('.rmm-toggled').hide(0);
			}
		});
		
}

$(function() {

	 responsiveMobileMenu();
	 getMobileMenu();
	 adaptMenu();
	 
	 /* slide down mobile menu on click */
	 
	 $('.rmm-toggled, .rmm-toggled .rmm-button').click(function(){
	 	if ( $(this).is(".rmm-closed")) {
		 	 $(this).find('ul').stop().show(300);
		 	 $(this).removeClass("rmm-closed");
	 	}
	 	else {
		 	$(this).find('ul').stop().hide(300);
		 	 $(this).addClass("rmm-closed");
	 	}
		
	});	

});
	/* 	hide mobile menu on resize */
$(window).resize(function() {
 	adaptMenu();
});

</script>

我目前使用的CSS隐藏了移动视图的菜单，仅显示父列表。

Answer 1

您可以使用CSS媒体查询而不是使用JavaScript吗？

/* Mobile styling goes here */

@media screen and (min-width: 500px) {
    /* Desktop styling overrides go here */
}

这是一个例子（我不会复制你所做的，但你应该得到它的要点）http://jsfiddle.net/1gw19yqg/