JQuery+CSS实现分类菜单前面不同的图标-威言威语

当前位置：首页 > 设计 > 正文

JQuery+CSS实现分类菜单前面不同的图标

William2011-09-14 00:15设计16,921次阅读59条评论

扫一扫手机看

『Weisay Heibai』发布之后，就有朋友说为什么他们的博客独立页面标题前面没有像我那样的小图标，因为每个给自己独立页面取的名字不同，所以我无法统一的定义样式，所以我就去掉了那个功能。

最近很多朋友问我这个功能是怎么实现的，希望我能写个教程，让他们根据自己的实际情况自己添加，于是今天我就简单的说一下。

其实这个也不复杂，通过Jquery获取连接a标签中的title里面的内容，然后通过CSS进行针对性的定义就能达到我们想要的效果。

首先是加载Jquery库，这个我想大家都是知道的。

JQuery代码：

    jQuery(document).ready(function(){
         jQuery('ul.navi li a').addClass(function() { return jQuery(this).attr('title'); });
    });

核心CSS代码：

.navi li a.首页 {
    background: url("images/home.png") no-repeat scroll 0 0 transparent;
    display: block;
    padding-left: 21px;
}
.navi li a.首页:hover {
    background-position: 0 -17px;
    border-bottom: 1px dotted #535353;
    color: #535353;
}
.navi li a.关于 {
    background: url("images/about.png") no-repeat scroll 0 0 transparent;
    display: block;
    padding-left: 21px;
}
.navi li a.关于:hover {
    background-position: 0 -16px;
    border-bottom: 1px dotted #535353;
    color: #535353;
}
.navi li a.留言 {
    background: url("images/contact.png") no-repeat scroll 0 1px transparent;
    display: block;
    padding-left: 21px;
}
.navi li a.留言:hover {
    background-position: 0 -14px;
    border-bottom: 1px dotted #535353;
    color: #535353;
}
.navi li a.链接 {
    background: url("images/link.png") no-repeat scroll 0 0 transparent;
    display: block;
    padding-left: 21px;
}
.navi li a.链接:hover {
    background-position: 0 -17px;
    border-bottom: 1px dotted #535353;
    color: #535353;
}
.navi li a.归档 {
    background: url("images/archive.png") no-repeat scroll 1px 2px transparent;
    display: block;
    padding-left: 21px;
}
.navi li a.归档:hover {
    background-position: 1px -14px;
    border-bottom: 1px dotted #535353;
    color: #535353;
}

Html代码：

</pre>
<div class="pagemenu">
<ul class="navi">
	<li><a title="首页" href="/blog/">首页1</a></li>
	<li><a title="关于" href="/blog/about">关于1</a></li>
	<li><a title="归档" href="/blog/archives">归档1</a></li>
	<li><a title="留言" href="/blog/guestbook">留言1</a></li>
	<li><a title="链接" href="/blog/link">链接1</a></li>
</ul>
</div>
<pre>

Jqyery代码中的ul.navi li a 要跟div中对应；为了区分分类名字与title，我特地将分类名字后面加1区分，我们要的title里面的，然后通过CSS针对性的定义的。

大家看到这里用中文是不是感觉有点奇怪，一般用到中文的好像只是在字体中，比如：微软雅黑，宋体，其实其他地方也是可以使用中文定义的。

title里面是什么，上面的css中就对应什么，我想大家这么聪明，应该很快就能明白我说的。

演示地址：

VIEW DEMO

本文固定链接: https://www.weisay.com/blog/jquery-css-different-nav-icons.html | 威言威语

赏

JQuery+CSS实现分类菜单前面不同的图标：目前有 59 条评论

28楼
有歌：

我就悲剧了，因为我一点都不懂。现在想弄上去都不会。搞了半天也没得！有哪位可以教教？

2012-07-22 13:32 回复
27楼
王叨叨：

其实你用这种方法更省事a[title*=””]，只是不兼容ie6而已，你这样写的话，执行效率有点低。

2012-04-14 13:56 回复
- William文章作者：
  
  这效率确实低了点，IE6太悲剧了点
  
  2012-04-14 14:25 回复
  - 王叨叨：
    
    觉得没必要太考虑ie6，不要为了兼容而兼容，只要ie6不影响浏览就行了，不用做的浏览效果都一样。
    
    2012-04-14 14:27 回复
26楼
软兔兔：

weisaysimple 这个主题的改法一样？？

2011-11-08 15:18 回复
25楼
思奇：

很实用，收藏一下～
过段时间需要用到～

2011-11-03 21:25 回复
24楼
ishi90：

对于刚刚开始的小白来说压力还是比较大 Html代码没有说怎么用只有首页有图标其他没有麻烦指点下

2011-10-14 23:31 回复
- William文章作者：
  
  你把jquery代码放到header.php里面，你现在可能放index.php里面了。
  
  2011-10-15 13:38 回复
  - ishi90：
    
    谢谢你的提示已经完美解决了是jquery代码放错地方了
    
    2011-10-15 21:36 回复
23楼
anshao：

向博主学习！不知道博主提供的jQuery代码是否是写在主题的header.php文件中呢？还有提供的CSS代码是否是写在主题的style.css中呢？麻烦了！

2011-10-13 00:59 回复
- William文章作者：
  
  对于weisay heibai这个主题是这样就行了
  
  2011-10-13 16:22 回复
  - anshao：
    
    谢谢,已经实现！
    
    2011-10-13 16:23 回复
22楼
losttear：

你好,请问一下,是将上面的jQuery代码放在主题的header.php中,CSS代码放在主题的style.css中就可以实现了吗？

