2023-08-26 分类: 网站建设
首先,我们不需要修改任何php文件。在后来的Joomla版本中,为菜单项添加图片已经成为Joomla原生的功能之一。
创建这种图片+CSS翻转菜单项的方法如下:
示例代码如下:
#pillmenu li.item28 a {
width: 31px;
height:28px;
background: url(../images/home.png) 0 0 no-repeat;
}
#pillmenu li.item28 a:hover {
background: url(../images/home-over.png) 0 0 no-repeat;
}
就是这样了。在我的例子中,我使用item28作为class名称,因为item28是对应着我的菜单项的标识。你可以在你的菜单项管理中找到你的菜单项的id数字。
你必须为每一个菜单项都增添上面那样的样式代码;这段代码中设置了默认状况与鼠标悬停状况下的两种样式。
当然,你也可以为当前选中的菜单项单独设置另一种背景样式,只需要为该菜单项再添加一段样式代码,例如:
#pillmenu li#current.item28 a {
background: url(../images/home-current.png) 0 0 no-repeat;
}
但是当这个当前的菜单项处于鼠标悬停状况时,它的背景是不会改变的,所以假如需要,则还要添加下面这段代码:
#pillmenu li#current.item28 a:hover {
background: url(../images/home-current-over.png) 0 0 no-repeat;
}
这样我们就得到了一个不错的图片+CSS的翻转菜单,无需任何javascript或额外的模块。
另外,我所修改的pillmenu菜单就是对应着上面示例代码中的#pillmenu。假如你使用并修改其他菜单,需要确保使用其响应的ID来替代掉“#pillmenu”。你可以在模板的HTML代码中找到你所使用的菜单的ID。
本文题目:使用图片和CSS实现翻转效果菜单技巧
标题网址:/news27/278777.html
成都网站建设公司_创新互联,为您提供Google、软件开发、网站设计、微信公众号、移动网站建设、自适应网站
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联
猜你还喜欢下面的内容