div+css實現(xiàn)仿淘寶的產(chǎn)品分類菜單效果代碼
發(fā)布時間：2015-08-26 11:40:11 作者：佚名 
我要評論
我要評論這篇文章主要為大家介紹了div+css實現(xiàn)仿淘寶的產(chǎn)品分類菜單效果代碼,通過div+css實現(xiàn)仿淘寶布局效果的功能,非常簡單實用,需要的朋友可以參考下
本文實例講述了div+css實現(xiàn)仿淘寶的產(chǎn)品分類菜單效果代碼。分享給大家供大家參考。具體如下：
這是一款仿淘寶的產(chǎn)品分類菜單，CSS菜單，鼠標移上去，顯示隱藏部分內容，仿寫的淘寶網(wǎng)菜單，CSS和JS實現(xiàn)，用于產(chǎn)品分類中很合適的網(wǎng)站菜單，懂CSS的可自己優(yōu)化。
運行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/div-css-ftaobao-product-menu-codes/
具體代碼如下：
復制代碼
代碼如下:<!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=gb2312">
<title>仿淘寶的產(chǎn)品分類菜單</title>
<style>
body {text-align:center;font-family:"宋體"; margin:0; padding:0;font-size:12px; color:#000;overflow-x:hidden}
div,form,img,ul,ol,li,dl,dt,dd {margin:0;padding:0;border:0;text-align:left;}
.Nav{border-top:2px solid #c00}
.Nav .Navlf{width:358px;float:left;display:inline;margin:0px;padding:0px;border:1px solid #d8d8d8;border-top:none;border-left:none;position:relative;}
.Navlf .Navleft{width:350px;float:left;display:inline;height:450px;margin:0px;margin-left:2px;padding:0px;}
.Navleft a:visited{color:#333}
.Nav_head1{margin:0px;position:relative;z-index:99;float:left;display:inline;}
.Nav_head1 li{padding:0px;position:relative;float:left; display:inline-block;height:auto;line-height:22px;}
.Nav_head1 a{padding:0 10px 0 0;display:block;color:#333}
.Nav_head1 a:hover{text-decoration:none;background:#fff}
.Nav_head1 :hover > a{color:#f60;text-decoration:none;background:#fff}
.Nav_head1 ul{border:2px solid #fff;border-top:0px;position:absolute;font:normal 12px/22px arial;display:inline;padding:0 0px 6px 0px;overflow:hidden;left:0; height:120px;width:273px;word-wrap:break-word;word-break:break-all;}
.Nav_head1 ul li{padding:1px 0px 0px 0px;line-height:23px;margin-left:10px;margin-right:-2px;left:left;white-space:nowrap}
.Nav_head1 ul li h3{ font-size:14px; font-weight:bold; margin:0; padding:0;}
.Nav_head1 table {position:absolute;top:0;left:0;}
.Nav_head1 ul a, .Nav_head1 ul a:visited {color:#333;padding:0 1px 0 2px;background:none;}
.Nav_head1 ul a:hover{color:#fff;background:#30528F;text-decoration:none;}
.Nav_head1 ul :hover > a {color:#fff;background:#30528F}
.Nav_head1 li:hover ul,.Nav_head1 a:hover ul{margin:-2px;display:inline;visibility:visible;height:auto;border:2px #c00 solid;padding:2px; background:#ffe}
</style>
</head>
<body>
<div class="Nav">
<div class="Navlf">
<div class="Navleft">
<div style="width:300px;float:left; position:relative;left:0px;right:0px; z-index:0;height:306px;display: inline-block;">
<ul id="menu" class="Nav_head1" style="z-index:9999;">
<li style="z-index:9998" id="cid_284"><a href="#"><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul style="top:0px;">
<li><h3><a href="#">ASP源碼</a></h3></li><li><a href="#">社區(qū)論壇</a></li><li><a href="#">新聞文章</a></li><li><a href="#">博客日記</a></li><li><a href="#">留言聊天</a></li><li><a href="#">小偷采集</a></li><li><a href="#">主機域名</a></li><li><a href="#">企業(yè)網(wǎng)站</a></li><li><a href="#">CMS整站</a></li><li><a href="#">音樂視頻</a></li><li><a href="#">其它分類</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li><li style="z-index:9997" id="cid_636"><a href="#"><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul style="top:100px;">
<li><h3><a href="#">PHP源碼</a></h3></li><li><a href="#">Ajax相關</a></li><li><a href="#">數(shù)據(jù)管理</a></li><li><a href="#">博客日記</a></li><li><a href="#">留言聊天</a></li><li><a href="#">新聞文章</a></li><li><a href="#">插件模塊</a></li><li><a href="#">企業(yè)網(wǎng)站</a></li><li><a href="#">CMS系統(tǒng)</a></li><li><a href="#">音樂視頻</a></li><li><a href="#">其它分類</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li><li style="z-index:9996" id="cid_291"><a href="#"><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul style="top:200px;">
<li><h3><a href="#">DELPHI源碼</a></h3></li><li><a href="#">窗體設計</a></li><li><a href="#">系統(tǒng)相關</a></li><li><a href="#">算法相關</a></li><li><a href="#">解壓壓縮</a></li><li><a href="#">數(shù)據(jù)庫相關</a></li><li><a href="#">文本處理</a></li><li><a href="#">圖形處理</a></li><li><a href="#">其它分類</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li><li style="z-index:9995" id="cid_509"><a href="#"></a></li></ul>
</div>
</div>
</div>
</div>
</body>
</html>
"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=gb2312">
<title>仿淘寶的產(chǎn)品分類菜單</title>
<style>
body {text-align:center;font-family:"宋體"; margin:0; padding:0;font-size:12px; color:#000;overflow-x:hidden}
div,form,img,ul,ol,li,dl,dt,dd {margin:0;padding:0;border:0;text-align:left;}
.Nav{border-top:2px solid #c00}
.Nav .Navlf{width:358px;float:left;display:inline;margin:0px;padding:0px;border:1px solid #d8d8d8;border-top:none;border-left:none;position:relative;}
.Navlf .Navleft{width:350px;float:left;display:inline;height:450px;margin:0px;margin-left:2px;padding:0px;}
.Navleft a:visited{color:#333}
.Nav_head1{margin:0px;position:relative;z-index:99;float:left;display:inline;}
.Nav_head1 li{padding:0px;position:relative;float:left; display:inline-block;height:auto;line-height:22px;}
.Nav_head1 a{padding:0 10px 0 0;display:block;color:#333}
.Nav_head1 a:hover{text-decoration:none;background:#fff}
.Nav_head1 :hover > a{color:#f60;text-decoration:none;background:#fff}
.Nav_head1 ul{border:2px solid #fff;border-top:0px;position:absolute;font:normal 12px/22px arial;display:inline;padding:0 0px 6px 0px;overflow:hidden;left:0; height:120px;width:273px;word-wrap:break-word;word-break:break-all;}
.Nav_head1 ul li{padding:1px 0px 0px 0px;line-height:23px;margin-left:10px;margin-right:-2px;left:left;white-space:nowrap}
.Nav_head1 ul li h3{ font-size:14px; font-weight:bold; margin:0; padding:0;}
.Nav_head1 table {position:absolute;top:0;left:0;}
.Nav_head1 ul a, .Nav_head1 ul a:visited {color:#333;padding:0 1px 0 2px;background:none;}
.Nav_head1 ul a:hover{color:#fff;background:#30528F;text-decoration:none;}
.Nav_head1 ul :hover > a {color:#fff;background:#30528F}
.Nav_head1 li:hover ul,.Nav_head1 a:hover ul{margin:-2px;display:inline;visibility:visible;height:auto;border:2px #c00 solid;padding:2px; background:#ffe}
</style>
</head>
<body>
<div class="Nav">
<div class="Navlf">
<div class="Navleft">
<div style="width:300px;float:left; position:relative;left:0px;right:0px; z-index:0;height:306px;display: inline-block;">
<ul id="menu" class="Nav_head1" style="z-index:9999;">
<li style="z-index:9998" id="cid_284"><a href="#"><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul style="top:0px;">
<li><h3><a href="#">ASP源碼</a></h3></li><li><a href="#">社區(qū)論壇</a></li><li><a href="#">新聞文章</a></li><li><a href="#">博客日記</a></li><li><a href="#">留言聊天</a></li><li><a href="#">小偷采集</a></li><li><a href="#">主機域名</a></li><li><a href="#">企業(yè)網(wǎng)站</a></li><li><a href="#">CMS整站</a></li><li><a href="#">音樂視頻</a></li><li><a href="#">其它分類</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li><li style="z-index:9997" id="cid_636"><a href="#"><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul style="top:100px;">
<li><h3><a href="#">PHP源碼</a></h3></li><li><a href="#">Ajax相關</a></li><li><a href="#">數(shù)據(jù)管理</a></li><li><a href="#">博客日記</a></li><li><a href="#">留言聊天</a></li><li><a href="#">新聞文章</a></li><li><a href="#">插件模塊</a></li><li><a href="#">企業(yè)網(wǎng)站</a></li><li><a href="#">CMS系統(tǒng)</a></li><li><a href="#">音樂視頻</a></li><li><a href="#">其它分類</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li><li style="z-index:9996" id="cid_291"><a href="#"><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul style="top:200px;">
<li><h3><a href="#">DELPHI源碼</a></h3></li><li><a href="#">窗體設計</a></li><li><a href="#">系統(tǒng)相關</a></li><li><a href="#">算法相關</a></li><li><a href="#">解壓壓縮</a></li><li><a href="#">數(shù)據(jù)庫相關</a></li><li><a href="#">文本處理</a></li><li><a href="#">圖形處理</a></li><li><a href="#">其它分類</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li><li style="z-index:9995" id="cid_509"><a href="#"></a></li></ul>
</div>
</div>
</div>
</div>
</body>
</html>
希望本文所述對大家的div+css程序設計有所幫助。
相關文章
- 這篇文章主要為大家介紹了div+css實現(xiàn)仿豬八戒首頁導航菜單效果,涉及css實現(xiàn)鼠標結合動態(tài)背景變換效果的實現(xiàn)技巧,非常簡單實用,需要的朋友可以參考下2015-08-26
DIV+CSS實現(xiàn)的黑色回轉懸浮下拉二級菜單動態(tài)特效源碼
純CSS實現(xiàn)的黑色回轉下拉二級菜單動態(tài)特效源碼，是一段純DIV+CSS實現(xiàn)的動態(tài)效果懸浮下拉二級菜單代碼，適應于所有網(wǎng)頁，需要此段代碼的朋友們可以前來下載使用2014-11-20- [html] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <2009-04-01
符合標準的div css制作的彈出菜單-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學網(wǎng)
本文介紹了五款符合標準的div css制作的彈出菜單,而且不含有js的. NO.1最基本的：二級dropdown彈出菜單 <!2008-10-17DIV CSS制作的個性水平導航菜單實例-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學網(wǎng)
先看下效果: CSS樣式代碼: 以下為引用的內容： #pointermenu{ border-top: 7px solid black; /*optio2008-10-17CSS DIV制作梯形狀的不規(guī)則網(wǎng)站導航-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學網(wǎng)
前段時間做一個小項目碰到了一個導航制作的方式然后突然想到曾經(jīng)很久以前看到的梯形狀的不規(guī)則導航，就嘗試做了一下。結果碰到了幾個問題，后來在同事的提醒下總算完成了，2008-10-17- 這篇文章主要介紹了淘寶導航欄css代碼示例,需要的朋友可以參考下2014-05-05
