|
锁定老帖子 主题：css箭头菜单
精华帖 (4) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (1)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2011-01-07
最后修改：2011-01-10
最近公司要对已有的产品进行升级，希望改变一下导航菜单的展现方式。于是，在网上搜索了一下，感觉带箭头的导航菜单方式不错，于是就模仿着写了一个，其实很简单。不废话了，看代码。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<title>Menu</title>
<style type="text/css">
ul, li {
list-style-type:none;
padding:0;
margin:0;
}
#menu {
border:1px solid #dedede;
height:35px;
background:url(bg_out.gif) repeat-x;
}
#menu li {
float:left;
line-height:35px;
padding-left: 10px;
padding-right: 15px;
}
#menu li div {
height: 100%;
width: 100%;
}
.li_out {
background:url(arrow_out.gif) no-repeat right center;
}
.li_over {
cursor:hand;
background:url(arrow_over.gif) no-repeat right center;
color:white;
}
.div_over {
background: url(bg_over.gif) repeat-x;
margin-left: -10px;
padding-left: 10px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#menu").children("li").hover(
function(){
$(this).addClass("li_over");
$(this).children("div").addClass("div_over");
},
function(){
$(this).removeClass("li_over");
$(this).children("div").removeClass("div_over");
}
);
});
</script>
</head>
<body>
<ul id="menu">
<li class="li_out"><div>Home</div></li>
<li class="li_out"><div>Equipment File</div></li>
<li class="li_out"><div>Sparepart Account</div></li>
<li class="li_out"><div>Maintenance Management</div></li>
<li class="li_out"><div>System</div></li>
</ul>
</body>
</html>
效果显示如下：
2011-01-08修改： 今天和同事交流了一下，发现了更好的实现效果。感谢同事marker提出的建议和改进的帮助。
箭头样式导航菜单2.rar是marker提供的实现效果（注意，菜单栏在浏览器中是右对齐的），如图
箭头样式导航菜单3.rar是我改进后的另一种实现效果（注意，菜单栏在浏览器中是左对齐的），如图
大家给看看，是否还有bug没有测试到？欢迎指出，在此先谢谢！
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2011-01-08
我找样的东西好久了！
|
| 返回顶楼 | |
|
发表时间：2011-01-10
不错 很好的效果 谢谢分享！
|
| 返回顶楼 | |
|
发表时间：2011-01-10
很实用，与传统别具一格
|
| 返回顶楼 | |
|
发表时间：2011-01-10
不知道你在没有在Opera上测试过，Opera中对padding的处理总是常出问题
|
| 返回顶楼 | |
|
发表时间：2011-01-11
mouseover，一共改变三张图片，很简单的思路啊
|
| 返回顶楼 | |
|
发表时间：2011-01-11
rainsilence 写道
mouseover，一共改变三张图片，很简单的思路啊
实现起来确实很简单，重点不是mouseover，而是padding和margin与background的组合使用。 |
| 返回顶楼 | |
|
发表时间：2011-01-11
jorneyR 写道
不知道你在没有在Opera上测试过，Opera中对padding的处理总是常出问题
在Opera上测试过，确实还有一点bug。当第一次将鼠标移动到一个题目上时，没有任何效果，并且左右两侧的箭头消失了。
哎！头疼，费了半天劲没有解决！ |
| 返回顶楼 | |
|
发表时间：2011-01-11
把LZ的代码改了一下，图片也换了一下，呵呵～
确实是挺好玩的～
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<title>Menu</title>
<style type="text/css">
*{ margin:0; padding:0;}
#menu{
clear:both;
height:1%;
overflow:hidden;
margin:50px;
list-style:none;
background:#d2d2d2;
}
#menu li {
float:left;
line-height:30px;
overflow:hidden;
display:inline;
}
#menu li a{
text-decoration:none;
float:left;
display:inline;
padding:0 5px;
}
#menu li a:hover{
background:url(bg_over.gif) repeat-x left center;
}
#menu li.separator{
width:8px;
height:30px;
padding:0;
}
#menu li.separator a, #menu li.separator a:hover{
background:url(arrow_out.gif) no-repeat right center;
height:30px;
width:8px;
padding:0;
}
#menu li.hover-before a, #menu li.hover-before a:hover{
background-image:url(arrow_next_over.gif);
}
#menu li.hover-after a, #menu li.hover-after a:hover{
background-image:url(arrow_over.gif);
}
</style>
<script type="text/javascript">
jQuery(function($){
var objMenu = $('#menu');
$('li', objMenu)
.after('<li class="separator"><a href="#"> </a></li>')
.hover(function(){
var self = $(this);
$('.separator').removeClass('hover-before hover-after');
self.prev('.separator').addClass('hover-before');
self.next('.separator').addClass('hover-after');
},function(){
var self = $(this);
self.prev('.separator').removeClass('hover-before');
self.next('.separator').removeClass('hover-after');
});
});
</script>
</head>
<body>
<div>
<div id="menu-content">
<ul id="menu">
<li><a href="#">System</a></li>
<li><a href="#">Maintenance Management</a></li>
<li><a href="#">Sparepart Account</a></li>
<li><a href="#">Equipment File</a></li>
<li><a href="#">Home</a></li>
</ul>
</div>
</div>
</body>
</html>
|
| 返回顶楼 | |
|
发表时间：2011-01-11
最后修改：2011-01-11
仔细看下效果，通过现象看本质，问题并没有上边的那么复杂，箭头的方向是一致的，鼠标经过的样式也比较固定，背景为纯色。在现在的前提下没必要搬出大车轮子来用，无非是一些末端的遮盖，简单的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>
上传下背景图片， 
|
| 返回顶楼 | |
