精妙绝伦的jQuery——改进导航：菜单、标签及折叠选项

一、让页面上所有的链接都在新窗口打开。

html代码：

<ul id="links">
<li><a href="http://www.yahoo.com">Yahoo</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.bing.com">Bing</a></li>
</ul>
选取#links li元素的后代元素a，然后使用.attr()方法把这些链接元素的target属性设置为_blank。

$('#links li a').attr('target', '_blank');

除此之外，还可以对页面上的这些链接做别的事情。

1、给所有的链接添加一个新的类；

2、为所有链接添加内容与链接文本一致的title属性；

3、为所有链接分别添加一个rel属性；

4、删除所有链接的href属性，从而禁用这些链接。

二、突出显示导航中的当前选中项。

方法是用jQuery脚本对菜单项URL与页面实际URL进行对比，让正确的菜单项高亮。

1、创建一个变量path，并为它赋值为location.pathname，pathname是javascript原生对象location的一个属性，它返回URL中域名之后的部分。

var path = location.pathname; （假如我们正在访问页面www.qq.com/mycode/demo.html。那么location.pathname就等于/mycode/demo.html。

2、再创建一个变量pathArray，然后使用原生的java Script字符串方法.split()把pathname从/处拆分，得到一个数组。

var pathArray = path.split( '/' ); （拆分结果，即pathname的值是['mycode' , 'demo.html']。

3、创建最后一个变量pArrLength，把它的值设置为pathArray的长度。

var pArrLength = pathArray.length;

4、创建一个for循环，迭代处理数组pathArray的每一个值。然后使用属性选择器选中包含其中某个值的所有链接，为其加上selected类。这里的属性选择器使用了通配符（*），他会匹配href的任意部分。

for(i = 0 ; i < pArrLength;i++){

$(" a[ href*=' "+pathArray[i] + " ' ]").addClass("selected");

}

三、创建简单的下拉菜单。

1、创建html文件。

<div id="header">
<ul id="navigation">
  <li><a href="#">Home</a></li>
  <li><a href="#">Our Work</a>
   <ul class="subnav">
    <li><a href="#">Example 1</a></li>
    <li><a href="#">Example 2</a></li>
    <li><a href="#">Example 3</a></li>
   </ul>
  <li><a href="#">Services</a>
   <ul class="subnav">
    <li><a href="#">Service 1</a></li>
    <li><a href="#">Service 2</a></li>
    <li><a href="#">Service 3</a></li>
   </ul>
  </li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Contact</a></li>
</ul>
</div>

2、准备样式表

使用YUI（Yahoo! User Interface)清理样式

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3.h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}

h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}

3、设置CSS控制页面上主菜单和下拉菜单的布局。

