Jquery移动页脚NavBar水平滚动

我在jQuery Mobile的页脚定义中使用“navbar”数据角色作为div。当我添加5个以上的项目时，它将菜单项分成两列。这是根据JQM文档的默认行为。我希望通过在页脚区域内向左或向右滑动来滚动图标。Jquery移动页脚NavBar水平滚动

 <div data-role="footer" data-theme="d" data-position="fixed" id="divFooter"> 
      <div data-role="navbar" id="divNavBar"> 
       <ul> 
        <li><a href="javascript:;" id="icPortfolio" data-icon="custom">Profile</a></li> 
        <li><a href="javascript:;" id="icStatus" data-icon="custom">Status</a></li> 
       </ul> 
      </div> 
     </div>

仅供参考，我看着这个潜在的解决方案：JQM horizontal scroll navbar。然而，它将菜单图标变为HTML链接，并在头部数据角色中工作。

任何想法？

来源

2013-10-03 Mr. Smith

请注意，标签是独立的。组合'horizontal'和'scroll'并不意味着与标签'horizontal-scrolling'相同的东西。 – Charles

你需要的是你的父母DIV以下（在你的页脚DIV）

overflow: auto; 
white-space: nowrap;

的nowarp使得DIV内容不会溢出到下一行和溢出自动使其滚动在哪个方向它不适合在这种情况下是水平的，因为我们关闭自动换行

来源

2013-10-03 20:17:54 krilovich

你可能只HTML/CSS实现这一点：

HTML

个

<header> 
    <nav role='navigation'> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Clients</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
    </nav> 
    <a href="#" class="nav-toggle">Menu</a> 
</header>

CSS

nav { 
    overflow-x: scroll; /* 1 */ 
    -webkit-overflow-scrolling: touch; /* 2 */ 
} 

ul { 
    text-align: justify; /* 3 */ 
    width: 30em; /* 4 */ 
} 


ul:after { /* 5 */ 
    content: ''; 
    display: inline-block; 
    width: 100%; 
} 

li { 
    display: inline-block; /* 6 */ 
}

评论：

设置自动将工作在某些设备上，而是将其设置为只滚动可以肯定的。
这个神奇的属性，使本地感觉滚动。
将此设置为对齐会创建等间距的li，其中需要解决边距问题。
您必须将宽度设置为的值大于所有li宽度的总和。
这是text-align: justify的clearfix版本。
这也必须设置为等间距工作。

应在以下设备工作：

iOS 5以上
Android 3.0的
黑莓6+（没有亲自检查）
的Windows Phone（IE10）支持原生动态滚动

这里采取：http://hugogiraudel.com/2013/08/23/scroll-overflow-menu/

来源

2016-01-11 14:58:55 sashaegorov

Jquery移动页脚NavBar水平滚动

回答

相关问题