jquery导航,jquery导航栏下拉菜单

用jquery来设置网页导航栏向下滚动时隐藏，向上滚动时显示的代码

script type="text/javascript" src=""/script

创新互联公司是一家专业提供辉南企业网站建设,专注与成都网站设计、网站制作、H5响应式网站、小程序制作等业务。10年已为辉南众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。

script

(function() {

new Headroom(document.querySelector("#nav-scroll"), { //这里的nav-scroll改为你的导航栏的id或class

offset : 5, // 在元素没有固定之前，垂直方向的偏移量（以px为单位）

tolerance: 5, // scroll tolerance in px before state changes        

classes: {

initial: "animated",  // 当元素初始化后所设置的class

pinned: "slideUp", // 向上滚动时设置的class

unpinned: "slideDown" // 向下滚动时所设置的class

}

}).init();    

}());

/script

然后，加上样式就可以了：

.animated {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;}

.animated .slideDown {top: -100px;}

.animated .slideUp {top: 0;}

jQuery实现带滚动导航效果的全屏滚动相册实例

本文实例讲述了jQuery实现带滚动导航效果的全屏滚动相册。分享给大家供大家参考。具体如下：

运行效果图如下：

主要代码如下：

$(function()

{

//加载时的图片

var

$loader=

$('#st_loading');

//获取的ul元素

var

$list=

$('#st_nav');

//当前显示的图片

var

$currImage

=

$('#st_main').children('img:first');

//加载当前的图片

//同时显示导航的项

$('img').load(function(){

$loader.hide();

$currImage.fadeIn(3000);

//滑出导航

setTimeout(function(){

$list.animate({'left':'0px'},500);

},

1000);

}).attr('src',$currImage.attr('src'));

//计算出将被显示的略缩图所在的div元素的宽度

buildThumbs();

function

buildThumbs(){

$list.children('li.album').each(function(){

var

$elem

=

$(this);

var

$thumbs_wrapper

=

$elem.find('.st_thumbs_wrapper');

var

$thumbs

=

$thumbs_wrapper.children(':first');

//每张略缩图占有180像素的宽度和3像素的间距(margin)

var

finalW

=

$thumbs.find('img').length

*

183;

$thumbs.css('width',finalW

+

'px');

//是这元素具有滚动性

makeScrollable($thumbs_wrapper,$thumbs);

});

}

//点击菜单项目的时候（向上向下箭头切换）

//使略缩图的div层显示和隐藏当前的

//打开菜单（如果有的话）

$list.find('.st_arrow_down').live('click',function(){

var

$this

=

$(this);

hideThumbs();

$this.addClass('st_arrow_up').removeClass('st_arrow_down');

var

$elem

=

$this.closest('li');

$elem.addClass('current').animate({'height':'170px'},200);

var

$thumbs_wrapper

=

$this.parent().next();

$thumbs_wrapper.show(200);

});

$list.find('.st_arrow_up').live('click',function(){

var

$this

=

$(this);

$this.addClass('st_arrow_down').removeClass('st_arrow_up');

hideThumbs();

});

//点击略缩图，改变大的图片

$list.find('.st_thumbs

img').bind('click',function(){

var

$this

=

$(this);

$loader.show();

$('img

class="st_preview"/').load(function(){

var

$this

=

$(this);

var

$currImage

=

$('#st_main').children('img:first');

$this.insertBefore($currImage);

$loader.hide();

$currImage.fadeOut(2000,function(){

$(this).remove();

});

}).attr('src',$this.attr('alt'));

}).bind('mouseenter',function(){

$(this).stop().animate({'opacity':'1'});

}).bind('mouseleave',function(){

$(this).stop().animate({'opacity':'0.7'});

});

//隐藏当前已经打开了的菜单的函数

function

hideThumbs(){

$list.find('li.current')

.animate({'height':'50px'},400,function(){

$(this).removeClass('current');

})

.find('.st_thumbs_wrapper')

.hide(200)

.andSelf()

.find('.st_link

span')

.addClass('st_arrow_down')

.removeClass('st_arrow_up');

}

//是当前的略缩图div层滚动

//当鼠标移至菜单层的时候会自动地进行滚动

function

makeScrollable($outer,

$inner){

var

extra

=

800;

//获取菜单的宽度

var

divWidth

=

$outer.width();

//移除滚动条

$outer.css({

overflow:

'hidden'

});

//查找容器上的最后一张图片

var

lastElem

=

$inner.find('img:last');

$outer.scrollLeft(0);

//当用户鼠标离开菜单的时候

$outer.unbind('mousemove').bind('mousemove',function(e){

var

containerWidth

=

lastElem[0].offsetLeft

+

lastElem.outerWidth()

+

2*extra;

var

left

=

(e.pageX

-

$outer.offset().left)

*

(containerWidth-divWidth)

/

divWidth

-

extra;

$outer.scrollLeft(left);

});

}

});

