- <!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" />
- <title>jquery下拉菜单导航仿京东商城商品分类导航样式</title>
- <script type="text/javascript" src1="js/jquery-1.4.2.min.js"></script>
- <script type="text/javascript">
- (function ($) {
- $.fn.hoverForIE6 = function (option) {
- var s = $.extend({ current: "hover", delay: 10 }, option || {});
- $.each(this, function () {
- var timer1 = null, timer2 = null, flag = false;
- $(this).bind("mouseover", function () {
- if (flag) {
- clearTimeout(timer2);
- } else {
- var _this = $(this);
- timer1 = setTimeout(function () {
- _this.addClass(s.current);
- flag = true;
- }, s.delay);
- }
- }).bind("mouseout", function () {
- if (flag) {
- var _this = $(this); timer2 = setTimeout(function () {
- _this.removeClass(s.current);
- flag = false;
- }, s.delay);
- } else {
- clearTimeout(timer1);
- }
- })
- })
- }
- })(jQuery);
- </script>
- <style type="text/css">
- * { margin: 0; padding: 0; list-style-type: none; }
- a, img { border: 0; }
- body { font-family: "宋体",Arial,Lucida,Verdana,Helvetica,sans-serif; font-size: 12px; color: #333; line-height: 150%; background: #fff; }
- a:link, a:visited { color: #333; text-decoration: none; }
- a:hover { color: #c00; text-decoration: underline; }
- a:active { color: #900; }
- /* navsort */
- .navsort, .carbox, .allsort, .allsort .mt .extra, .allsort h3, .allsort s, .allsort .close { background: url(images/nav-sort.gif) no-repeat; }
- .navsort { width: 960px; height: 50px; background-position: 0 1px; background-repeat: repeat-x; margin: 40px auto 0 auto; }
- .carbox { width: 226px; height: 50px; float: right; background-position: 0 -152px; }
- .searcbox { width: 334px; height: 31px; overflow: hidden; float: left; margin: 10px 0 0 15px; display: inline; background: url(images/searchbox.gif) no-repeat; }
- /*allsort*/
- .allsort { float: left; width: 211px; height: 50px; background-position: 0px -101px; position: relative; z-index: 11; }
- .allsort .mt { height: 24px; padding: 14px 12px 12px 16px; line-height: 24px; cursor: pointer; overflow: hidden; }
- .allsort .mt strong { float: left; font-size: 14px; color: #630; }
- .allsort .mt .extra { float: right; overflow: hidden; width: 22px; height: 22px; background-position: -214px -52px; }
- .allsort .mc { display: none; position: absolute; top: 45px; overflow: visible; width: 203px; padding: 0 3px 0; border: solid #C40000; border-width: 0 1px 1px; background: #FEF8EF; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; }
- .allsort .item { width: 203px; height: 32px; border-top: 1px solid #FDE6D2; }
- .allsort .fore { border-top: none; }
- .allsort span { display: block; width: 203px; position: relative; z-index: 1; }
- .allsort h3 { font-size: 14px; width: 140px; height: 30px; padding-left: 20px; border: solid #FEF8EF; border-width: 1px 0 1px 1px; background-position: -241px -57px; font-weight: normal; }
- .allsort h3 a:link, .allsort h3 a:visited { display: block; height: 30px; line-height: 30px; color: #333; }
- .allsort h3 a:hover, .allsort h3 a:active { color: #1B578A; }
- .allsort s { display: block; position: absolute; top: 10px; left: 182px; width: 13px; height: 13px; background-position: -218px -106px; }
- .allsort .item .i-mc { display: none; position: absolute; left: 163px; top: 0; width: 700px; border: 1px solid #c30; background: #FFF9EF; overflow: hidden; }
- .allsort .item dt { padding: 3px 6px 0 0; font-weight: bold; }
- .allsort .item dd { padding: 3px 0 0; overflow: hidden; zoom: 1; }
- .allsort .subitem { float: left; width: 464px; min-height: 400px; padding: 0 4px 0 8px; }
- .allsort .subitem dl { border-top: 1px solid #FFEFD7; padding: 6px 0; overflow: hidden; zoom: 1; }
- .allsort .subitem .fore { border-top: none; }
- .allsort .subitem dt { float: left; width: 54px; line-height: 22px; text-align: right; color: #c00; }
- .allsort .subitem dd { float: left; width: 402px; }
- .allsort .subitem em { float: left; height: 14px; margin: 4px 0; line-height: 14px; padding: 0 8px; border-left: 1px solid #ccc; font-style: normal; white-space: nowrap; }
- .allsort .fr { background: #fff; width: 194px; padding: 0 15px 2010px 15px; margin-bottom: -2000px; float: right; }
- .allsort .fr dl { padding-bottom: 0; }
- .allsort .mc .extra { padding: 7px 8px; background: #FDF1DE; border-top: 1px solid #FDE6D2; }
- .allsorthover { background-position: 0 -50px; }
- .allsorthover .mt .extra { background-position: -214px -75px; }
- .allsorthover .mc { display: block; }
- .allsort .hover span { z-index: 13; width: 160px; }
- .allsort .hover h3 { font-size: 14px; border: solid #c30; border-width: 1px 0 1px 1px; overflow: hidden; background: url(images/nav-sort.gif) #FFF9EF no-repeat -241px -57px; font-weight: bold; }
- .allsort .hover s { display: none; }
- .allsort .hover .i-mc { display: block; z-index: 12; }
- *html .allsort .item dd { padding-bottom: 6px; }
- *html .allsort .subitem { height: 400px; }
- .allsort .close { position: absolute; top: 6px; left: 674px; z-index: 14; width: 19px; height: 19px; background-position: -216px -125px; cursor: pointer; }
- </style>
- </head>
- <body>
- <div class="navsort">
- <div class='allsort'>
- <div class='mt'>
- <strong><a href="#">全部商品分类</a></strong><div class='extra'> </div>
- </div>
- <div class='mc'>
- <div class='item fore'>
- <span>
- <h3><a href="#">图书</a></h3>
- <s></s></span>
- <div class='i-mc'>
- <div class='close' onclick="$(this).parent().parent().removeClass('hover')"></div>
- <div class='subitem'>
- <dl class='fore'>
- <dl>
- <dt>人文社科</dt>
- <dd>
- <em><a href='#'>历史</a></em>
- <em><a href='#'>哲学</a></em>
- <em><a href='#'>法律</a></em>
- </dd>
- </dl>
- <dl>
- <dt>经管励志</dt>
- <dd>
- <em><a href='#'>经济</a></em>
- <em><a href='#'>金融与投资</a></em>
- </dd>
- </dl>
- <dl>
- <dt>生活</dt>
- <dd>
- <em><a href='#'>生活</a></em>
- <em><a href='#'>旅游</a></em>
- </dd>
- </dl>
- </div>
- <div id="JD_sort_k" class='fr'>
- <img src1="images/1593.jpg" width="194" height="70" alt="" style="margin-top: 30px;" />
- </div>
- </div>
- </div>
- <div class='item'>
- <span>
- <h3><a href="#">手机数码</a></h3>
- <s></s></span>
- <div class='i-mc'>
- <div class='close' onclick="$(this).parent().parent().removeClass('hover')"></div>
- <div class='subitem'>
- <dl class='fore'>
- <dt>文艺</dt>
- <dd>
- <em><a href='#'>小说</a></em>
- <em><a href='#'>文学</a></em>
- <em><a href='#'>青春文学</a></em>
- </dd>
- </dl>
- <dl>
- <dt>少儿</dt>
- <dd>
- <em><a href='#'>少儿</a></em>
- <em><a href='#'>0-2岁</a></em>
- <em><a href='#'>3-6岁</a></em>
- </dd>
- </dl>
- <dl>
- <dt>其它</dt>
- <dd>
- <em><a href='#'>工具书</a></em>
- <em><a href='#'>影印版</a></em>
- <em><a href='#'>套装书</a></em>
- </dd>
- </dl>
- </div>
- <div id="Div2" class='fr'>
- <img src1="images/1593.jpg" width="194" height="70" alt="" style="margin-top: 30px;" />
- </div>
- </div>
- </div>
- <div class='extra'><a href='#'>全部商品分类</a></div>
- </div>
- </div>
- <!--allsort end-->
- <div class="searcbox"></div>
- <div class="carbox"></div>
- </div>
- <script type="text/javascript">
- $(".allsort").hoverForIE6({ current: "allsorthover", delay: 200 });
- $(".allsort .item").hoverForIE6({ delay: 150 });
- </script>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/070320148910.html
来源: http://www.codesnippet.cn/detail/070320148910.html