威言威语
我愿像茶一样,把苦涩留在心里,敬发出来的都是清香!
威言威语
当前位置: 首页 > 设计 > 正文

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

JQuery+CSS实现分类名称前面不一样的可自定义的图标,通过Jquery获取连接a标签中的title里面的内容,然后通过CSS进行针对性的定义就能达到我们想要的效果。

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

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

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

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

  1. 28楼
    有歌Firefox 13.0.1 Windows XP

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

    2012-07-22 13:32 回复

发表评论

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

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

快捷键:Ctrl+Enter