希望本文所述对大家的jQuery程序设计有所帮助。

简单易懂的jQuery导航(三级菜单)源码

!-- 三级操蛋导航 --

div class="nav_left"

div class="nav_leftlist"

h2b/b用户系统/h2

dl

dtb/b用户管理/dt

dd

a class="cur" href=""商户信息b/b/a

a href=""用户信息b/b/a

/dd

/dl

/div

div class="nav_leftlist"

h2b/b财务系统/h2

dl

dtb/b系统账务/dt

dd

a href=""平台账单b/b/a

a href=""账单明细b/b/a

/dd

/dl

dl

dtb/b商户账务/dt

dd

a href=""商户账单b/b/a

a href=""提现管理b/b/a

/dd

/dl

dl

dtb/b用户账务/dt

dd

a href=""用户账单b/b/a

a href=""提现管理b/b/a

/dd

/dl

/div

/div

style

.nav_left{background: #232b35;height: 100%;width: 220px;min-height: 600px;position: fixed;top: 100px;left: 0;}

.nav_leftlist{}

.nav_leftlist h2{height: 50px;line-height: 50px;padding-left: 40px;font-size: 16px;background: #3b444f;color: #999999;position: relative;cursor: pointer;}

.nav_leftlist h2 b{position: absolute;top: 20px;left: 13px;width: 16px;height: 9px;background: url(../images/icon04.png) no-repeat;background-position: 0 0;cursor: pointer;}

.nav_leftlist h2 b.cur{background-position: -16px 0;}

.nav_leftlist dl{}

.nav_leftlist dl dt{height: 50px;line-height: 50px;background: #2c3643;font-size: 16px;color: #ffffff;padding-left: 60px;position: relative;cursor: pointer;}

.nav_leftlist dl dt b{position: absolute;top: 20px;left: 34px;width: 16px;height: 9px;background: url(../images/icon04.png) no-repeat;background-position: 0 -10px;}

.nav_leftlist dl dt b.cur{background-position: -16px -10px;}

.nav_leftlist dl dd{}

.nav_leftlist dl dd a{display: block;height: 50px;line-height: 50px;color: #fff;padding-left: 80px;font-size: 16px;position: relative;}

.nav_leftlist dl dd a.cur{color: #ee581c;}

.nav_leftlist dl dd a.cur b{display: block;position: absolute;top: 16px;right: -1px;width: 11px;height: 18px;background: url(../images/icon04.png) no-repeat;background-position: 0 -20px;}

/style

/body

script type="text/javascript" src="../js/jquery.js" /script

script type="text/javascript" 

$(function(){

$('.nav_leftlist').on('click', 'h2', function(event) {

$(this).siblings('dl').toggle();

if($(this).siblings('dl').css('display')=='none'){

$(this).find('b').addClass('cur');

}else{

$(this).find('b').removeClass('cur');

}

});

$('.nav_leftlist').on('click', 'dl dt', function(event) {

$(this).siblings('dd').toggle();

if($(this).siblings('dd').css('display')=='none'){

$(this).find('b').addClass('cur');

}else{

$(this).find('b').removeClass('cur');

}

});

})

/script

效果图：

jquery导航条怎么更改对应标签的背景颜色？

可以这样做：

1、首先a{display：block；

width：60px;

height:40px;

}

把每个导航超链接a标签都设置成块儿，设置好尺寸，具体根据图片的尺寸。不做成块儿，就无法设置宽高，也就看不到你设置的背景图片的

然后

a:hover{

background:url(images/bg_2.jpg);

}

举例的这个bg_2.jpg就

2、首先制作好一个自己喜欢的导航条背景，长度和宽度都可设置成和官方一样的。

将自己制作好的导航条背景名字改成nv.png记住如果你做出来的是其他格式的话要转换成.png格式的才行。

3、打开你的ftp上传工具连接到网站目录。

1然后找到template/default/style/t5/下面的nv.png文件，这是官方默然的文件路径，如果你用的是其他模板的话找到nv.png。上传覆盖自己弄好的背景至template/default/style/t5里面后台更新缓存就完成更换了。

【延展】

导航条：

导航条起到了各个页面的关联作用，导航条的类型有很多，有通栏导航条，有为了美观性的中英切换导航，还有带有下拉框的导航条，这些导航条都是根据网站内容而定，因此学习该课程你能够了解现在网站经常出现的导航条样式，并可以灵活的运用。