javascript - super 菜单转换为移动下拉菜单

Question

我在我的一个网站中应用了一个大型菜单，即 http://www.risenotes.com但是当我尝试将其转换为移动 View 的单个缩短菜单时，它不起作用。我最初在移动 View 方面取得了成功，但只有两种 View 中的一种有效。谁能指导有关将大型菜单显示为常规移动菜单的任何 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 的使用隐藏了移动 View 的菜单并仅显示父列表。

Answer 1

除了使用 JavaScript，您可以使用 CSS 媒体查询吗？

/* Mobile styling goes here */

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

这是一个例子(我不会复制你所做的，但你应该明白它的要点)http://jsfiddle.net/1gw19yqg/