您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇内容主要讲解“怎么用div+css实现仿淘宝的产品分类菜单效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用div+css实现仿淘宝的产品分类菜单效果”吧!
这是一款仿淘宝的产品分类菜单,CSS菜单,鼠标移上去,显示隐藏部分内容,仿写的淘宝网菜单,CSS和JS实现,用于产品分类中很合适的网站菜单,懂CSS的可自己优化。
运行效果截图如下:
在线演示地址如下:
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>仿淘宝的产品分类菜单</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 h4{ 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 > <ul id="menu" class="Nav_head1" > <li id="cid_284"><a href="#"><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <ul > <li><h4><a href="#">ASP源码</a></h4></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="#">主机域名</a></li><li><a href="#">企业网站</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 id="cid_636"><a href="#"><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <ul > <li><h4><a href="#">PHP源码</a></h4></li><li><a href="#">Ajax相关</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="#">企业网站</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 id="cid_291"><a href="#"><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <ul > <li><h4><a href="#">DELPHI源码</a></h4></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="#">文本处理</a></li><li><a href="#">图形处理</a></li><li><a href="#">其它分类</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li><li id="cid_509"><a href="#"></a></li></ul> </div> </div> </div> </div> </body> </html>
到此,相信大家对“怎么用div+css实现仿淘宝的产品分类菜单效果”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。