jquery边栏导航（html侧边栏导航）
本文目录一览：
- 1、jquery 怎么做移动端手势触控导航栏
- 2、怎么用jquery实现导航栏的不同按钮定位到不同的页面窗口
- 3、jquery实现垂直和水平菜单导航栏
- 4、如何用jquery来制作侧边导航栏？
- 5、jq的导航栏
jquery 怎么做移动端手势触控导航栏
一个简单的解决方案：顶端固定一个DIV作为导航容器，该DIV左端和右端分别用DIV模拟向左和向右的按钮，中间区域呈现导航按钮，计算当前位置，用模拟的按钮控制左右滚动。
另，你说的手机端用手指滑动，在 HTML 中是由浏览器根据手势触控事件来支持的，jQuery 超越不了浏览器对 JS 的支持，因为 jQuery 就是 JS 的程序包。如果使用 Mouse 事件来实现，也不是不可以，因为手势触控的本质无非还是 Mouse 事件同源的衍生计算。费老鼻子劲使用 Mouse 事假实现一个有加速减速效果的导航滑动，不经济。供参考。
怎么用jquery实现导航栏的不同按钮定位到不同的页面窗口
var arr=["1.html","2.html","3.html","4.html","5.html"];
$(":button").click(function(){
var me=$(this);
$("#main").load(arr[me.index()]);
});
///////////////
div id="main"
/div
jquery实现垂直和水平菜单导航栏
本文实例为大家分享了jquery菜单导航栏的实现代码，供大家参考，具体内容如下
1.
HTML代码
!DOCTYPE
html
html
head
meta
charset="UTF-8"
title竖直导航菜单/title
link
href="css/Vmenu.css"
rel="stylesheet"
/
script
src="js/jquery-2.1.4.min.js"/script
script
$(function(){
//垂直导航栏，点击下拉子菜单
$(".maina").click(function(){
$(this).next().slideToggle(500)
.parent().siblings().find(".child").slideUp(500);
})
//水平导航栏，鼠标经过下拉导航栏
$(".hmain").hover(function(){
$(this).find(".child").slideToggle(500)
.parent().siblings().find(".child").slideUp();
})
})
/script
/head
body
!--垂直导航栏--
ul
class="fd02-00b2-9f0a-c587 content"
li
class="00b2-9f0a-c587-b793 main"a
href="#"菜单
1/a
ul
class="9f0a-c587-b793-a97e child"
li菜单1.1/li
li菜单1.2/li
li菜单1.3/li
/ul
/li
li
class="c587-b793-a97e-cdfb main"a
href="#"菜单
2/a
ul
class="b793-a97e-cdfb-3e27 child"
li菜单2.1/li
li菜单2.2/li
li菜单2.3/li
li菜单2.4/li
/ul
/li
li
class="a97e-cdfb-3e27-ca60 main"a
href="#"菜单
3/a
ul
class="cdfb-3e27-ca60-fe14 child"
li菜单3.1/li
li菜单3.2/li
li菜单3.3/li
/ul
/li
li
class="3e27-ca60-fe14-246e main"a
href="#"菜单
4/a
ul
class="ca60-fe14-246e-baf2 child"
li菜单4.1/li
li菜单4.3/li
/ul
/li
li
class="fe14-246e-baf2-262f main"a
href="#"菜单
5/a
ul
class="246e-baf2-262f-e6f8 child"
li菜单5.1/li
li菜单5.2/li
/ul
/li
/ul
!--水平导航栏--
ul
class="0e18-1346-e256-91b5 content"
li
class="1346-e256-91b5-fd02 hmain"a
href="#"菜单
1/a
ul
class="e256-91b5-fd02-00b2 child"
li菜单1.1/li
li菜单1.2/li
li菜单1.3/li
/ul
/li
li
class="91b5-fd02-00b2-9f0a hmain"a
href="#"菜单
2/a
ul
class="fd02-00b2-9f0a-c587 child"
li菜单2.1/li
li菜单2.2/li
li菜单2.3/li
li菜单2.4/li
/ul
/li
li
class="00b2-9f0a-c587-b793 hmain"a
href="#"菜单
3/a
ul
class="9f0a-c587-b793-a97e child"
li菜单3.1/li
li菜单3.2/li
li菜单3.3/li
/ul
/li
li
class="c587-b793-a97e-cdfb hmain"a
href="#"菜单
4/a
ul
class="b793-a97e-cdfb-3e27 child"
li菜单4.1/li
li菜单4.3/li
/ul
/li
li
class="a97e-cdfb-3e27-ca60 hmain"a
href="#"菜单
5/a
ul
class="cdfb-3e27-ca60-fe14 child"
li菜单5.1/li
li菜单5.2/li
/ul
/li
/ul
/body
/html
2.
CSS代码
*{
margin:
0px;
padding:
0px;
}
.content{
margin:
40px
100px;
float:
left;
}
ul
,li{
list-style:
none;
}
.main,.hmain{
width:
150px;
background:
#222;
font-size:
16px;
text-align:
center;
cursor:
pointer;
line-height:
40px;
color:
white;
}
.maina,.hmaina{
text-decoration:
none;
color:
white;
display:
inline-block;
width:
150px;
min-height:
40px;
}
.main:hover,.hmain:hover{
background:
black;
}
.child{
background:
#444;
display:none;
}
.child
li:hover{
background:
#333333;
}
/*垂直导航栏左浮动*/
.hmain{
float:
left;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
如何用jquery来制作侧边导航栏？
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titlejQuery动画垂直折叠导航效果/title
style type="text/css"
.menu_list{width:268px;margin:0 auto;}
.menu_head{
height: 47px;
line-height: 47px;
padding-left: 38px;
font-size: 14px;
color: #525252;
cursor: pointer;
border-left: 1px solid #e1e1e1;
border-right: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
border-top: 1px solid #F1F1F1;
position: relative;
margin: 0px;
font-weight: bold;
background: #f1f1f1 url(images/pro_left.png) center right no-repeat;
}
.menu_list .current{background:#f1f1f1 url(images/pro_down.png) center right no-repeat;}
.menu_body{
line-height: 38px;
border-left: 1px solid #e1e1e1;
backguound: #fff;
border-right: 1px solid #e1e1e1;
}
.menu_body a{display:block;height:38px;line-height:38px;padding-left:38px;color:#777777;background:#fff;text-decoration:none;border-bottom:1px solid #e1e1e1;}
.menu_body a:hover{text-decoration:none;}
/style
/head
body
!-- 代码部分begin --
div id="firstpane" class="3e27-ca60-fe14-246e menu_list"
h3 class="ca60-fe14-246e-baf2 menu_head current"哲学/h3
div style="display:block" class="fe14-246e-baf2-262f menu_body"
a href=""科学技术哲学/a
a href="#"宗教学/a
a href="#"美学/a
a href="#"伦理学/a
a href="#"逻辑学/a
a href="#"外国哲学/a
a href="#"中国哲学/a
a href="#"马克思主义哲学/a
/div
h3 class="246e-baf2-262f-e6f8 menu_head"经济学/h3
div style="display:none" class="0e18-1346-e256-91b5 menu_body"
a href="#"应用经济学/a
a href="#"理论经济学/a
a href="#"国民经济学/a
a href="#"区域经济学/a
a href="#"产业经济学/a
a href="#"国际贸易学/a
a href="#"劳动经济学/a
a href="#"政治经济学/a
/div
h3 class="1346-e256-91b5-fd02 menu_head"法学/h3
div style="display:none" class="e256-91b5-fd02-00b2 menu_body"
a href="#"马克思主义基本原理/a
a href="#"马克思主义发展史/a
a href="#"马克思主义中国化研究/a
a href="#"国外马克思主义研究/a
a href="#"思想政治教育/a
/div
h3 class="91b5-fd02-00b2-9f0a menu_head"教育学/h3
div style="display:none" class="fd02-00b2-9f0a-c587 menu_body"
a href="#"体育人文社会学/a
a href="#"体育教育训练学/a
a href="#"民族传统体育学/a
a href="#"发展与教育心理学/a
a href="#"应用心理学/a
a href="#"教育学原理/a
a href="#"课程与教学论/a
a href="#"比较教育学/a
/div
/div
script src="js/jquery.js"/script
script
$(document).ready(function(){
$("#firstpane .menu_body:eq(0)").show();
$("#firstpane h3.menu_head").click(function(){
$(this).addClass("current").next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().removeClass("current");
});
$("#secondpane .menu_body:eq(0)").show();
$("#secondpane h3.menu_head").mouseover(function(){
$(this).addClass("current").next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
$(this).siblings().removeClass("current");
});
});
/script
!-- 代码部分end --
/body
/html
你自己引入jQuery。还有下面这两张图片啊
jq的导航栏
这个是选项卡切换的jquery吧？首先给你要点击的li标签设置一个共同的class。我下面取值为navbar-li。
$(".navbar-li").click(function(){
$(this).addClass("active").siblings().removeClass("active"); //切换选中的按钮高亮状态
});
