威言威语
我愿像茶,苦涩留心,清香予人。
威言威语
当前位置: 首页 > 设计 > 正文

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

JQuery+CSS实现分类名称前面不一样的可自定义的图标,通过Jquery获取连接a标签中的title里面的内容,然后通过CSS进行针对性的定义就能达到我们想要的效果。
JQuery+CSS实现分类菜单前面不同的图标
目录
文章目录隐藏
  1. JQuery代码:
  2. 核心CSS代码:
  3. Html代码:
  4. 演示地址:

『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中就对应什么,我想大家这么聪明,应该很快就能明白我说的。

演示地址:

您可能还会对这些文章感兴趣!

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

  1. 有歌
    28楼
    有歌:Firefox 13.0.1 Windows XP

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

    2012-07-22 13:32 回复
  2. 王叨叨
    27楼
    王叨叨:Google Chrome 18.0.1025.142 Windows 7

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

    2012-04-14 13:56 回复
    • William
      WilliamSafari 4.0 iPhone iOS 3.1.3

      @王叨叨这效率确实低了点,IE6太悲剧了点

      2012-04-14 14:25 回复
      • 王叨叨
        王叨叨:Google Chrome 18.0.1025.142 Windows 7

        @William觉得没必要太考虑ie6,不要为了兼容而兼容,只要ie6不影响浏览就行了,不用做的浏览效果都一样。

        2012-04-14 14:27 回复
  3. 软兔兔
    26楼
    软兔兔:Firefox 7.0.1 Windows XP

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

    2011-11-08 15:18 回复
  4. 思奇
    25楼
    思奇:Google Chrome 15.0.874.106 GNU/Linux

    很实用,收藏一下~
    过段时间需要用到~

    2011-11-03 21:25 回复
  5. ishi90
    24楼
    ishi90:Internet Explorer 7.0 Windows 7

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

    2011-10-14 23:31 回复
    • William
      WilliamSafari 4.0 iPhone iOS 3.1.3

      @ishi90你把jquery代码放到header.php里面,你现在可能放index.php里面了。

      2011-10-15 13:38 回复
      • ishi90
        ishi90:Internet Explorer 7.0 Windows 7

        @William:cool: 谢谢你的提示已经完美解决了是jquery代码放错地方了

        2011-10-15 21:36 回复
  6. anshao
    23楼
    anshao:Opera 11.51 Windows 7

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

    2011-10-13 00:59 回复
  7. losttear
    22楼
    losttear:Opera 11.51 Windows 7

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

    2011-10-12 23:27 回复
  8. 我爱pc
    21楼
    我爱pc:Google Chrome 14.0.835.186 Windows XP

    原来是这样的啊,学习了!

    2011-10-06 14:02 回复

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

gravatar

question razz sad smile redface biggrin eek shock confused cool lol mad rolleyes wink cry