2011-10-12 23:27 回复
- William文章作者：
  
  对于weisay heibai这个主题是这样就行了。
  
  2011-10-13 16:22 回复
21楼
我爱pc：

原来是这样的啊，学习了！

2011-10-06 14:02 回复
20楼
wmtimes：

这用中文来写class我还真是头一次见啊。

2011-09-28 22:01 回复
- William文章作者：
  
  哈哈，看来我这个还是有启示意义的~
  
  2011-09-29 10:26 回复
19楼
路人丙：

我表示，完全看不懂，这些代码加在哪里，哪个什么什么库怎么加载。。。隔行如隔山啊，完全不懂。

2011-09-27 17:58 回复
- William文章作者：
  
  Jquery库一般主题都有了，只要加上那段Jquery代码就行，css代码放到主题style.css里面。
  
  2011-09-28 07:22 回复
18楼
徐发发：

学习了，感谢！

2011-09-18 19:48 回复
17楼
xmwusx.cn：

这个技巧还不错～省的一个个设置class

2011-09-17 15:12 回复
- William文章作者：
  
  其实呢跟家class一样，只是调用的title里面的东西，调用class也是一样
  
  2011-09-17 19:07 回复
16楼
大猪：

挺实用的小技巧

2011-09-17 11:12 回复
15楼
阿哲：

哈哈，有Jquery还是用这个好。

2011-09-17 10:34 回复
- William文章作者：
  
  必然的，可以最大化的利用Jquery
  
  2011-09-17 19:06 回复
14楼
阿梁：

教程能不能详细点吗，我是第一次接触wp，还是没看懂，谢谢！

2011-09-16 09:52 回复
- William文章作者：
  
  话说我还真不知道还要再怎么详细了~
  
  2011-09-16 21:03 回复
13楼
魏星博客：

第一次看到css中竟然可以使用中文，长见识了！

2011-09-16 09:05 回复
- William文章作者：
  
  哈哈，可以使用中文字体的。
  
  2011-09-16 21:02 回复
12楼
益酷网：

学习一下！这样看起来更美观了！

2011-09-15 21:23 回复
- William文章作者：
  
  稍稍个性了一点，不那么单调了
  
  2011-09-15 22:36 回复
11楼
尘色记忆：

又来学习了呵呵 ~！

2011-09-15 20:48 回复
10楼
林肆：

这个皮肤我真是很喜欢啊，设计的太好了。

2011-09-15 16:31 回复
- William文章作者：
  
  那就赶紧换成WP，哈哈
  
  2011-09-15 22:36 回复
  - 林肆：
    
    这个诱惑太大了，我还要考虑精力问题。
    
    2011-09-16 08:16 回复
    - William文章作者：
      
      其实吧，博客只是平台，重要的还是文字，界面也是为内容服务的。
      
      2011-09-16 21:00 回复
9楼
Mr.zhao：

那个JQ代码要放在哪啊，我是小白，求指导！

2011-09-15 14:46 回复
- William文章作者：
  
  放header上面，你可以查看我的演示地址里面的源文件就应该能明白了。
  
  2011-09-15 22:35 回复
  - Mr.zhao：
    
    恩，已经折腾出来了，谢谢威哥
    
    2011-09-15 22:36 回复
    - William文章作者：
      
      哈哈，自己整整下次折腾起来就快了
      
      2011-09-15 22:40 回复
8楼
锐品创意：

过来支持一下·a wei

2011-09-15 09:38 回复
7楼
三人帮：

我看到了历史上的今天这个，貌似在别的站没看到过

2011-09-15 00:02 回复
- William文章作者：
  
  这是一个插件，就叫：历史上的今天。
  
  2011-09-15 22:38 回复
6楼
Always.Life：

我也太蠢了，没看出来什么特别的地方出来

2011-09-14 23:49 回复
- William文章作者：
  
  额，就是页面导航前面的小图标而已
  
  2011-09-15 22:39 回复
5楼
qiuyili：

大餐、这绝对是大餐、不尝尝实在说不过去。

2011-09-14 15:49 回复
- William文章作者：
  
  甜点而已~
  
  2011-09-14 21:14 回复
4楼
阿修罗：

这样挺好的，可惜我不太会。

2011-09-14 14:22 回复
- William文章作者：
  
  这个不复杂，代码演示都有了~
  
  2011-09-14 21:13 回复
地板
水缘泡泡：

呵呵，加上了！

2011-09-14 13:18 回复
- William文章作者：
  
  呵呵，貌似你的独立页面跟我一样嘛~
  
  2011-09-14 21:13 回复
  - qiuyili：
    
    人家这都是跟你学的，喜欢复制粘贴，所以才会一样。换成我会改动一个字变成不一样，哈哈。
    
    2011-09-14 21:20 回复
    - William文章作者：
      
      哈哈，不一样好，那样才有特色~
      
      2011-09-14 21:25 回复
  - Lvtu：
    
    谁让你是大众偶像呢。。。
    
    2011-09-15 16:27 回复
    - William文章作者：
      
      我倒是更喜欢大众情人，哈哈
      
      2011-09-15 23:20 回复
板凳
Lvtu：

一直都想知道这个东东,谢谢啦！

2011-09-14 09:13 回复
- William文章作者：
  
  哈哈，小玩意儿而已~
  
  2011-09-14 21:12 回复
沙发
独自流浪：

为什么不直接用在html的a标签里面，通过class来区分，然后照写那段CSS代码不行吗？

2011-09-14 01:11 回复
- William文章作者：
  
  你说的这个也是可以的，不过IE6下除a标签外不支持hover属性的，稍稍有点瑕疵啦。
  
  2011-09-14 21:11 回复