Company background Cut Chart

I. Transduction of level Three menu

Html:

<div class= "Subnavbox" >
<div class= "Subnav" >
<div class= "Mident" ></div>
<div class= "Mword" > My work </div>
<div class= "Clear" ></div>
</div>
<ul class= "navcontent" style= "Display:block;" >
<li><div class= "Smamun" onclick= "$ (' #thr1 '). Slidetoggle (300);" > Reporting </div>
<ul id= "Thr1" class= "Thrmenu" style= "Display:block;" >
<li><a href= "#" > Work Today </a></li>
<li><a href= "#" > Work Tomorrow </a></li>
<li><a href= "#" > Work plan </a></li>
</ul>


</li>
<li class= "Btmline" ></li>
<li><div class= "Smamun" onclick= "$ (' #thr2 '). Slidetoggle (300);" > Applications </div>
<ul id= "THR2" class= "Thrmenu" style= "Display:block;" >
<li><a href= "#" > Leave </a></li>
<li><a href= "#" > Travel </a></li>
<li><a href= "#" > Fees </a></li>
<li><a href= "#" > Reimbursement </a></li>
</ul>

</li>
<li class= "Btmline" ></li>
<li><div class= "Smamun" > Nissin </div></li>
<li class= "Btmline" ></li>
<li><div class= "Smamun" > Bulk sms </div></li>
<li class= "Btmline" ></li>
</ul>
<div class= "Subnav" >
<div class= "Mident1" ></div>
<div class= "Mword" > My clients </div>
<div class= "Clear" ></div>
</div>

<div class= "Subnav" >
<div class= "Mident2" ></div>
<div class= "Mword" > Inquiries </div>
<div class= "Clear" ></div>
</div>

<div class= "Subnav" >
<div class= "Mident3" ></div>
<div class= "Mword" > Management </div>
<div class= "Clear" ></div>
</div>

</div>

Css:

. subnavbox{width:200px; Height:auto;margin:auto;}
. subnav{Height:44px;cursor:pointer; Background:url (.. /img/bmenul.png) left bottom repeat-x;}
. Subnav. mident{width:27px; height:23px; float:left; margin-top:12px; margin-left:10px; background:url /img/icon.png) -2px-31px No-repeat;}
. Subnav. mident1{width:27px; height:23px; float:left; margin-top:12px; margin-left:10px; background:url /img/icon.png) -2px-112px No-repeat;}
. Subnav. mident2{width:27px; height:23px; float:left; margin-top:12px; margin-left:10px; background:url /img/icon.png) -3px-71px No-repeat;}
. Subnav. mident3{width:27px; height:23px; float:left; margin-top:12px; margin-left:10px; background:url /img/icon.png) -3px-157px No-repeat;}

