純CSS實(shí)現(xiàn)的菱形導(dǎo)航菜單效果代碼
發(fā)布時(shí)間：2015-09-10 14:54:57 作者：佚名 
我要評論
我要評論這篇文章主要為大家介紹了純CSS實(shí)現(xiàn)的菱形導(dǎo)航菜單效果代碼,采用純css實(shí)現(xiàn)菱形效果的導(dǎo)航菜單效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了純CSS實(shí)現(xiàn)的菱形導(dǎo)航菜單效果代碼。分享給大家供大家參考。具體如下：
這是一款兼容各種瀏覽器的菱形導(dǎo)航菜單，采用純CSS代碼實(shí)現(xiàn)，一改平時(shí)矩形風(fēng)格的菜單，讓人眼前一亮，形式新穎，鼠標(biāo)滑過時(shí)變色，而且在各大瀏覽器下表現(xiàn)不俗。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/css-Diamond-nav-menu-style-codes/
具體代碼如下：
復(fù)制代碼
代碼如下:<!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>菱形導(dǎo)航菜單</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>關(guān)于我們<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>網(wǎng)上商城<span class="ar"></span></a></li>
</ul>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>菱形導(dǎo)航菜單</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>關(guān)于我們<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>網(wǎng)上商城<span class="ar"></span></a></li>
</ul>
</body>
</html>
希望本文所述對大家的div+css程序設(shè)計(jì)有所幫助。
相關(guān)文章
基于css3的屬性transition制作菜單導(dǎo)航效果
這篇文章主要為大家介紹了基于css3的屬性transition制作菜單導(dǎo)航效果,可實(shí)現(xiàn)鼠標(biāo)滑過菜單項(xiàng)動(dòng)態(tài)改變背景滑塊的功能,基于css3的屬性transition實(shí)現(xiàn),非常具有實(shí)用價(jià)值,需要的2015-09-01CSS3實(shí)現(xiàn)銀灰色動(dòng)畫效果的導(dǎo)航菜單代碼
這篇文章主要為大家介紹了CSS3實(shí)現(xiàn)銀灰色動(dòng)畫效果的導(dǎo)航菜單代碼,采用純css3技術(shù)實(shí)現(xiàn)的導(dǎo)航效果,鼠標(biāo)滑過有背景變換的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-01css3實(shí)現(xiàn)的多級漸變下拉菜單導(dǎo)航效果代碼
這篇文章主要為大家介紹了css3實(shí)現(xiàn)的多級漸變下拉菜單導(dǎo)航效果代碼,通過純css3技術(shù)實(shí)現(xiàn)圓角圖形及漸變按鈕的模擬效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-31div+css實(shí)現(xiàn)藍(lán)色vista風(fēng)格css導(dǎo)航菜單效果
這篇文章主要為大家介紹了div+css實(shí)現(xiàn)藍(lán)色vista風(fēng)格css導(dǎo)航菜單效果,是一款非常美觀大方的藍(lán)色導(dǎo)航菜單效果,鼠標(biāo)滑過可顯示對應(yīng)的背景圖片,需要的朋友可以參考下2015-08-26div+css實(shí)現(xiàn)仿豬八戒首頁導(dǎo)航菜單效果
這篇文章主要為大家介紹了div+css實(shí)現(xiàn)仿豬八戒首頁導(dǎo)航菜單效果,涉及css實(shí)現(xiàn)鼠標(biāo)結(jié)合動(dòng)態(tài)背景變換效果的實(shí)現(xiàn)技巧,非常簡單實(shí)用,需要的朋友可以參考下2015-08-26- 這篇文章主要介紹了使用CSS3制作響應(yīng)式導(dǎo)航菜單的方法,這種菜單在移動(dòng)端的網(wǎng)頁制作中也經(jīng)常能夠用到,需要的朋友可以參考下2015-07-12
純CSS實(shí)現(xiàn)的水平下拉導(dǎo)航菜單特效源碼
是一段實(shí)現(xiàn)了鼠標(biāo)懸浮導(dǎo)航菜單上時(shí)會在下方出現(xiàn)水平的二級菜單效果的代碼，本段代碼適應(yīng)于所有網(wǎng)頁使用，有興趣的朋友們可以前來下載使用2015-04-30
純CSS3實(shí)現(xiàn)的華麗網(wǎng)站下拉菜單導(dǎo)航特效源碼
是一段實(shí)現(xiàn)了鼠標(biāo)放在導(dǎo)航時(shí)，該導(dǎo)航會下拉出相應(yīng)內(nèi)容的二級菜單的效果代碼，本段代碼適應(yīng)于所有網(wǎng)頁使用，有興趣的朋友們可以前來下載使用2015-03-12
純CSS3實(shí)現(xiàn)的圓形擁有二級菜單的菜單導(dǎo)航特效源碼
是一款在圓形的左側(cè)顯示一級菜單導(dǎo)航，當(dāng)鼠標(biāo)懸浮在一個(gè)標(biāo)題上時(shí)，在圓形的右側(cè)就會顯示出相關(guān)的二級導(dǎo)航菜單效果代碼，此段代碼是不是很有趣？本段代碼適應(yīng)于所有網(wǎng)頁使用2014-12-24
