jquery菜单滑动,菜单左右滑动
基于jquery的手机触控左右滑动拖动导航菜单
一个简单的解决方案：顶端固定一个DIV作为导航容器，该DIV左端和右端分别用DIV模拟向左和向右的按钮，中间区域呈现导航按钮，计算当前位置，用模拟的按钮控制左右滚动。
创新互联长期为1000+客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为雄县企业提供专业的网站设计、网站制作，雄县网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。
另，你说的手机端用手指滑动，在 HTML 中是由浏览器根据手势触控事件来支持的，jQuery 超越不了浏览器对 JS 的支持，因为 jQuery 就是 JS 的程序包。如果使用 Mouse 事件来实现，也不是不可以，因为手势触控的本质无非还是 Mouse 事件同源的衍生计算。费老鼻子劲使用 Mouse 事假实现一个有加速减速效果的导航滑动，不经济。供参考。
jquery怎么禁止手机页面触屏滑动页面滚动
1、jquery 监听页面滚动使用的方法：.scroll()。
2、新建一个HTML文档，定义body的高度。
3、创建JS脚本，使用.scroll() 方法监听页面滚动。
4、如果页面发生滚动，则执行函数，弹出一个hello。
5、保存文件，查看.scroll()监听页面滚动的效果。
jquery实现二级菜单时，点击一级菜单，二级菜单滑出一下就又消失了
jquery实现由一级导航菜单到二级滑动显示效果，并点击增加背景变化效果，代码挺简单的，但是也效果也很好，是非常实用的，也是很流行的菜单样式
html:
div class="webSchoolL" id="webSchoolL"
ul class="leftTab" id="leftMeau"
li class="listL01"1/li
li
a href="#nogo"2/a
ul class="navUl"
lia href="#nogo"22/a/li
lia href="#nogo" class="curButA"22/a/li
lia href="#nogo"22/a/li
lia href="#nogo"22/a/li
/ul
/li
li
a href="#nogo"3/a
ul class="navUl"
lia href="#nogo"33/a/li
lia href="#nogo" class="curButA"33/a/li
lia href="#nogo"33/a/li
lia href="#nogo"33/a/li
/ul
/li
li
a href="#nogo"4/a
ul class="navUl"
lia href="#nogo"44/a/li
lia href="#nogo" class="curButA"44/a/li
lia href="#nogo"44/a/li
lia href="#nogo"44/a/li
/ul
/li
li
a href="#nogo"5/a
ul class="navUl"
lia href="#nogo"55/a/li
lia href="#nogo" class="curButA"55/a/li
lia href="#nogo"55/a/li
lia href="#nogo"55/a/li
/ul
/li
li
a href="#nogo" class="curButA"6/a
ul class="navUl" style="display:block;"
lia href="#nogo"66/a/li
lia href="#nogo" class="curButA"66/a/li
lia href="#nogo"66/a/li
lia href="#nogo"66/a/li
/ul
/li
li
a href="#nogo"7/a
ul class="navUl"
lia href="#nogo"77/a/li
lia href="#nogo" class="curButA"77/a/li
lia href="#nogo"77/a/li
lia href="#nogo"77/a/li
/ul
/li
li
a href="#nogo"8/a
ul class="navUl"
lia href="#nogo"88/a/li
lia href="#nogo" class="curButA"88/a/li
lia href="#nogo"88/a/li
lia href="#nogo"88/a/li
/ul
/li
li
a href="#nogo"9/a
ul class="navUl"
lia href="#nogo"99/a/li
lia href="#nogo" class="curButA"99/a/li
lia href="#nogo"99/a/li
lia href="#nogo"99/a/li
/ul
/li
/ul
/div
2
css:
.webSchoolL{ width:200px; height:460px; background:#ececec;}
ul.leftTab{ display:block; width:185px; border:1px solid #d0d0d0; margin:8px 0 0 7px; float:left; display:inline; background:#fff;}
ul.leftTab li{ width:179px; text-align:left; margin:5px 3px; float:left; display:inline;}
ul.leftTab li a{height:28px; width:179px; display:block; background:url(../images/meaulibg.png) no-repeat;line-height:28px;text-indent:47px; font-size:14px; font-weight:bold; color:#000;}
ul.leftTab li a:hover,ul.leftTab .curButA{background:url(../images/meaulicur.png) no-repeat; color:#fff; font-weight:bold; text-decoration:none;}
ul.leftTab .listL01{ height:32px; width:187px; background:url(../images/listL01.gif) no-repeat; margin:0 auto 3px auto; font-size:14px; font-weight:bold; color:#ffffff; text-indent:32px; margin:0px 0 0 -1px;line-height:32px;}
ul.leftTab li ul.navUl { display:none;border-left:1px solid #3fb4e8;border-right:1px solid #3fb4e8;border-bottom:1px solid #3fb4e8;}
ul.leftTab li ul.navUl li { float:none;margin:0px;}
ul.leftTab li ul.navUl li a { _width:177px;background:none; font-size:12px; font-weight:normal; color:#333;}
ul.leftTab li ul.navUl li a.curButA, ul.leftTab li ul.navUl li a:hover { background:url(../images/meaunavcur.png) no-repeat 18px 0px;color:#000;font-weight:normal;}
3
js:$(function(){//导航特效
$("#leftMeau li:has(ul) a").click(function(){
$(this).addClass("curButA");
$(this).siblings().slideDown();
$(this).parent().siblings().find("a").removeClass("curButA");
$(this).parent().siblings().find("ul").slideUp();
});
})
4
效果如图所示
（此图看不出滑动效果，但实际效果确实是滑动效果）
END
注意事项
此方法简单灵活，拿来就可以应用，应用修改时请注意三种样式一起修改，避免代码无用
另外应用时记得把jquery类库引到页面中来，否则无效果
如何用CSS和jQuery实现一个侧滑导航菜单
可以参考：
为了建立导航菜单，让我们先看看html结构：
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titleAnimation Menu Demo/title
link rel="stylesheet" href=""
link href='' rel='stylesheet' type='text/css'
link rel="stylesheet" href=""
script src=""/script
script src="script.js"/script
link rel="stylesheet" href="style.css"
/head
body
!-- Content goes here --
/body
/html
首先，我们引用normalize.css作为默认样式，以确保我们的菜单在每个浏览器是一样的。我们使用字体图标fontawesome来显示菜单项向下的图标。我们还需要引用jQuery来实现菜单的切换。
面板按钮
每个网站面板导航按钮都类似。它往往是一个图标字体，如fontawesome，但在本教程中我想添加一些动画，所以我们用横线来实现。基本上，我们的按钮是一个跨度，包含三个div显示为水平横线。
span class="toggle-button"
div class="menu-bar menu-bar-top"/div
div class="menu-bar menu-bar-middle"/div
div class="menu-bar menu-bar-bottom"/div
/span
样式看起来如下：
.toggle-button {
position: fixed;
width: 44px;
height: 40px;
padding: 4px;
transition: .25s;
z-index: 15;
}
.toggle-button:hover {
cursor: pointer;
}
.toggle-button .menu-bar {
position: absolute;
border-radius: 2px;
width: 80%;
transition: .5s;
}
.toggle-button .menu-bar-top {
border: 4px solid #555;
border-bottom: none;
top: 0;
}
.toggle-button .menu-bar-middle {
height: 4px;
background-color: #555;
margin-top: 7px;
margin-bottom: 7px;
top: 4px;
}
.toggle-button .menu-bar-bottom {
border: 4px solid #555;
border-top: none;
top: 22px;
}
.button-open .menu-bar-top {
transform: rotate(45deg) translate(8px, 8px);
transition: .5s;
}
.button-open .menu-bar-middle {
transform: translate(230px);
transition: .1s ease-in;
opacity: 0;
}
.button-open .menu-bar-bottom {
transform: rotate(-45deg) translate(8px, -7px);
transition: .5s;
}
按钮有一个固定的位置，不动时滚动页面。它也有一个 z-index :15的样式，以保证它总是保持在其他重叠元素之上。按钮由三条横线。每横线都有自已的样式，我们给它加上.menu-bar样式。类其余的样式被移动到单独的样式文件中。动画发生时，我们添加一个类.button-open。我们引用jQuery，可以比较方便的实现它：
$(document).ready(function() {
var $toggleButton = $('.toggle-button');
$toggleButton.on('click', function() {
$(this).toggleClass('button-open');
});
});
初学者可能不熟悉jQuery，让我解释一下这是怎么回事。首先，我们初始化一个变量称为$togglebutton，其中包含我们的按钮。我们将它存储为一个变量，然后我们创建一个事件监视器监听点击按钮。每单击一次，事件监听器会执行方法 function toggleclass()来切换.button-open。
.button-open我们可以用它来改变这些元素的显示方式。我们使用CSS3 translate()和rotate()功能使顶部和底部的横线旋转45度，与中间的横线逐渐消失。你可以点击Demo中的按钮来看看效果。
侧滑菜单
侧滑菜单的html的结构如下：
div class="menu-wrap"
div class="menu-sidebar"
ul class="menu"
lia href="#"Home/a/li
lia href="#"About/a/li
lia href="#"Blog/a/li
li class="menu-item-has-children"a href="#"Click The Arrow/a
span class="sidebar-menu-arrow"/span
ul class="sub-menu"
lia href="#"Alignment/a/li
lia href="#"Markup/a/li
lia href="#"Comments/a/li
/ul
/li
lia href="#"Courses/a/li
lia href="#"Get In Touch/a/li
/ul
/div
/div
在这里不详细解释每个风格的菜单，我们看下.menu-wrap 的div。它的样式如下：
.menu-wrap {
background-color: #6968AB;
position: fixed;
top: 0;
height: 100%;
width: 280px;
margin-left: -280px;
font-size: 1em;
font-weight: 700;
overflow: auto;
transition: .25s;
z-index: 10;
}
它的位置是固定的，所以菜单一直在同一个地方滚动。高度设为100%。注意，左边距设置为负数，使这菜单从视图中消失。为了让它有一个出现的特效，我们用jquery来了调用另一class来显示和关闭。JavaScript代码如下：
$(document).ready(function() {
var $toggleButton = $('.toggle-button'),
$menuWrap = $('.menu-wrap');
$toggleButton.on('click', function() {
$(this).toggleClass('button-open');
$menuWrap.toggleClass('menu-show');
});
});
我们增加一个变量$menuwrap其中包含菜单的所有项，并使用相同的事件来创建按钮。这个.menu-show的左边距为0，并增加了一些盒子阴影效果。
.menu-show {
margin-left: 0;
box-shadow: 4px 2px 15px 1px #B9ADAD;
}
子菜单和链接
你可能会注意到一个列表项的class .menu-item-has-children。包含子菜单。同时，链接后，有一个class .sidebar-menu-arrow。
li class="menu-item-has-children"a href="#"Click The Arrow/a
span class="sidebar-menu-arrow"/span
ul class="sub-menu"
!-- List items --
/ul
/li
span 有一个::after伪元素包实现fontawesome箭头。默认情况下，子菜单是隐藏的，只有单击父级菜单时才出现：
$(document).ready(function() {
var $sidebarArrow = $('.sidebar-menu-arrow');
$sidebarArrow.click(function() {
$(this).next().slideToggle(300);
});
});
当我们单击箭头，一个函数被调用时，它的目标的下一个元素之后的span并使其可见。我们使用的jquery的slidetoggle。它使一个元素滑动效果的出现或消失，函数有一个动画时间参数。
最后，我们的演示菜单项有一个悬停效果。它是使用一个::after伪元素。代码如下：
.menu-sidebar li a::after {
content: "";
display: block;
height: 0.15em;
position: absolute;
top: 100%;
width: 102%;
left: 50%;
transform: translate(-50%);
background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);
transition: background-position .2s .1s ease-out;
background-size: 200% auto;
}
.menu-sidebar li a:hover::after {
background-position: -100% 0;
}
这个::after伪元素包含在每个环节下绝对定位的块级元素，随着0.15em高度和宽度。我们不只是应用背景颜色的线，我们使用linear-gradient() 在背景图像功能。虽然这个功能的目的是使颜色梯度，我们可以通过指定的百分比，做了一个渐变的颜色变化。
.menu-sidebar li a::after {
background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);
}
这里一半的线是透明的，另一半是黄色的。通过背景大小200%的宽度，使透明部分占用的所有链接的宽度。
jquery如何实现菜单条由下向上滑动显示 由上向下滑动隐藏
由上向下滑动由 slideDown()控制，
由下向上滑动由 slideUp()控制。
首先将菜单条隐藏，这种情况一般赋予其CSS属性：display:none; 来隐藏。
然后通过jquery赋予它事件：点击或者鼠标移入。
通过这个事件绑定由下向上滑动的 slideUp()。
最后通过点击或者鼠标移出绑定由上向下滑动的 slideDown()。
slideDown()slideUp()中的括号填入速度。比如
slideDown("fast")
分享标题：jquery菜单滑动,菜单左右滑动
标题链接：http://6mz.cn/article/phegie.html