. Subnav. mword{width:auto; height:23px; float:left; margin-top:10px;_margin-top:13px; margin-left:9px; line-height : 23px; Font-weight:bold;font-size:14px;color: #fff; text-shadow:1px 1px 1px #000;}
. Subnav:hover{color: #fff;}

. navcontent{width:100%;d Isplay:none;}
. navcontent li{Width:198px;height:auto;  Background-color: #fff; Border-left:solid 1px #cacacb; border-right:solid 1px #cacacb;}
. navcontent Li smamun{width:188px; height:40px; padding-left:10px; font-size:14px; font-weight:bold; color: #3b64a4; Line-height:40px;cursor:pointer;}
. navcontent. btmline{width:200px; height:2px; Background:url (..  /img/smenul.png) left bottom repeat-x; Background-color:none; Border:none;}

. thrmenu{width:180px; height:56px; margin:0 auto; border-top:solid 1px #5a88cc;d isplay:none; }
. thrmenu li{width:50%; height:13px; float:left; margin-top:10px; Background-color:none; Border:none; }
. thrmenu Li a{width:90%; height:13px; float:left; Background:url (.. /img/icon.png) -0px-256px no-repeat; padding-left:10%;  Display:block; }
. thrmenu li a:hover{color: #66b27d; Background:url (... /img/icon.png) -0px-242px No-repeat;}

Js:

<script src= "Js/jquery-1.7.1.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
$ (function () {
$ (". Subnav"). Click (function () {///
$ (this). Toggleclass ("CURRENTDD"). Siblings (". Subnav"). Removeclass ("CURRENTDD")
$ (this). Toggleclass ("Currentdt"). Siblings (". Subnav"). Removeclass ("Currentdt")

Modify the digital control speed, Slideup (500) controls the roll-up speed
$ (this). Next (". Navcontent"). Siblings (". Navcontent"). Slideup (500);
})
})
</script>

Knowledge Points:

The main is jquery control Show hidden:

1.$ (". Subnav"). Click a menu for a number of classes to identify the first menu, then how to distinguish between the user point?

$ (this). Next (". Navcontent"). Siblings (". Navcontent"). Slideup (500);

$ (this) indicates the one that the user points to . The Slidetoggle (500) operation is performed by the one-level menu that is ordered.

. Siblings (". Navcontent"). Slideup (500); The next step is to start the calendar with all the same class menus from the Point menu, and perform the close operation

2.toggleClass () JQuery Property action: Toggles one or more classes that set or remove the selected element. Http://www.w3school.com.cn/jquery/attributes_toggleclass.asp

3. Display of level Three menu is hidden:

Onclick= "$ (' #thr1 '). Slidetoggle (300);" Written on the level two menu, Slidetoggle (), the application of sliding functions.

Two. Mouse hover Picture Text animation effect

Html:

<li>

<div class= "Pictit" >
<div class= "Nrone" style= "Display:block;" >
<div class= "TITSJ" ></div>
<div class= "Titword" > Analysis Introduction </div>

</div>
<div class= "Nrtwo" style= "Display:none;" >
<div class= "DESBT" > Positioning Analysis Introduction </div>
<div class= "Desnr" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; We will analyze the introduction of the analysis of the analysis of the introduction of the analysis of the introduction of the analysis of the introduction of the set of analysis and introduction to the analysis of the introduction of the analysis of the introduction of a set of analyses introduced by the analysis and introduction to the analysis of the analysis and introduction of the set of analyses introduced by the analysis and introduction of the analysis of the </div>

</div>

</div>

</li>

Css:

. Main. Content. picbox{width:100%; height:auto;}
. Main. Content. picbox li{width:381px; height:312px; float:left; position:relative; margin-top:20px;}
. Main. Content. picbox Li img{width:100%; height:100%;}
. rf{margin-left:20px;}
. Main. Content. picbox Li pictit{width:100%; height:52px; Background-color: #3a65a4;p osition:absolute; left:0; bottom:0; Z-index:6;}
. Main. Content. picbox Li pictit nrone. titsj{width:19px; height:13px; margin:0 auto; margin-top:6px; Background:url (.. /img/icon.png) -0-354px No-repeat;}
. Main. Content. picbox Li pictit nrone. titword{width:100%; height:auto; margin-top:3px; font-size:16px; text-align:ce Nter Color: #fff;}

/*.main. Content. picbox Li nrtwo{width:100%; height:100%; Background-color: #3a65a4;p osition:absolute; left:0; top:0; Z-index:5; Filter:alpha (opacity=60); -moz-opacity:0.6;  -khtml-opacity:0.6; opacity:0.6; }*/

. Main. Content. picbox Li Nrtwo desbt{width:100%; height:20px; text-align:center; color: #fff; margin-top:15px; font-si Ze:16px;overflow:hidden; }
. Main. Content. picbox Li Nrtwo desnr{width:90%; height:90%; margin:0 auto; padding-top:20px; line-height:20px; font-si ze:14px; Color: #fff; Overflow:hidden;}
. qh{width:100%; Height:100%;background-color: #3a65a4;}

Js:

<script src= "Js/jquery-1.9.1.min.js" type= "Text/javascript" ></script>
<script>
$ (function () {
$ ('. Picbox li '). Hover (function () {
$ ('. Pictit ', this). Stop (). Animate ({
Height: ' 312px '
});

$ (". Nrone", this). CSS (' Display ', ' none ');
$ (". Nrtwo", this). CSS (' Display ', ' block ');

$ (". Pictit", this). Animate ({opacity:.6},200);

},function () {
$ ('. Pictit ', this). Stop (). Animate ({
Height: ' 52px '
});


$ (". Nrone", this). CSS (' Display ', ' block ');
$ (". Nrtwo", this). CSS (' Display ', ' none ');
$ (". Pictit", this). Animate ({opacity:1},200);
});
});
</script>

Knowledge Points:

1. The whole function means that when the mouse hovers over Li (. Hover), there are two functions, the first of which is. The height of the pictit is changed to the maximum, covering the entire area, and the second is the opposite. Pictit Height to minimum

$ ('. Pictit ', this). Stop (). Animate ({
Height: ' 312px '
});

This is the control function for the div height: $ ('. Pictit ', this) the most point to the Div, which is distinguished by the class.

Back. Stop (). Animate () Why isn't it clear that the JQuery animate () method is used to create custom animations. Http://www.w3school.com.cn/jquery/jquery_animate.asp

2.$ (". Nrone", this). CSS (' Display ', ' none '); A function that controls the CSS of a div

3.$ (". Pictit", this). Animate ({opacity:.6},200); Use the. Animate () function to control the transparency of the DIV change

$ (selector). Animate ({params},speed,callback);
Animate () It's so powerful to say

Three, little tricks.

This can be done directly in a div, small icons made into a div background. Without the picture a div, the text a div.

<div class= "Wkstate notstate" > Unfinished </div>

. wkstate{Width:auto; height:15px; float:right; margin-right:20px; margin-top:12px; padding-left:20px; line-height : 15px;}
. notstate{Background:url (.. /img/icon.png) -0-223px no-repeat; Color: #bc393a;}

Company background Cut Chart