<Head>
<Title> application of the navigation bar in the project </title>
<Style type = "text/css">
# DivFrame
{
Width: 500px;
Height: 200px;
Border: solid 2px # eee;
}
# DivHeader
{
Width: 500px;
Height: 50px;
Background-color: # eee;
}
# DivMore
{
Float: right; padding-top: 50px;
}
Ul {list-style-type: none; padding: 0px ;}
Li {float: left; width: 100px; height: 30px ;}
# Sp1
{
Float: right; margin-top: 0px;
}
# Splish
{
Font-size: 30px;
Font-weight: bold;
}
</Style>
<Script src = "jquery-1.9.1.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Function (){
Var numb = 1;
$ ('# Sp1'). click (function (){
/* If (numb % 2! = 0 ){
$ ('# Divcontent'). hide (2000 );
$ ('# Sp1'). text ('expand ');
}
Else {
$ ('# DivContent'). show (2000 );
$ ('# Sp1'). text ('hangzhou ');
}
Numb ++ ;*/
// Determine # display and hide divContent
If ($ ('# divcontent'). is (': visible ')){
$ ('# Divcontent'). hide (2000 );
$ ('# Sp1'). text ('expand ');
}
Else {
$ ('# DivContent'). show (2000 );
$ ('# Sp1'). text ('hangzhou ');
}
})
$ ('# DivMore'). click (function (){
If ($ ('# divMore A'). text () = 'stopped '){
$ ('Li: gt (3) '). hide (2000); // obtain the value of li after row 4th in ul.
$ ('# DivMore A'). text ('more ....');
}
Else {
$ ('Li: gt (3) '). show (2000 );
$ ('# DivMore A'). text ('stopped ');
}
})
})
</Script>
</Head>
<Body>
<Div id = "divFrame">
<Div id = "divHeader">
<Span id = "splish"> book Category </span>
<Span id = "sp1"> pending </span>
</Div>
<Div id = "divContent">
<Ul>
<Li> <a href = "#"> youth </a> </li>
<Li> <a href = "#"> children </a> </li>
<Li> <a href = "#"> entertainment </a> </li>
<Li> <a href = "#"> weekly </a> </li>
<Li> <a href = "#"> military </a> </li>
<Li> <a href = "#"> nutrition </a> </li>
<Li> <a href = "#"> healthy </a> </li>
<Li> <a href = "#"> current events </a> </li>
<Li> <a href = "#"> international </a> </li>
<Li> <a href = "#"> English </a> </li>
<Li> <a href = "#"> electronics </a> </li>
<Li> <a href = "#"> civil servant </a> </li>
<Li> <a href = "#"> test </a> </li>
<Li> <a href = "#"> statement </a> </li>
</Ul>
<Div id = "divMore"> <a href = "#"> simplified </a> </div>
</Div>
</Div>
</Body>