1

jquery mobileを用いてサイドメニューを作りました。
デフォルトのサイドメニューの幅が狭かったので".ui-panel{width:50%;}"を指定する事で、
サイドメニュー及び内部のボタンの幅を広げました。
しかし、ボタンの押下できる範囲は広がっておらず、デフォルトの幅を超えるとマウスオーバーしても反応がありません。ボタンを押してもサイドメニューの範囲外を押されたと認識されてしまったのかサイドメニューが閉じてしまいます。
どのように対応すればサイドメニュー幅と内部コンテツの同期がとれるのでしょうか?

画像の説明をここに入力

<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<html>
	<head> 
		<meta charset="utf-8">
		<title>sample</title>
	</head>
	<body>
		<div data-role="page">
			<div data-role="header">
				<a href="#menu-left" data-role="button" data-icon="bars" >サイドメニュー</a>
			</div>                    
			
			<div data-role="panel" id="menu-left" data-display="overlay">
  				<ul data-role="listview">
	    			<li><a href="#anchor1">anchor1</a></li>
	    			<li><a href="#anchor2">anchor2</a></li>
	    			<li><a href="#anchor3">anchor3</a></li>
  				</ul>
			</div>
		</div>
		
		<style>
			.ui-panel{width:50%;}
		</style>
		
	</body>
</html>

1 件の回答 1

1

メニューを開くと、右にこういった要素が生成されていますね。

<div style="height: 300px;" class="ui-panel-dismiss ui-panel-dismiss-position-left ui-panel-dismiss-display-overlay ui-panel-dismiss-open"></div>

メニューの外をクリックした時に、そのイベントを受けてメニューを閉じるための物でしょう。
これの位置はleftでメニューの幅をハードコーディングする事で設定してあるようです。

あちらこちらに数値がハードコーディングされていると修正はとても面倒ですが、とりあえずはこのように上書きすればよいです。

.ui-panel-dismiss-open.ui-panel-dismiss-position-left {
    left: 50%;
}

<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<html>
	<head> 
		<meta charset="utf-8">
		<title>sample</title>
	</head>
	<body>
		<div data-role="page">
			<div data-role="header">
				<a href="#menu-left" data-role="button" data-icon="bars" >サイドメニュー</a>
			</div>                    
			
			<div data-role="panel" id="menu-left" data-display="overlay">
  				<ul data-role="listview">
	    			<li><a href="#anchor1">anchor1</a></li>
	    			<li><a href="#anchor2">anchor2</a></li>
	    			<li><a href="#anchor3">anchor3</a></li>
  				</ul>
			</div>
		</div>
		
		<style>
.ui-panel{width:50%;}
.ui-panel-dismiss-open.ui-panel-dismiss-position-left {
    left: 50%;
}
		</style>
		
	</body>
</html>

1
  • 早速のご回答ありがとうございます。示して頂いた内容で無事解決致しました。jQueryMobileのCSSを見てみると、ui-panel関連の所々に"17em"と指定されていました。".ui-panel{width:50%;}"だけを上書きしてもダメという事ですね。勉強になりました!
    – enya
    Commented 2016年4月28日 4:21

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。