.container{width:950px;margin:10px auto;font:14px "Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;border:1px solid #333;}
p{margin:10px;}
ul#navigation{list-style-type:none;background:#CE0100;height:63px;font-size:24px;}
ul#navigation li{float:left;width:175px;text-align:center;position:relative;height:63px;padding:20px 5px 10px 5px;}
ul#navigation li a{color:#fff;text-decoration:none;display:block;}
ul#navigation li a.active{border:1px solid blue;}
ul#navigation li ul.subnav {background:#E7F1D2;width:175px; clear:both;display:none;position:absolute;top:63px; -moz-border-radius-bottomleft:8px;-moz-border-radius-bottom:8px;-webkit-border-bottom-left-radius:8px;-webkit-border-bottom-right-radius:8px;border-radius:8px;border-left:2px solid #998;border-right:2px solid #998;border-bottom:2px solid #998;}
ul#navigation li ul.subnav li{clear:both; height:40px;padding:0;text-decoration:center;margin:0px;}
ul#navigation li ul.subnav li a{background:none;font-size:18px;color:#333;text-decoration:none;padding:10px 0;border:none;}

ul#navigation li ul.subnav li a:hover{background:#DBF1AD;font-size:18px;color:#333;border:none;}

4、使用选择器#navigation li选中菜单项，设置它的hover事件。hover事件是mouseenter和mouseleave事件的组合。第一个事件处理函数处理mouseenter事件，我们需要用.find()找到类名为subnav的嵌套列表，然后调用.slideDown()方法把它显示出来。第二个事件处理函数处理mouseleave事件，它做得事情和mouseenter事件刚好相反，即用.find()找出相应的子菜单，然后调用.slideUp()方法把它收起来。对那些没有子菜单的元素来说，当鼠标悬停在他们之上时，由于找不到.subnav子元素，什么都不会发生。

$(document).ready(function(){
$('#navigation li').hover(function(){
$(this).find('.subnav').slideDown('slow');//在不同浏览器的slow好像速度不一样。建议用毫秒数值。
},function(){
$(this).find('.subnav').slideUp('fast');
});
});

PS:上面的语句用限定条件（this）。先选中#navigation li元素，然后绑定hover事件，我们就可以用this关键字引用被hover的元素，从而确保.slideDown()方法只应用到被悬停列表项的子菜单上。

5、最后一步，当鼠标位于主菜单或相应的子菜单上时，主菜单和相应的子菜单应该保持高亮。具体是：使用.find()方法找到相应的a元素，如果是mouseenter事件就添加active类，否则就删除active类。

$(document).ready(function(){
$('#navigation li').hover(function(){
$(this).find('.subnav').slideDown('slow');
$(this).find('a').addClass('active');
},function(){
$(this).fint('.subnav').slideUp('fast');
$(this).find('a').removeClass('active');
});
});

6、还可以使用.animate()方法为下拉菜单增加特效。CSS属性、动画持续时间、缓动方式及回调函数。

$(document).ready(function(){
$('#navigation li').hover(function(){
$(this).find('.subnav').animate({opacity:1.0,height:'toggle'},500);
$(this).find('a').addClass('active');
},function(){
$(this).fint('.subnav').animate({opacity:0,height:'toggle'},500);
$(this).find('a').removeClass('active');
});
});

四、创建折叠菜单

折叠菜单只显示一节的内容，同时隐藏其他内容。

1、首先定义折叠菜单的HTML结构。两个元素：一个是折叠菜单标题元素，一个是折叠菜单的内容元素。

<div id="accordion">
<div class="accordion-header">
<h3>Books</h3>
<span></span>
</div>
<ul class="accordion-content">
<li><a href="#">Business</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">Tech</a></li>
<li><a href="#">Romance</a></li>
</ul>
<div class="accordion-header">
<h3>Electronics</h3>
<span></span>
</div>
<ul class="accordion-content">
<li><a href="#">Audio</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Automobile</a></li>
<li><a href="#">Appliance</a></li>
</ul>
<div class="accordion-header">
<h3>Sporting Goods</h3>
<span></span>
</div>
<ul class="accordion-content">
<li><a href="#">Baseball</a></li>
<li><a href="#">Basketball</a></li>
<li><a href="#">Football</a></li>
<li><a href="#">Tennis</a></li>
</ul>
</div>

2、使用CSS reset，建议使用YUI，上一个节点有相关代码。

3、使用CSS定义菜单和内容元素的样式。菜单图标使用了CSS“精灵”（sprite）。

“精灵”是指创建一张大图，然后通过背景定位技术用这一张图为Web站点上的多个元素提供背景。使用“精灵”的好处就是可以大大减少站点向Web服务器请求图片的次数，从而降低了载入时间，提高了站点性能。如果你的站点中使用了20多张图片，就能明显体会到“精灵”时的性能改善。此外，“精灵”还有助于防止图片载入过程中的闪烁。（比如使用两张图片制作翻转效果，并且被悬停的图片尚未加载完时）。

#accordion{width:225px;margin:10px 0px 10px 10px;}
#accordion .accordion-header{background:#3971AC;color:#fff;border-bottom:1px solid #fff;position:relative;}
#accordion .accordion-header h3{margin:0;cursor:pointer;text-indent:10px;padding:5px 0;}
#accordion .header-active{background:#48ABC3;}
#accordion .accordion-header span{background:url(../images/accordion_spriter.gif) no-repeat;display:block;position:absolute;width:11px;height;12px;top:5px;left:200px;}
#accordion .accordion-header span.icon-active{background:url(../images/accordion_sprite.gif) no-repeat;background-position:0 -12px;display:block;position:absolute;width:11px;height:12px;top:5px;left:200px;}
#accordion ul.accordion-content{margin:0px 0 0px 0;padding:5px 5px 10px 5px;list-style-type:none;background:#A8D7E2;}
#accordion ul.accordion-content li{padding:1px 0px;display:block;margin:0;padding:2px 5px;}
#accordion ul.accordion-content li a{color:#D16C3A;}
4、在页面加载完成之后，确保只有第一个菜单元素及其内容元素可见。以下jQuery代码结合使用.not()方法和:first过滤器，使第一个元素之外的其他折叠内容（内容元素）隐藏。

$('.accordion-content').not(':first').hide();

.not()方法过滤掉参数选择器匹配的任意元素或者选择器。参数选择器可以是某种过滤器（如本例所示），也可以是一个具体的元素（在下面这一步我们就会看到这种例子）。

5、隐藏完除第一个外的所有.accordion-content元素之后，我们用另一条语句找出第一个.accordion.content元素，并调用.show()方法（确保它可见）：

$('.accordion-content:first').show();

6、为了让当前菜单项高亮，我在CSS文件中定义了一个header_active类。使用下面的代码把这个类应用到第一个.accordion-header元素：

$('.accordion-header:first').addClass('header-active');

我还使用空的span标签为折叠菜单的标题加了图标。我定义了一个icon-active类，它会显示成一个向下的箭头，提示用户这个内容区是展开状态。如果标题没有这个类，span标签就会显示成一个向右的箭头。使用:first过滤器选中第一个.accordion-header元素，然后链式调用.find()方法找出它的span后代元素，为它加上.icon-active类。

$('.accordion-header:first').find('span').addClass('icon-active');

7、现在进入有趣的部分——让折叠菜单响应用户输入，也就是为.accordion-header标题元素绑定click事件处理函数。

$('.accordion-header').click(function(){

});

8、click事件处理函数中的第一条语句负责让当前展开的元素缩回去，并移除使它们高亮的类。为此，只需选中可见的.accordion-content元素，并调用.slideUp()。之后再调用.prev()得到DOM树的上一个元素，也就是对应的.accordion-header元素，删掉该元素的header-active类。

$('.accordion-header').click(function(){

$('.accordion-content:visible').slideUp('slow').prev()

.removeClass('header-active');

});

.prev()方法用于查找DOM树中的上一个兄弟元素。.prev()方法还支持选择器参数，比如你可以将.active作为参数传递给它。

9、增加一条语句，确保把所有可见的.icon-active元素显示成向右的箭头，方法是移除icon-active类。

$('.accordion-header').click(function(){
$('.accordion-content:visible').slideUp('slow').prev()
.removeClass('header-active');
$('.icon-active:visible').removeClass('icon-active');
});

请务必记住，.addClass()、.removeClass()和hasClass()方法的参数，类的名字前不需要句点。这是一个常被忽视的问题，会导致jQuery脚本错误。另外，.is()、.filter()方法和.not()方法在参数为类名时，一定要加上句点。

10、增加一条语句，使用this关键字选中被单击的菜单标题，给它加上header-active类。然后用.next()方法选中它的下一个元素，即内容元素，调用slideDown()让其慢慢滑下。

$('.accordion-header').click(function(){
$('.accordion-content:visible').slideUp('slow').prev()
.removeClass('header-active');
$('.icon-active:visible').removeClass('icon-active');
$(this).addClass('header-active').next().slideDown('slow');
});

.next()方法与.prev()方法正相反，它不返回上一个兄弟元素，而是返回下一个。

11、最后一条语句使用this关键字，结合.find()方法找到.accordion-header元素中的span标签，给它加上.icon-active类。

如果在站点或应用中，折叠菜单项不是页面固有的，而是被动态添加到DOM中的，你一定要改用.live()方法绑定click事件。否则那些在DOM加载完之后才添加进来的元素不会响应click事件。

最后，将所有的HTML、CSS和jQuery代码组合到一起，并在浏览器中载入这个页面，你就会看到一个生龙活虎的折叠菜单。

总结不足：

1、随着不断向折叠菜单中添加菜单项，我们开始需要滚动页面才能选择或查看其中嵌入的内容。

2、刷新页面时，折叠菜单并不会记住上一次展开的是哪个菜单项，不过我们可以通过jQuery和cookie实现这类功能。解决这个问题还有一个更好的、不使用cookie的技术，那就是在URL的查询字符串中使用锚，详见Rebecca Murphey的一篇博文(http://blog.rebeccamur-phey.com/2007/12/04/anchor-based-url-navigation-with-jQuery/)。

3、折叠菜单的当前位置无法保存到书签中。如果你通过添加书签收藏一个页面，期望下次打开它时能打开保存时看到的小节，你的期望会落空。这个问题可以通过上一段中提到的锚技术解决。

4、如果你的站点受众缺乏因特网经验，他们有可能不熟悉折叠菜单，因此很可能根本就不会用。

精妙绝伦的jQuery——改进导航：菜单、标签及折叠选项相关推荐

Jquery页面导航(菜单悬停，折叠效果)
1.把悬停效果加到菜单项 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
jQuery 分类导航菜单条点击变色
JQuery 分类导航菜单条点击变色,当点击导航菜单则当前点击选中导航菜单变色其它还原,依次类推. <script type="text/javascript" src=&q ...
css3+jQuery制作导航菜单（带动画效果）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css ...
Html+Css+jQuery左侧导航菜单三级联动
Html部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
ElementUI导航菜单嵌套多级折叠面板的小箭头图标bug
1.问题使用的饿了么组件,导航menu组件,里面放了几层折叠面板,结果在收起的时候,小箭头没有隐藏掉,找了半天样式没找到,于是,另辟蹊径(贴了个创可贴) 2.解决直接整了个div,绝对定位,设置宽 ...
45个jQuery的导航插件和教程
正如我们所知道的,一个新用户访问一个网站时,决定他们去留的关键是最初的15-20秒种.这是至关重要的,你必须遵循统一的风格来设计您的网站,特别是导航的风格,可能性规则,让用户可以轻松地找到他们想要的内 ...
36个引人注目JQuery导航菜单
1.jQuery 选项卡界面 / 选项卡结构菜单教程这种类型的菜单在网页设计与开发中非常著名的.此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单.要非常留心 ...
导航菜单：jQuery粘性滚动导航栏效果
粘性滚动是当导航在滚动过程中会占粘于浏览器上,达到方便网站页面浏览的效果,也是一种用户体验,下面我们看一下是怎么实现的: jQuery的 smint插件,也是一个导航菜单固定插件.当页滚动时,导航菜单 ...
jQuery实例——仿京东仿淘宝列表导航菜单
以前看着京东,淘宝的导航做的真好,真想哪一天自己也能做出来这么漂亮功能全的导航菜单.今天弄了一下午终于自制成功,主要使用jQuery和CSS,实现功能基本和京东一样. 功能介绍: 1.鼠标停留导航: ...

精妙绝伦的jQuery——改进导航：菜单、标签及折叠选项

精妙绝伦的jQuery——改进导航：菜单、标签及折叠选项相关推荐

最新文章

热门文章