Although the style of imitation of the cat, but the main is to let you understand the drop down style structure.
There are comments on the page, if you do not understand the parameters, more alert, this JS basically no special algorithm, mainly in writing such a drop-down style, HTML structure, I feel very good, of course, the day cat that sidebar will be complex, but the principle is the same, the style can be modified is quite high.
Parameter Direct call Description:
| The code is as follows |
Copy Code |
$ (window). P10 ({
a:$ (' Activate button for Level two column '), b:$ (' Level two column area '), c:$ (' button in Level Two column '), d:$ (' Level three column area ')
}); |
Use this plugin, or download it, because the need for style support, of course, the style is easy to understand and change.
Full instance
| The code is as follows |
Copy Code |
| <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<style type= ' text/css ' >
body{margin:0px;padding:0px;font-size:12px;}
Ul,li,ol{margin:0px;padding:0px;list-style:none;}
A{text-decoration:none;}
img{border:0px;}
. P10clear{clear:both;}
. P10head{width:100%;height:100px;background: #a21c1d; _overflow:hidden;}
. p10hcontent{width:998px;height:100%;margin:0 Auto;}
. P10hlogo{width:300px;height:100%;overflow:hidden;float:right;}
. P10hlogo a{float:left;position:relative;top:22px;}
. P10hlogo a:hover{opacity:0.8;}
. p10hmenu{float:left;height:100%;}
. P10hmnav{width:120px;height:100%;float:left;margin-left:1px;text-align:center;position:relative;}
. P10hmnav a{display:block;width:100%;height:100%;line-height:100px;color:white;font-family: Microsoft James Black; font-size:15px;
. P10hmnav a:hover,. P10hmnav a.act{background: #690000;}
. P10content{width:100%;height:500px;background:url (./1.jpg) center no-repeat;margin-top:1px;
. P10submenu{width:200px;height:auto;background:white;float:left;position:relative;}
. p10scol{width:100%;background:white;box-shadow:4px 2px 5px rgba (0, 0, 0, 0.2);p osition:absolute;z-index:2;}
. p10sctitle{width:100%;height:40px;line-height:40px;}
. P10sctitle a{display:block;width:100%;height:100%;color: #160016; text-indent:20px;cursor:default;}
. P10sctitle a:hover,. P10sctitle a.act{background: #88766e; color:white;} * * This area do not, it is just a simple pull down, as required to consider whether to apply it * *
. P10sccontainer{position:relative;}
. P10sccontent{width:500px;background:white;position:absolute;left:200px;top:0px;display:none;padding-bottom : 20px;box-shadow:4px 2px 5px rgba (0, 0, 0, 0.2);
. p10sccnav{width:300px;margin:10px 0 0 10px;float:left;}
. P10sccnav em{display:block;border-bottom:2px Solid Black;width:100%;height:30px;line-height:30px;font-style: normal;font-size:15px;font-family: Microsoft Ya-black; cursor:default;}
. P10sccnav a{color: #646464; margin:10px 10px 0 0;float:left;display:inline;}
. P10sccnav A:hover{color:black;text-decoration:underline;}
</style>
<body> <div class= ' P10head ' >
<div class= ' p10hcontent ' >
<ul class= ' P10hmenu ' >
<li class= ' p10hmnav ' ><a class= ' act ' href= ' javascript:void (0); ' title= ' > All commodity categories </a></li>
<li class= ' p10hmnav ' ><a target= ' _blank ' href= ' http://www.tmall.com ' ' title= ' ' > Day cat </a></li>
<li class= ' p10hmnav ' ><a target= ' _blank ' href= ' http://www.jd.com ' title= ' "> Jing dong </a></li>
<li class= ' p10hmnav ' ><a target= ' _blank ' href= ' http://www.yihaodian.com ' title= ' ' > # a store </a></li >
</ul>
<div class= ' P10hlogo ' ><a target= ' _blank ' href= ' http://benzi.pw alt= ' ></a></div>
<div class= ' p10clear ' ></div>
<div class= ' P10submenu ' > <!--level Two column-->
<div class= ' P10scol ' >
<div class= ' p10sctitle ' ><a href= ' javascript:void (0); ' title= ' > Garments/underwear/Accessories </a></div>
<div class= ' p10sctitle ' style= ' background: #f1f1f1; ' ><a href= ' javascript:void (0); ' title= ' > Shoes/Bags </a></div>
<div class= ' p10sctitle ' ><a href= ' javascript:void (0); ' title= ' > Garments/underwear/Accessories </a></div>
<div class= ' p10sctitle ' style= ' background: #f1f1f1; ' ><a href= ' javascript:void (0); ' title= ' > Shoes/Bags </a></div>
<div class= ' p10sctitle ' ><a href= ' javascript:void (0); ' title= ' > Garments/underwear/Accessories </a></div>
<div class= ' p10sctitle ' style= ' background: #f1f1f1; ' ><a href= ' javascript:void (0); ' title= ' > Shoes/Bags </a></div>
<div class= ' p10sctitle ' ><a href= ' javascript:void (0); ' title= ' > Garments/underwear/Accessories </a></div>
<div class= ' p10sctitle ' style= ' background: #f1f1f1; ' ><a href= ' javascript:void (0); ' title= ' > Shoes/Bags </a></div>
<div class= ' p10sctitle ' ><a href= ' javascript:void (0); ' title= ' > Garments/underwear/Accessories </a></div>
<div class= ' p10sctitle ' style= ' background: #f1f1f1; ' ><a href= ' # ' title= ' > Shoes/Bags </a></div>
</div>
<!--end Level two column--> <!--level Three column-->
<div class= ' P10sccontainer ' >
<div class= ' p10sccontent ' >
<div class= ' P10sccnav ' >
<em> brand Women's clothing </em>
<a href= ' # ' title= ' > new to Product </a>
<a href= ' # ' title= ' > Dress </a>
<a href= ' # ' title= ' >t t-shirt </a>
<a href= ' # ' title= ' > Dress </a>
<a href= ' # ' title= ' >t t-shirt </a>
<a href= ' # ' title= ' > Dress </a>
<a href= ' # ' title= ' >t t-shirt </a>
<a href= ' # ' title= ' > Dress </a>
<a href= ' # ' title= ' >t t-shirt </a>
</div>
<div class= ' P10sccnav ' >
<em> brand Women's clothing </em>
<a href= ' # ' title= ' > new to Product </a>
<a href= ' # ' title= ' > Dress </a>
<a href= ' # ' title= ' >t t-shirt </a>
<a href= ' # ' title= ' > Dress </a>
<a href= ' # ' title= ' >t t-shirt </a>
<a href= ' # ' title= ' > Dress </a>
<a href= ' # ' title= ' >t t-shirt </a>
<a href= ' # ' title= ' > Dress </a>
<a href= ' # ' title= ' >t t-shirt </a>
</div>
</div>
<div class= ' p10sccontent ' >
<div class= ' P10sccnav ' >
<em> brand Women's clothing </em>
<a href= ' # ' title= ' > new to Product </a>
<a href= ' # ' title= ' > Dress </a>
<a href= ' # ' title= ' >t t-shirt </a>
<a href= ' # ' title= ' > Dress </a>
<a href= ' # ' title= ' >t t-shirt </a>
<a href= ' # ' title= ' > Dress </a>
<a href= ' # ' title= ' >t t-shirt </a>
<a href= ' # ' title= ' > Dress </a>
<a href= ' # ' title= ' >t t-shirt </a>
</div>
</div>
</div>
<!--end Level three column--> </div>
<div class= ' p10clear ' ></div>
</div>
</div> <div class= ' p10content ' ></div> <script type= "Text/javascript" src= "/jquery-1.7.2.js" ></script>
<script type= "Text/javascript" src= "/p10.js" ></script>
<script type= "Text/javascript" >
$ (window). P10 ({
a:$ ('. P10hmnav '). EQ (0),
b:$ ('. P10submenu '),
c:$ ('. P10sctitle '),
d:$ ('. P10sccontent ')
});
</script>
</body>
|
