移动网站上的滑动菜单

时间:2013-08-21 14:04:06

标签: css3 jquery-mobile

我在网络移动网站上工作,我遇到了一些问题,我真的不知道如何解决这些问题

我添加了一个滑动菜单(比如facebook的菜单),但问题是我的菜单比我的页面长,当我向下滚动时,我仍然得到菜单但没有已定义的背景颜色

当我在桌面导航器(chrome)上测试它时,它工作得很好但是我调整窗口大小并使其变小它会调用相同的错误

对不起我的英语不好&谢谢你的帮助^^

HTML:

<div data-role="page" id="contactF" class="pages" data-add-back-btn="true" data-iconpos="notext">

    <div data-role="panel" id="menu" data-position="left" data-display="push">
        <ul id="menuList" data-role="listview" >
            <h3>Menu</h3>
            <li data-role="list-divider"><h6>r&eacute;seaux sociaux<h6/></li> 
            <li><a href="#" class="contentLink" id="contact_Facebook" data-add-back-btn="true">Facebook </a></li>
            <li><a href="#" class="contentLink" id="contact_Twitter">Twitter </a></li>
            <li><a href="#" class="contentLink" id="contact_Myspace">MySpace </a></li>
        </ul>
    </div>

    <div data-role="header" id ="HeaderC" data-position="fixed">
    <!-- end of header -->

    <div data-role="content">
    </div>
    <!-- /content -->

    <div data-role="footer" data-position="fixed">
    </div>

</div>

JS:

$( document ).on("swipeleft swiperight", "#menu", function( e ) {
    if ($.mobile.activePage.jqmData( "panel" ) !== "open") {
      if ( e.type === "swipeleft"  ) {
        $( "#right-panel" ).panel( "open" );
      } else if ( e.type === "swiperight" ) {
        $( "#left-panel" ).panel( "open" );
      }
    }
    else if ($.mobile.activePage.jqmData( "panel" ) == "open"){
      $( "#left-panel" ).panel( "close" );
      $( "#right-panel" ).panel( "close" );
    }
  });

0 个答案:

没有答案