|
锁定老帖子 主题：css箭头菜单
精华帖 (4) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (1)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2011-01-11
学习了。。以后有机会一定要用上
|
| 返回顶楼 | |
|
发表时间：2011-01-11
firemmet 写道 仔细看下效果，通过现象看本质，问题并没有上边的那么复杂，箭头的方向是一致的，鼠标经过的样式也比较固定，背景为纯色。在现在的前提下没必要搬出大车轮子来用，无非是一些末端的遮盖，简单的css即可实现以上的需求。如下:
...... down下来看了下确实不错，不过jquery是现在做web的标配吧，有得用就用嘛，也不损失什么，呵呵～ |
| 返回顶楼 | |
|
发表时间：2011-01-12
最后修改：2011-01-12
我想做到的效果是点击后的效果(附件) 高手看下吧(对你们来说肯定再简单不过了)
|
| 返回顶楼 | |
|
发表时间：2011-01-12
好及时啊~项目当中正好要用到~
谢谢 |
| 返回顶楼 | |
|
发表时间：2011-01-12
lib 写道
jorneyR 写道
不知道你在没有在Opera上测试过，Opera中对padding的处理总是常出问题
在Opera上测试过，确实还有一点bug。当第一次将鼠标移动到一个题目上时，没有任何效果，并且左右两侧的箭头消失了。
哎！头疼，费了半天劲没有解决！ 嘿嘿，IE蛋疼，Opera也好不到哪去，Opera最大的优势是在老爷机上速度超级快。 |
| 返回顶楼 | |
|
发表时间：2011-01-13
都是高手啊O(∩_∩)O~
|
| 返回顶楼 | |
|
发表时间：2011-01-15
直接用边框对压不就可以了吗....
|
| 返回顶楼 | |
|
发表时间：2011-01-17
binlaniua 写道
直接用边框对压不就可以了吗....
能否共享一下代码？ |
| 返回顶楼 | |
|
发表时间：2011-02-22
firemmet 写道 仔细看下效果，通过现象看本质，问题并没有上边的那么复杂，箭头的方向是一致的，鼠标经过的样式也比较固定，背景为纯色。在现在的前提下没必要搬出大车轮子来用，无非是一些末端的遮盖，简单的css即可实现以上的需求。如下:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>meun</title>
<style type="text/css">
html, body, div{
margin: 0;
padding: 0;
}
.menu{
float: left;
padding: 0 20px 0 0;
_padding: 0 29px 0 0;
background: #D2D2D2;
font-size: 0;
}
.menu a{
display: inline-block;
height: 32px;
padding: 0 9px 0 0;
background: url(bg.png) no-repeat right 0;
color: #333;
font-size: 12px;
line-height: 32px;
text-decoration: none;
}
.menu a span{
display: block;
padding: 0 10px 0 15px;
}
.menu a:hover{
background: url(bg.png) no-repeat right -35px;
color: #FFF;
}
.menu a:hover span{
background: #888;
}
</style>
</head>
<body>
<div class="menu">
<a class="home" href="#"><span>HOME</span></a>
<a href="#"><span>NEWS1</span></a>
<a href="#"><span>NEWS2</span></a>
<a href="#"><span>NEWS3</span></a>
<a href="#"><span>NEWS4</span></a>
<a href="#"><span>NEWS5</span></a>
</div>
</body>
</html>
这是第一种效果的实现，第二种的效果也不难，html结构同第一种的，仅需要稍微调整下css即可了，如下： <!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>menu</title>
<style type="text/css">
html, body, div{
margin: 0;
padding: 0;
}
.menu{
float: left;
padding: 0 20px 0 0;
_padding: 0 29px 0 0;
background: #D2D2D2;
font-size: 0;
}
.menu a{
display: inline-block;
height: 32px;
margin: 0 -9px 0 0;
padding: 0 9px 0 0;
background: url(bg.png) no-repeat right 0;
color: #333;
font-size: 12px;
line-height: 32px;
text-decoration: none;
}
.menu a span{
display: block;
padding: 0 10px 0 20px;
}
.menu a:hover{
background: url(bg.png) no-repeat right -35px;
color: #FFF;
}
.menu a:hover span{
background: #888 url(bg.png) no-repeat left 0;
}
.menu a.home:hover span{
background: #888;
}
</style>
</head>
<body>
<div class="menu">
<a class="home" href="#"><span>HOME</span></a>
<a href="#"><span>NEWS1</span></a>
<a href="#"><span>NEWS2</span></a>
<a href="#"><span>NEWS3</span></a>
<a href="#"><span>NEWS4</span></a>
<a href="#"><span>NEWS5</span></a>
</div>
</body>
</html>
上传下背景图片， 
span里面放上中文以后，菜单显示就会乱码，在firefox、ie浏览器上均如此 |
| 返回顶楼 | |
