jQuery实现的水平可滚动导航菜单
在这个例子中，除了著名的无与伦比的 jQuery 之外，没有使用任何繁重的第三方库。jQuery 方法用于处理水平滚动和动画。
jQuery实现的水平可滚动导航菜单
demodownload
在菜单栏 HTML 中，添加了上一个下一个导航控件以水平滚动菜单。在这些控件的单击事件上，调用 jQuery animate() 方法来来回移动菜单项。
代码实现以水平滚动显示菜单
水平滚动菜单代码包含以下 UI 元素。
- 左右导航控件
- 可滚动的菜单栏
这两个导航控件呈现在可滚动菜单栏层的顶部。它们绝对位于菜单栏的右侧和左侧，通过动态管理 CSS 位置来显示滑动菜单。
最初，将根据屏幕宽度在菜单栏中显示有限数量的菜单项。右侧导航控件用于水平滚动菜单菜单栏并在右侧查看更多菜单项。
显示滚动菜单的 HTML 代码
在本文中，我们看看用于向用户显示菜单界面的 HTML 代码。在此 HTML 中，它包含左右导航元素和动态菜单项列表。
此处使用左右 svg 箭头图像作为导航控件。
导航元素 id 用作处理菜单向左或向右滚动的参考。
<HTML>
<HEAD>
<TITLE>jQuery实现的水平可滚动导航菜单</TITLE>
<link href="style.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<nav id="menu-container" class="arrow">
<div id="btn-nav-previous" style="fill: #FFF">
<svg xmlns="http://www.w3.org/2000/svg" width="32"
height="32" viewBox="0 0 24 24">
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
<path d="M0 0h24v24H0z" fill="none" /></svg>
</div>
<div id="btn-nav-next">
<svg xmlns="http://www.w3.org/2000/svg" width="32"
height="32" viewBox="0 0 24 24">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
<path d="M0 0h24v24H0z" fill="none" /></svg>
</div>
<div class="menu-inner-box">
<div class="menu">
<a class="menu-item" href="#">首页</a>
<a class="menu-item" href="#">搜索</a>
<a class="menu-item" href="#">产品</a>
<a class="menu-item" href="#">设置</a>
<a class="menu-item" href="#">联系我们</a>
<a class="menu-item" href="#">教程</a>
<a class="menu-item" href="#">简介</a>
<a class="menu-item" href="#">博客</a>
<a class="menu-item" href="#">A&Q</a>
<a class="menu-item" href="#">反馈</a>
<a class="menu-item" href="#">服务</a>
<a class="menu-item" href="#">客户中心</a>
<a class="menu-item" href="#">历史</a>
<a class="menu-item" href="#">登录</a>
<a class="menu-item" href="#">退出</a>
</div>
</div>
</nav>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$('#btn-nav-previous').click(function(){
$(".menu-inner-box").animate({scrollLeft: "-=100px"});
});
$('#btn-nav-next').click(function(){
$(".menu-inner-box").animate({scrollLeft: "+=100px"});
});
</script>
</body>
</html>
此示例是使用如下所示的 CSS 媒体查询创建的响应式菜单。
nav#menu-container {
background:#586e75;
position:relative;
width:100%;
height: 56px;
margin-top: 35px;
}
#btn-nav-previous {
text-align: center;
color: white;
cursor: pointer;
font-size: 24px;
position: absolute;
left: 0px;
padding: 9px 12px;
background: #8f9a9d;
fill:#FFF;
}
#btn-nav-next {
text-align: center;
color: white;
cursor: pointer;
font-size: 24px;
position: absolute;
right: 0px;
padding: 9px 12px;
background: #8f9a9d;
fill:#FFF;
}
.menu-inner-box
{
width: 90%;
white-space: nowrap;
margin: 0 auto;
overflow: hidden;
padding: 0px 54px;
box-sizing: border-box;
}
.menu
{
padding:0;
margin: 0;
list-style-type: none;
display:block;
text-align: center;
}
a.menu-item
{
height:100%;
padding: 0px 25px;
color:#fff;
display:inline;
margin:0 auto;
line-height:57px;
text-decoration:none;
text-align:center;
white-space:no-wrap;
color: #FFF;
}
.menu-item:hover {
text-decoration:underline;
}
@media only screen and (max-width: 480px) {
#btn-nav-previous {
display:none;
}
#btn-nav-next {
display:none;
}
.menu-inner-box
{
width:100%;
overflow-x:auto;
}
}
处理水平滚动的jQuery脚本
以下 jQuery 脚本显示了此示例的简单性。它通过几行代码说明了水平滚动动画的实现方式。
在 jQuery 中，animate() 是使用 CSS 属性执行动画的常用函数之一。对于这个水平滚动菜单，使用 scrollLeft CSS 属性调用此方法。
根据用户点击的导航控件，菜单元素的scrollLeft会相应增加或减少。它将作为动画效果显示给用户。
我们还可以指定动画发生速度的持续时间。
$('#btn-nav-previous').click(function(){
$(".menu-inner-box").animate({scrollLeft: "-=100px"});
});
$('#btn-nav-next').click(function(){
$(".menu-inner-box").animate({scrollLeft: "+=100px"});
});
水平滚动菜单输出
屏幕截图显示了水平滚动菜单。菜单包含十多个菜单项。但是在屏幕截图中，我们可以在初始页面加载时看到其中一些。
可以通过使用右侧导航按钮滚动菜单来查看其余项目。菜单栏两侧的左右导航按钮将用于来回滚动菜单。
jQuery实现的水平可滚动导航菜单
demodownload
结论
本文介绍的应用程序创建水平滚动菜单是一项简单的工作，因为它只需要很少的工具和 UI 经验以及 HTML、CSS 和 jQuery 的基本知识。希望本教程能让你有信心尝试自己创建它。
此示例中使用的所有菜单项都将其 href 属性指向为 #。我们可以通过突出显示当前单击的菜单项来增强菜单行为。
此滚动菜单代码支持无限的菜单项列表。你可以创建新的菜单条目并在你的开发环境中进行设置后测试此功能。
您可能对以下文章也感兴趣
- 漂亮的纯CSS3水平导航菜单（有过渡动画效果）
- 简单却实用的CSS水平和垂直导航栏【演示/源码】
- CSS3+JQuery实现的三级下拉导航菜单
