纯CSS实现的菱形导航菜单效果代码

本文实例讲述了纯CSS实现的菱形导航菜单效果代码。分享给大家供大家参考。具体如下：

这是一款兼容各种浏览器的菱形导航菜单，采用纯CSS代码实现，一改平时矩形风格的菜单，让人眼前一亮，形式新颖，鼠标滑过时变色，而且在各大浏览器下表现不俗。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/css-Diamond-nav-menu-style-codes/

具体代码如下：

复制代码@H_777_22@代码如下:!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>
title> 菱形导航菜单/title>
meta http-equiv="content-type" content="text/html; charset=gb2312">
style type="text/css">
ul,li,a,span{ margin:0; padding:0; list-style:outside none; height:25px; line-height:25px; display:block; }
ul{ padding-left:25px; }
ul li{ float:left; display:inline; margin-right:26px; }
ul li a,ul li a span{ background:url(images/navbg.png) -25px 0 no-repeat; }
ul li a{ padding:0 25px; font-Size:12px; color:#FFF; position:relative; float:left; text-align:center; }
ul li a span{ position:absolute; top:0; width:25px; }
ul li a .al{ left:-25px; background-position:left 0; }
ul li a .ar{ right:-25px; background-position:right 0; }
ul li a:hover{ background-position:-25px -25px; }
ul li a:hover .al{ background-position:left -25px; }
ul li a:hover .ar{ background-position:right -25px; }
ul li a:active,ul li.current a{ background-position:-25px -50px; }
ul li a:active .al,ul li.current a .al{ background-position:left -50px; }
ul li a:active .ar,ul li.current a .ar{ background-position:right -50px; }
/style>
/head>
body>
ul>
li> a href="javascript:void(0)"> span class="al"> /span> 首页span class="ar"> /span> /a> /li>
li> a href="javascript:void(0)"> span class="al"> /span> 关于我们span class="ar"> /span> /a> /li>
li> a href="javascript:void(0)"> span class="al"> /span> 公司新闻span class="ar"> /span> /a> /li>
li> a href="javascript:void(0)"> span class="al"> /span> 网上商城span class="ar"> /span> /a> /li>
/ul>
/body>
/html>

希望本文所述对大家的div+css程序设计有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！