JQuery + CSS achieve menu sliding and stretching (similar to Taobao)

The function is very practical and the code is very simple

Result 1.

Result 2.

The style code is as follows:

Copy codeThe Code is as follows: body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, br, pre, form, fieldset, input, textarea, p, blockquote, th, td {
Margin: 0;
Padding: 0
}
Span {
Color: # FF2B13
}
A {
Text-decoration: none;
Color: #515050.
}
A: hover {
Text-decoration: underline;
Color: red
}
. Box_all {
Overflow: hidden;
Width: 350px;
Font-family: "";
Font-size: 14px;
Border: 1px solid # EEEEEE;
Border-top: 2px solid # F57A04;
Padding: 0 0 10px 0;
Margin: 0 auto
}
. Box {
Padding-left: 45px;
Padding-top: 5px
}
. Box li {
Line-height: 20px;
Margin-right: 30px;
Width: 120px;
Text-align: left;
Float: left;
List-style-type: none
}
. Boxdown {
Cursor: pointer;
Border: 1px solid # EEEEEE;
Width: 60px;
Height: 14px;
Background: # FFFFFF url (../images/down.png) no-repeat 20px;
Margin-left: 150px;
Margin-top:-2px;
Border-top: none;
Margin: 0 auto
}
. Up {
Cursor: pointer;
Border: 1px solid # EEEEEE;
Width: 60px;
Height: 14px;
Background: # FFFFFF url (../images/up.png) no-repeat 20px;
Margin-left: 150px;
Margin-top:-2px;
Border-top: none;
Margin: 0 auto
}

The main JavaScript code is as follows:Copy codeThe Code is as follows: $ (document). ready (function (){
Var a = $ (". box ul li: gt (3): not (: last )");
A. hide ();
$ (". Boxdown"). click (function (){
If (a. is (': visible ')){
A. slideUp ('fast ');
$ (This). removeClass ('up ');
} Else {
A. slideDown ('fast '). show ();
$ (This). addClass ('up ');
}
});
});