Skip to main content
タグを編集
リンク
supa
  • 5,399
  • 4
  • 18
  • 41
ソース リンク
enya
  • 43
  • 6

サイドメニューの幅を広げても、ボタンの押下範囲の幅が変化しません。

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>