Print Page - Mobile menu Iphone

Title: Mobile menu Iphone
Post by: jega on August 06, 2025, 02:56:03 AM

Hi.

Need help with big problem. This code doesn't work on iphones safari or chrome or edge. On Samsung phones it works fine.

Have testet on easyui demo and this is same problem.

Any solution to get it to work on iphone

<header>
   <div class="m-toolbar">
      <div class="m-title">TEST</div>
      <div class="m-right">
         <a href="javascript:void(0)" class="easyui-menubutton" data-options="iconCls:'icon-more',menu:'#mm1',menuAlign:'right',hasDownArrow:false"></a>
      </div>
   </div>
</header>

<div id="mm1" class="easyui-menu" style="width:200px;">
   <div data-options="iconCls:'icon-photo_portrait_16'" onclick="test()">Test</div>
</div>

Title: Re: Mobile menu Iphone
Post by: jarry on August 11, 2025, 11:13:28 PM

This is the code that shows the panel header with the menu on the right.

Code:

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>Basic Menu - jQuery EasyUI Mobile Demo</title>
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/material-blue/easyui.css">
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/mobile.css">
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.mobile.js"></script>
</head>

<body>
	<div class="easyui-navpanel">
		<header>
			<div class="m-toolbar">
				<div class="m-title">TEST</div>
				<div class="m-right">
					<a href="javascript:void(0)" class="easyui-menubutton"
						data-options="iconCls:'icon-more',menu:'#mm1',menuAlign:'right',hasDownArrow:false"></a>
				</div>
			</div>
		</header>
	</div>
	<div id="mm1" class="easyui-menu" style="width:200px;">
		<div data-options="iconCls:'icon-photo_portrait_16'" onclick="test()">Test</div>
	</div>
</body>

</html>

Title: Re: Mobile menu Iphone
Post by: jega on August 12, 2025, 08:16:38 AM

Hi Jarry.

It's excatly the same i do.

Problem is, when you go to the site on an iphone, and click on menu button, the three dots, it open and close the menu again.

It doesn't work on iphone/ipad. Have tried it on both Safari and Chrome, same error

Try your demo/mobile demos/menu/basic. Same problem. Can't show menu on iphone/ipad

Title: Re: Mobile menu Iphone
Post by: jarry on August 14, 2025, 06:38:52 PM

Please set the 'showEvent' property value to 'click'. This means that the menu won't show until the 'click' event is triggered.

Code:

<a href="javascript:void(0)" class="easyui-menubutton"
	data-options="iconCls:'icon-more',menu:'#mm1',menuAlign:'right',hasDownArrow:false,showEvent:'click'">
</a>

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: jega on August 06, 2025, 02:56:03 AM