在手机web app开发中会涉及到水平导航,例如:
上面的新闻栏目就是一个水平导航,并且还可以水平滚动,因为一行显示不完.
那么如何实现呢?
先看下实现的效果
PC端浏览器中:
手机中:
在手机上面没有滚动条,因为可以通过手指触屏滚动.
页面代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<style>
#overflow {
border: 1px solid #000;
overflow-x: scroll;
overflow-y: hidden;
}
#overflow .container div {
float: left;
width: 60px;
float: left;
}
@media only screen and (max-width : 1024px) {
#overflow {width: 480;
height: 60px;}
#overflow .container div{
height: 45px;
}
}
@media only screen and (max-width : 768px) {
#overflow {width: 480;
height: 60px;}
#overflow .container div{
height: 45px;
}
}
@media only screen and (max-width : 480px) {
#overflow {width: 480;
height: 35px;}
#overflow .container div{
height: 20px;
}
}
@media only screen and (max-width : 320px) {
#overflow {width: 320;
height: 35px;}
#overflow .container div{
height: 20px;
}
}
</style>
</head>
<body>
<div data-role="page" id="currentorders">
<header data-role="header" data-position="fixed">
<nav data-role="navbar">
<div id="overflow">
<div class="container">
<div><a href="" class="yellow">item 1</a>
</div>
<div><a href="" class="orange">item 2</a>
</div>
<div><a href="" class="red">item 3</a>
</div>
<div><a href="" class="yellow">item 4</a>
</div>
<div><a href="" class="orange">item 5</a>
</div>
<div><a href="" class="red">item 6</a>
</div>
<div><a href="" class="red">item 7</a>
</div>
<div><a href="" class="red">item 8</a>
</div>
<div><a href="" class="red">item 9</a>
</div>
<div><a href="" class="red">item 10</a>
</div>
<div><a href="" class="red">item 11</a>
</div>
</div>
</div>
</nav>
<div data-role="header">
<h3>这是一个水平导航栏,并且支持水平滚动</h3>
</div>
</header>
<div data-role="content">
这是网页的主体
</div>
</div>
</body>
<script>
$('#currentorders').live("pageshow", function () {
var width = 0;
$('#overflow .container div').each(function () {
width += $(this).outerWidth(true);
});
$('#overflow .container').css('width', width + "px");
})
/*
$("#overflow .container div a").live('touchstart', function () {
var width = 0;
$('#overflow .container div').each(function () {
width += $(this).outerWidth(true);
});
$('#overflow .container').css('width', width + "px");
})
*/
</script>
</html>
应用场景:移动web app
注意:
(1)页面采用HTML5,推荐使用 HTML5 的文档类型申明： <!DOCTYPE html>.
（建议使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的属性，比如 application/xhtml+xml 在浏览器中的应用支持与优化空间都十分有限）。
(2)采用jquery mobile框架
参阅:http://stackoverflow.com/questions/20851378/horizontal-scrolling-navbar-with-jquery-mobile-and-html5
相关推荐
1. **响应式设计**：考虑到不同设备的屏幕尺寸差异，横向滚动导航需要适应手机、平板电脑和桌面电脑等不同平台，因此设计时应采用响应式布局，确保在任何设备上都能正常工作。 2. **JavaScript 和 jQuery**：实现...
3. CSS样式：设置容器的宽度为其所有图片总宽度，以便超出可视区域，然后设置溢出隐藏，使图片可以在容器内部水平滚动。 ```css .slider { width: calc(100% * (number_of_images)); overflow: hidden; } .slide {...
"手机站导航滑动效果，图片滑动效果"这个主题聚焦于提升移动设备上网站的交互性和视觉吸引力，尤其是针对导航菜单和图片展示部分的优化。这些滑动效果不仅能够使用户更便捷地浏览网站，还能增添网页的动态美感，提升...
6. **响应式设计**：考虑到不同设备的屏幕大小和滚动行为可能不同，实现滚动效果时需要考虑响应式设计，确保在手机和平板等移动设备上也能正常工作。 7. **兼容性检查**：最后，别忘了进行浏览器兼容性测试，确保...
2. `NestedScrollView`：针对嵌套滚动进行了优化，可以容纳多个可滚动视图（如`RecyclerView`），在复杂的布局中表现更佳。它是`CoordinatorLayout`的完美伙伴，支持与滑动导航栏等组件的协调动画。 3. `ViewPager`...
这种设计模式在手机端尤其流行，因为它优化了小屏幕设备的用户体验，减少了用户滚动返回顶部的需要。 `iscroll.js`是一个轻量级的JavaScript插件，专为移动端滚动优化而设计。它提供了平滑的滚动效果，支持各种触摸...
它集成了多种模块化、可复用的组件，帮助开发者快速构建适应各种设备的网页应用。在这个“AmazeUI 导航”主题中，我们将深入探讨AmazeUI中的导航组件，它是网页布局中至关重要的部分，能够引导用户在网站中顺畅地...
例如，可能会定义一个在小屏幕设备上显示为垂直堆叠的手风琴菜单，在大屏幕设备上则呈现为水平导航栏。CSS还负责设置颜色、字体、边距等视觉元素，以及动画效果，如过渡和关键帧动画。 在提供的文件列表中，`index....
在网页设计中，这种特效常被用来展示图片轮播、菜单导航或内容滚动等。它利用JavaScript库或自定义脚本来实现元素在水平方向上的平滑移动，从而提供更好的用户体验。 在实现水平滑动JS网页特效时，有几个关键知识点...
因此，板块滚动也需要考虑在手机、平板等移动端设备上的表现。这可能涉及到媒体查询（Media Queries）来调整板块布局和滚动行为，确保在任何设备上都能良好运行。 四、轮播插件与框架 许多现有的前端框架和轮播插件...
同时，为了保证在不同设备上的良好表现，要确保滚动效果在手机、平板和桌面电脑上都能正常工作。Bootstrap的响应式设计使得这一步相对容易，只需要根据屏幕大小调整CSS样式即可。 此外，还可以添加交互元素，比如...
【jQuery手机触屏滑动导航代码】是一种专为移动端设计的交互式菜单导航解决方案，它利用JavaScript库jQuery的强大功能，优化了在触摸设备上的用户体验。这个特效允许用户通过左右滑动手势来浏览导航菜单，提高了...
例如，当屏幕宽度变小时，导航栏可能会变为水平滚动或者折叠成汉堡菜单图标，以适应手机屏幕。 HTML 是构成网页的基本框架，定义了网页的结构。在这个导航栏插件中，HTML 可能包含了`<nav>`、`<ul>`、`<li>`等元素...
Sly主要针对水平滚动场景设计，适用于展示产品列表、图片滑块、导航菜单等，它具有响应式布局、自定义动画效果、可配置选项等多种特性，让开发者能够轻松地创建出专业级的滚动效果。 ### Sly的核心功能 1. **响应...
5. **触摸设备支持**：考虑到移动设备的广泛使用，jCarousel 支持触摸事件，使得在手机和平板电脑上也能流畅地操作滚动列表。 6. **响应式设计**：与现代网页设计趋势接轨，jCarousel 可以很好地适应各种屏幕大小，...
在这个例子中，`#scrollableContent`是应用滚动条的元素，初始化Sly时设定了水平滚动、基本导航模式、智能布局、鼠标滚轮滚动等功能。 了解了Sly的基本概念和用法后，你可以根据项目需求深入研究其API文档，进一步...
在本模板中，它被用来构建垂直和/或水平滚动的多段布局，每个段落代表一个屏幕。这种设计风格常用于现代网页和移动应用，以提供更沉浸式的用户体验。 2. **HTML 结构**：index.html是网站的入口点，包含整个网页的...
5. **响应式设计**：适应不同设备的屏幕尺寸，确保在手机、平板电脑和桌面电脑上都能正常工作。 使用jCarousellite的基本步骤如下： 1. **引入jQuery和jCarousellite**：在HTML文件中，先引入jQuery库，然后引入...
响应式设计是现代网页开发的标准，确保导航条在不同设备（如桌面、平板电脑和手机）上都能良好显示。通过媒体查询和灵活布局，导航条可以自适应屏幕尺寸，从水平排列转变为垂直折叠菜单，保持清晰易用。 2. **固定...
2. **滑动导航**：滑动导航是一种流行的设计趋势，通过JS可以实现水平或垂直的平滑滚动效果，如轮播图式的导航，用户可以通过点击按钮或自动切换来浏览不同的导航项。 3. **下拉导航**：下拉导航菜单常用于大型网站...