Mobile menu Iphone

EasyUI Forum

September 21, 2025, 02:50:32 AM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > EasyUI for jQuery > Mobile menu Iphone

Pages: [1]

« previous next »

Author

Topic: Mobile menu Iphone (Read 6609 times)

jega

Full Member

Posts: 225

Mobile menu Iphone

« 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>


	Logged

jarry

Administrator
Hero Member

Posts: 2298

Re: Mobile menu Iphone

« Reply #1 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>


	Logged

jega

Full Member

Posts: 225

Re: Mobile menu Iphone

« Reply #2 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


	Logged

jarry

Administrator
Hero Member

Posts: 2298

Re: Mobile menu Iphone

« Reply #3 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>


	Logged

Pages: [1]

« previous next »