`

css箭头菜单

CSSJavaScriptjQuery 
阅读更多

最近公司要对已有的产品进行升级，希望改变一下导航菜单的展现方式。于是，在网上搜索了一下，感觉带箭头的导航菜单方式不错，于是就模仿着写了一个，其实很简单。不废话了，看代码。

<!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没有测试到？欢迎指出，在此先谢谢！

 

  • 大小: 3.6 KB
  • 大小: 3.4 KB
  • 大小: 3.2 KB
分享到：
| 开发随笔
评论
18 楼 mr_sunq 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浏览器上均如此
17 楼 lib 2011-01-17  
<div class="quote_title">binlaniua 写道</div>
<div class="quote_div">直接用边框对压不就可以了吗....</div>
<p> </p>
<p>能否共享一下代码？</p>
16 楼 binlaniua 2011-01-15  
直接用边框对压不就可以了吗....
15 楼 lxs647 2011-01-13  
都是高手啊O(∩_∩)O~
14 楼 jorneyR 2011-01-12  
<div class="quote_title">lib 写道</div>
<div class="quote_div">
<div class="quote_title">jorneyR 写道</div>
<div class="quote_div">不知道你在没有在Opera上测试过，Opera中对padding的处理总是常出问题</div>
<p> </p>
<p>在Opera上测试过，确实还有一点bug。当第一次将鼠标移动到一个题目上时，没有任何效果，并且左右两侧的箭头消失了。</p>
<p> </p>
<p>哎！头疼，费了半天劲没有解决！<img src="/images/smiles/icon_redface.gif" alt=""></p>
</div>
<p>嘿嘿，IE蛋疼，Opera也好不到哪去，Opera最大的优势是在老爷机上速度超级快。</p>
13 楼 spsmysp 2011-01-12  
好及时啊~项目当中正好要用到~
谢谢
12 楼 Sehoney 2011-01-12  
<p><span style="font-size: small;">我想做到的效果是点击后的效果(附件)<br>现在这个是移动上去的效果</span></p>
<p><span style="font-size: small;">高手看下吧(对你们来说肯定再简单不过了)<img src="/images/smiles/icon_biggrin.gif" alt=""></span></p>
<p> </p>
11 楼 interjc 2011-01-11  
firemmet 写道
仔细看下效果，通过现象看本质，问题并没有上边的那么复杂，箭头的方向是一致的，鼠标经过的样式也比较固定，背景为纯色。在现在的前提下没必要搬出大车轮子来用，无非是一些末端的遮盖，简单的css即可实现以上的需求。如下:
......


down下来看了下确实不错，不过jquery是现在做web的标配吧，有得用就用嘛，也不损失什么，呵呵～
10 楼 keete 2011-01-11  
学习了。。以后有机会一定要用上
9 楼 firemmet 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>

上传下背景图片，

8 楼 interjc 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="#">&nbsp;</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>
7 楼 lib 2011-01-11  
<div class="quote_title">jorneyR 写道</div>
<div class="quote_div">不知道你在没有在Opera上测试过，Opera中对padding的处理总是常出问题</div>
<p> </p>
<p>在Opera上测试过，确实还有一点bug。当第一次将鼠标移动到一个题目上时，没有任何效果，并且左右两侧的箭头消失了。</p>
<p> </p>
<p>哎！头疼，费了半天劲没有解决！<img src="/images/smiles/icon_redface.gif" alt=""></p>
6 楼 lib 2011-01-11  
<div class="quote_title">rainsilence 写道</div>
<div class="quote_div">mouseover，一共改变三张图片，很简单的思路啊</div>
<p> </p>
<p>实现起来确实很简单，重点不是mouseover，而是padding和margin与background的组合使用。</p>
5 楼 rainsilence 2011-01-11  
mouseover，一共改变三张图片，很简单的思路啊
4 楼 jorneyR 2011-01-10  
不知道你在没有在Opera上测试过，Opera中对padding的处理总是常出问题
3 楼 blackbirdcc 2011-01-10  
很实用，与传统别具一格
2 楼 ligg5034 2011-01-10  
不错 很好的效果  谢谢分享！
1 楼 Javakeith 2011-01-08  
我找样的东西好久了！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics